Array.prototype.slice()

Try it

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"]

Cú pháp

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

Tham số

start Optional

Chỉ mục từ 0 để bắt đầu trích xuất, được chuyển đổi thành số nguyên.

• Chỉ mục âm đếm ngược từ cuối mảng — nếu -array.length <= start < 0, sẽ dùng start + array.length.
• Nếu start < -array.length hoặc start bị bỏ qua, sẽ dùng 0.
• Nếu start >= array.length, trả về mảng rỗng.

end Optional

Chỉ mục từ 0 để kết thúc trích xuất, được chuyển đổi thành số nguyên. slice() trích xuất đến nhưng không bao gồm end.

• Chỉ mục âm đếm ngược từ cuối mảng — nếu -array.length <= end < 0, sẽ dùng end + array.length.
• Nếu end < -array.length, sẽ dùng 0.
• Nếu end >= array.length hoặc end bị bỏ qua hoặc là undefined, sẽ dùng array.length, khiến tất cả các phần tử đến cuối được trích xuất.
• Nếu end chỉ đến vị trí trước hoặc bằng vị trí mà start chỉ đến, trả về mảng rỗng.

Giá trị trả về

Một mảng mới chứa các phần tử được trích xuất.

Mô tả

Phương thức slice() là một phương thức sao chép. Nó không thay đổi this mà thay vào đó trả về một bản sao nông chứa một số phần tử giống với các phần tử của mảng gốc.

Phương thức slice() bảo tồn các vị trí trống. Nếu phần được cắt là mảng thưa, mảng trả về cũng sẽ thưa.

Phương thức slice() là phương thức tổng quát. Nó chỉ yêu cầu giá trị this có thuộc tính length và các thuộc tính có khóa là số nguyên.

Ví dụ

Trả về một phần của mảng hiện có

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Trong ví dụ này, slice(1, 3) trích xuất các phần tử từ chỉ mục 1 đến, nhưng không bao gồm, chỉ mục 3, tạo ra mảng mới ['Orange', 'Lemon'].

Bỏ qua tham số end

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

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

Trong ví dụ này, slice(2) trích xuất các phần tử từ chỉ mục 2 đến cuối mảng.

Sử dụng chỉ mục âm

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

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

Trong ví dụ này, slice(-2) trích xuất hai phần tử cuối của mảng. Khi sử dụng chỉ mục âm với phương thức slice, các chỉ mục âm được đếm từ cuối mảng, bắt đầu từ -1 cho phần tử cuối cùng, -2 cho phần tử thứ hai tính từ cuối, và cứ thế tiếp tục. Chỉ mục âm -2 được bao gồm vì nó là điểm bắt đầu của quá trình trích xuất.

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

<--- read from reverse

Sử dụng chỉ mục start dương và chỉ mục end âm

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']

Trong ví dụ này, slice(1, -1) bắt đầu trích xuất từ chỉ mục 1 và đi đến, nhưng không bao gồm, phần tử tại chỉ mục -1 (là phần tử cuối cùng). Kết quả là mảng mới với ['Banana', 'Orange', 'Mango']. Phương thức slice luôn loại trừ phần tử tại chỉ mục cuối được chỉ định, bất kể là dương hay âm.

read from start --->

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

<--- read from reverse

Sử dụng slice với mảng các đối tượng

Trong ví dụ sau, slice tạo một mảng mới, newCar, từ myCar. Cả hai đều bao gồm tham chiếu đến đối tượng myHonda. Khi màu của myHonda được đổi thành tím, cả hai mảng đều phản ánh sự thay đổi.

// 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);

Script này sẽ xuất ra:

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

Gọi slice() trên đối tượng không phải mảng

Phương thức slice() đọc thuộc tính length của this. Sau đó nó đọc các thuộc tính có khóa nguyên từ start đến end và định nghĩa chúng trên một mảng mới được tạo.

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 ]

Sử dụng slice() để chuyển đổi đối tượng giống mảng thành mảng

Phương thức slice() thường được dùng cùng với bind() và call() để tạo phương thức tiện ích chuyển đổi đối tượng giống mảng thành mảng.

// 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]

Sử dụng slice() trên mảng thưa

Mảng được trả về từ slice() có thể thưa nếu mảng nguồn thưa.

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

Thông số kỹ thuật

Khả năng tương thích với trình duyệt

Xem thêm

• Polyfill của Array.prototype.slice trong core-js
• es-shims polyfill của Array.prototype.slice
• Hướng dẫn Indexed collections
• Array
• Array.prototype.pop()
• Array.prototype.shift()
• Array.prototype.concat()
• Array.prototype.splice()
• TypedArray.prototype.slice()
• String.prototype.slice()