← 返回首页
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
Toggle sidebar
  1. 開発者向けのウェブ技術
  2. JavaScript
  3. JavaScript リファレンス
  4. 標準組み込みオブジェクト
  5. Array
  6. slice()
Theme
  • OS default
  • Light
  • Dark
日本語
Remember language Learn more

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

View in English Always switch to English

Array.prototype.slice()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

In this article

試してみましょう

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]

仕様書

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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on 2025年8月9日 by MDN contributors.

View this page on GitHub • Report a problem with this content
  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

Your blueprint for a better internet.

MDN Contribute Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.