Array.prototype.slice()

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

slice() 方法 Array 例項會返回一個 淺複製,該複製包含從 startend(不包含 end)的部分陣列,其中 startend 表示陣列中元素的索引。原始陣列不會被修改。

試一試

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: 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 之前(不包含 end)。

  • 負數索引從陣列末尾開始計數——如果 -array.length <= end < 0,則使用 end + array.length
  • 如果 end < -array.length,則使用 0
  • 如果 end >= array.length 或省略了 endendundefined,則使用 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 contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

在此示例中,slice(1, 3) 從索引 1 提取元素直到索引 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) 提取陣列的最後兩個元素。當對 slice 方法使用負數索引時,負數索引從陣列末尾開始計數,最後一個元素為 -1,倒數第二個元素為 -2,依此類推。負數索引 -2 本身被包含在內,因為它是提取的起始點。

|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

使用正數 start 索引和負數 end 索引

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

// Using positive start index and negative end index
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Banana', 'Orange', 'Mango']

在此示例中,slice(1, -1) 從索引 1 開始提取,直到索引 -1(即最後一個元素)之前(不包含)。這將生成新陣列 ['Banana', 'Orange', 'Mango']slice 方法始終排除最後一個指定索引處的元素,無論該索引是正數還是負數。

read from start --->

   0     1     2     3     4
|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

對物件陣列使用 slice

在下面的示例中,slicemyCar 建立了一個新陣列 newCar。兩者都包含對物件 myHonda 的引用。當 myHonda 的顏色更改為紫色時,兩個陣列都會反映出此更改。

js
// Using slice, create newCar from myCar.
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);

// Change the color of 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() 方法會讀取 thislength 屬性。然後,它會讀取從 startend 的整數鍵屬性,並在新建立的陣列上定義它們。

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // ignored by slice() since length is 3
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]

使用 slice() 將類陣列物件轉換為陣列

slice() 方法通常與 bind()call() 一起使用,建立一個將類陣列物件轉換為陣列的實用方法。

js
// slice() is called with `this` passed as the first argument
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® 2026 語言規範
# sec-array.prototype.slice

瀏覽器相容性

另見