Array.prototype.slice()

基线 广泛可用

此功能已得到很好的建立,并且可以在许多设备和浏览器版本上运行。它已在浏览器中可用,自 2015 年 7 月.

slice() 方法是 Array 实例的方法,它返回一个 浅拷贝,该拷贝包含从 startend(不包含 end)的数组的一部分,其中 startend 表示该数组中项目的索引。原始数组不会被修改。

试一试

语法

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 或省略 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 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

使用正起始索引和负结束索引

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 list1 = list(1, 2, 3); // [1, 2, 3]

在稀疏数组上使用 slice()

如果源是稀疏的,则从 slice() 返回的数组可能是稀疏的。

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

规范

规范
ECMAScript 语言规范
# sec-array.prototype.slice

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅