sự khác biệt được giải thích với bánh

Tiêu đề này có thể là “làm thế nào để không bị nhầm lẫn giữa mối nối và lát cắt của JavaScript”, bởi vì tôi không bao giờ có thể nhớ được sự khác biệt giữa hai loại này.

Vì vậy, tôi hy vọng thủ thuật này sẽ giúp cả tôi và bạn trong tương lai:

S (p) lice = Slice + (p) => Slice + in (p) lace

Array.prototype.slice()

Array.prototype.slice() được sử dụng để cắt một mảng từ start Điểm đến end điểm, loại trừ end.

Như tên gợi ý, nó được sử dụng để cắt các phần tử ra khỏi một mảng. Nhưng không giống như cắt bánh, cắt một mảng không cắt mảng thực tế mà giữ nguyên mảng đó (bánh vô hạn!).

arr.slice(start, [end])

Quy tắc

1. Một mảng mới được trả về và mảng ban đầu không bị sửa đổi.
2. Nếu end bị bỏ qua, end trở thành phần cuối (phần tử cuối cùng) của mảng.
3. Nếu start là -ve, các phần tử được tính từ cuối.

const infiniteCake = ['?','?','?','?','?','?']

let myPieceOfCake = infiniteCake.slice(0,1) // ['?']
let yourDoublePieceOfCake = infiniteCake.slice(0,2) // (2) ["?", "?"]
console.log(infiniteCake) //['?','?','?','?','?','?']

Như bạn thấy đấy, inifinteCake là không thể sửa đổi.

Array.prototype.splice()

Splice thực hiện các thao tác tại chỗcó nghĩa là nó sửa đổi mảng hiện có.

Ngoài việc loại bỏ các phần tử, mối nối còn được sử dụng để thêm các phần tử. Splice là “lát” bánh trong thế giới thực:

arr.splice(start, [deleteCount, itemToInsert1, itemToInsert2, ...])

Quy tắc

1. Các thao tác được thực hiện tại chỗ.
2. Một mảng được trả về với các mục đã xóa.
3. Nếu start là -ve, các phần tử được tính từ cuối.
4. Nếu deleteCountbị bỏ qua, các phần tử cho đến cuối mảng bị loại bỏ.
5. Nếu các mục để chèn chẳng hạn như itemToInsert1 được bỏ qua, các yếu tố chỉ được loại bỏ.

const cake = ['?','?','?','?','?','?'];
let myPieceOfCake = cake.splice(0, 1) // ["?"]
console.log(cake) // (5) ["?", "?", "?", "?", "?"]

let yourDoublePieceOfCake = cake.splice(0,2) //(2) ["?", "?"]
console.log(cake) //(3) ["?", "?", "?"]

Đây, cake được sửa đổi và giảm kích thước.

Ví dụ mã

const myArray  = [1,2,3,4,5,6,7] 

console.log(myArray.slice(0))       // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(0, 1))    // [ 1 ]
console.log(myArray.slice(1))       // [ 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(5))       // [ 6, 7 ]
console.log(myArray.slice(-1))      // [ 7 ]
console.log(myArray)                // [ 1, 2, 3, 4, 5, 6, 7 ]



const secondArray = [10, 20, 30, 40, 50]

console.log(secondArray.splice(0, 1))   // [ 10 ] : deletes 1 element starting at index 0
console.log(secondArray.splice(-2, 1))  // [ 40 ] : deletes 1 element starting at index end-2 
console.log(secondArray)                // [ 20, 30, 50 ]
console.log(secondArray.splice(0))      // [ 20, 30, 50 ] : deletes all elements starting at index 0
console.log(secondArray)                // []
console.log(secondArray.splice(2, 0, 60, 70)) // [] : deletes 0 elements starting at index 2 (doesn't exist so defaults to 0) and then inserts 60, 70
console.log(secondArray)                // [60, 70]

TL; DR

Sử dụng splice nếu mảng ban đầu cần được sửa đổi hoặc các phần tử cần được thêm vào.

Sử dụng slice để loại bỏ các phần tử nếu mảng ban đầu không được sửa đổi.

Quan tâm đến nhiều hướng dẫn và JSBytes từ tôi? Hãy đăng ký để nhận thư mới từ tôi. hoặc theo dõi tôi trên Twitter