← 返回首页
Array.prototype.slice() - JavaScript | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
サイドバーを切り替え
  1. 開発者向けのウェブ技術
  2. JavaScript
  3. JavaScript リファレンス
  4. 標準組み込みオブジェクト
  5. Array
  6. slice()
配色
  • OS のデフォルト
  • ライト
  • ダーク
日本語
言語を記憶 もっと知る

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Array.prototype.slice()

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

slice() は Array インスタンスのメソッドで、配列の一部を start から end （end は含まれない）までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。 ここで start と end はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。

目次

試してみましょう

const animals = ["ant", "bison", "camel", "duck", "elephant"]; console.log(animals.slice(2)); // 予想される結果: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // 予想される結果: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // 予想される結果: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // 予想される結果: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // 予想される結果: Array ["camel", "duck"] console.log(animals.slice()); // 予想される結果: Array ["ant", "bison", "camel", "duck", "elephant"]

構文

js
slice() slice(start) slice(start, end)

引数

start 省略可

抽出を始める位置のゼロから始まるインデックスで、整数に変換されます。

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 -array.length <= start < 0 の場合、 start + array.length が使用されます。
  • start < -array.length または start が省略された場合は 0 が使用されます。
  • start >= array.length の場合、空の配列が返されます。
end 省略可

抽出し終える位置のゼロから始まるインデックスで、整数に変換されます。 slice() は end を含まず、その直前までを抽出します。

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 -array.length <= end < 0 の場合、 end + array.length が使用されます。
  • end < -array.length の場合は 0 が使用されます。
  • end >= array.length または end が省略された場合は array.length が使用され、最後まですべての要素が抽出されます。
  • end が start が示す位置よりも前またはその位置を示す場合、空の配列が返されます。

返値

取り出された要素を含む新しい配列です。

解説

slice() メソッドはコピーメソッドです。これは this を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。

slice() メソッドは空のスロットを保持します。スライスされた部分が疎配列の場合、返す配列も疎配列になります。

slice() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。

例

既存の配列の一部を返す

js
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3); // fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる // citrus には ['Orange','Lemon'] が含まれる

この例では、slice(1, 3) は、インデックス 1 からインデックス 3 まで（ただし 3 自体は含まない）の要素を抽出して、新しい配列 ['Orange', 'Lemon'] を作成します。

end 引数の省略

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; const tropical = fruits.slice(2); console.log(tropical); // ['Orange', 'Mango', 'Pineapple']

この例では、slice(2) は、インデックス 2 から配列の末尾までの要素を抽出します。

負のインデックスの使用

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; const lastTwo = fruits.slice(-2); console.log(lastTwo); // ['Mango', 'Pineapple']

この例では、slice(-2) は配列の最後の 2 つの要素を抽出します。slice メソッドで負のインデックスを使用する場合、負のインデックスは配列の末尾からカウントされ、最後の要素は -1、2 つ目の要素は -2 というように続きます。負のインデックス -2 自体は、抽出の開始点であるため、含まれます。

| | | | | | | S | L | I | C | E | | | | | | | -5 -4 -3 -2 -1 <--- 逆方向に読む

正の開始インデックスと負の終了インデックスを使用する場合

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]; // 正の開始インデックスと負の終了インデックスを使用する const sliceExample = fruits.slice(1, -1); console.log(sliceExample); // ['Banana', 'Orange', 'Mango']

この例では、slice(1, -1) は、インデックス 1 から抽出し、インデックス -1 (最後の要素) まで抽出しますが、この要素は含まれません。その結果、 ['Banana', 'Orange', 'Mango'] という新しい配列が作成されます。 slice メソッドは、指定した最後のインデックスの要素が正の値であるか負の値であるかを問わず、常にその要素を除外します。

先頭から読む ---> 0 1 2 3 4 | | | | | | | S | L | I | C | E | | | | | | | -5 -4 -3 -2 -1 <--- 逆方向に読む

sliceをオブジェクトの配列で使用

以下の例で、slice は新しい配列 newCar を myCar から生成します。両者ともオブジェクト myHonda への参照を含んでいます。myHonda の色が purple に変更されると、両方の要素がその変更を反映します。

js
// slice を使って、myCar から newCar を生成する。 const myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 }, }; const myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; const newCar = myCar.slice(0, 2); console.log("myCar =", myCar); console.log("newCar =", newCar); console.log("myCar[0].color =", myCar[0].color); console.log("newCar[0].color =", newCar[0].color); // myHonda の色を変える。 myHonda.color = "purple"; console.log("The new color of my Honda is", myHonda.color); console.log("myCar[0].color =", myCar[0].color); console.log("newCar[0].color =", newCar[0].color);

このスクリプトの出力は次の様になります。

myCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2, 'cherry condition', 'purchased 1997' ] newCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ] myCar[0].color = red newCar[0].color = red The new color of my Honda is purple myCar[0].color = purple newCar[0].color = purple

配列以外のオブジェクトに対する slice() の呼び出し

slice() メソッドは this の length プロパティを読み込みます。そして、 start から end までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。

js
const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, 3: 33, // length が 3 であるので slice() から無視される }; console.log(Array.prototype.slice.call(arrayLike, 1, 3)); // [ 3, 4 ]

slice() を用いて配列風オブジェクトを配列に変換

slice() メソッドは bind() や call() と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。

js
// slice() は第 1 引数として `this` が渡されて呼び出される const slice = Function.prototype.call.bind(Array.prototype.slice); function list() { return slice(arguments); } const listResult = list(1, 2, 3); // [1, 2, 3]

疎配列に対する slice() の使用

slice() から返される配列は、元の配列が疎配列であれば疎配列になります。

js
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]

仕様書

仕様書
ECMAScript® 2027 Language Specification
# sec-array.prototype.slice

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

関連情報

MDN の改良に協力

このページは役に立ちましたか？
はい いいえ
協力方法を知る

このページは MDN の貢献者によって 2025年8月9日 に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告
フィルター入力をクリア
  1. 標準組み込みオブジェクト
  2. Array
  3. コンストラクター
    1. Array()
  4. 静的メソッド
    1. from()
    2. fromAsync()
    3. isArray()
    4. of()
  5. 静的プロパティ
    1. [Symbol.species]
  6. インスタンスメソッド
    1. at()
    2. concat()
    3. copyWithin()
    4. entries()
    5. every()
    6. fill()
    7. filter()
    8. find()
    9. findIndex()
    10. findLast()
    11. findLastIndex()
    12. flat()
    13. flatMap()
    14. forEach()
    15. includes()
    16. indexOf()
    17. join()
    18. keys()
    19. lastIndexOf()
    20. map()
    21. pop()
    22. push()
    23. reduce()
    24. reduceRight()
    25. reverse()
    26. shift()
    27. slice()
    28. some()
    29. sort()
    30. splice()
    31. toLocaleString()
    32. toReversed()
    33. toSorted()
    34. toSpliced()
    35. toString()
    36. unshift()
    37. values()
    38. with()
    39. [Symbol.iterator]()
  7. インスタンスプロパティ
    1. length
    2. [Symbol.unscopables]
  8. 継承
  9. Object/Function
  10. 静的メソッド
    1. apply()
    2. bind()
    3. call()
    4. toString()
    5. [Symbol.hasInstance]()
  11. 静的プロパティ
    1. displayName
    2. length
    3. name
    4. prototype
    5. arguments
    6. caller
  12. インスタンスメソッド
    1. __defineGetter__()
    2. __defineSetter__()
    3. __lookupGetter__()
    4. __lookupSetter__()
    5. hasOwnProperty()
    6. isPrototypeOf()
    7. propertyIsEnumerable()
    8. toLocaleString()
    9. toString()
    10. valueOf()
  13. インスタンスプロパティ
    1. __proto__
    2. constructor

より良いインターネットのための青写真。

MDN 協力 開発者

このコンテンツの一部は、©1998–2026 個人の mozilla.org 協力者です。コンテンツはクリエイティブ・コモンズ・ライセンスのもとで利用できます。