Cắt mảng trong JavaScript (slice) | Laptrinhcanban.com

Cắt mảng trong JavaScript (slice)

Hướng dẫn cách cắt mảng trong JavaScript. Bạn sẽ học được cách cắt một phạm vi từ mảng ban đầu và tạo ra một mảng mới trong JavaScript bằng phương thức slice sau bài học này.

Phương thức slice() trong JavaScript

Để cắt mảng trong JavaScript, chúng ta sẽ sử dụng đến phương thức slice() trong Array Object.

Phương thức slice() trong Array Object có tác dụng copy một phạm vi chỉ định trong mảng ban đầu và tạo ra một mảng mới. Bằng cách sử dụng slice(), chúng ta có thể tùy ý cắt ra các phạm vi mình muốn từ mảng ban đầu, thông qua việc chỉ định phạm vi cần cắt.

Chúng ta sử dụng phương thức slice trong JavaScript với 3 kiểu cú pháp sau đây:

arr.slice();
arr.slice(start);
arr.slice(start, end);

Trong đó:

  • arr là mảng ban đầu
  • start là index bắt đầu phạm vi cắt. Index này được bao gồm trong kết quả cắt. Nếu lược bỏ start thì giá trị 0 (vị trí đầu mảng) sẽ được sử dụng.
  • end là index kết thúc phạm vi cắt. Index này không bao gồm trong kết quả cắt, và có thể nằm ngoài phạm vi của mảng. Nếu lược bỏ end thì arr.length (vị trí cuối mảng) sẽ được sử dụng.

Phương thức slice trả về một mảng mới được cắt ra từ mảng ban đầu với độ dài đúng bằng hiệu của giá trị end với start.

Cắt mảng trong JavaScript

Sau đây chúng ta sẽ cùng thực hành một số ví dụ về cắt mảng trong JavaScript bằng phương thức slice.

Cắt mảng con có phạm vi nằm trong mảng ban đầu

Nếu chỉ định các đối số start và end nằm trong phạm vi số phần tử của mảng ban đầu, thì các phần tử tương ứng trong phạm vi sẽ được cắt ra như sau:

let src = [12, 24, 18, 35, 21];

/*Cắt các phần tử từ index 1 đến 4*/
let dst1 = src.slice(1, 4);
console.log(dst1); // [ 24, 18, 35 ]

/*Cắt các phần tử từ index 2 đến 4*/
let dst2 = src.slice(2, 4);
console.log(dst2); // [ 18, 35 ]

Trong ví dụ này, phạm vi chỉ định cắt nằm trong phạm vi mảng ban đầu, và kết quả chúng ta có mảng mới là một phần của mảng ban đầu như trên.

Cắt mảng con có phạm vi nằm ngoài mảng ban đầu

Nếu chỉ định các đối số start và end nằm ngoài phạm vi số phần tử của mảng ban đầu, thì JavaScript sẽ tự động điều chỉnh lại phạm vi cắt và cắt ra các phần tử trong phạm vi điều chỉnh với quy tắc như sau:

  1. Nếu start nhỏ hơn 0 thì mặc định start bằng 0 và cắt từ đầu chuỗi

  2. Nếu end lớn hơn số phần tử của mảng thì mặc định end = array.length và cắt cho đến hết mảng

Ví dụ cụ thể:

let src = [12, 24, 18, 35, 21];

/*Cắt các phần tử từ index 1 đến 7, khi đó end được điều chỉnh thành array.length*/
let dst1 = src.slice(1, 7);
console.log(dst1); // [ 24, 18, 35 ]

/*Cắt các phần tử từ index -3 đến 4, khi đó start được điều chỉnh thành 0*/
let dst2 = src.slice(-3, 4);
console.log(dst2); // [ 18, 35 ]

Lược bỏ đối số khi cắt cắt mảng trong JavaScript bằng slice()

Khi sử dụng phương thức slice() để cắt cắt mảng trong JavaScript, chúng ta cũng có thể lược bỏ đi các đối số start và end như trong các ví dụ sau đây:

Lược bỏ đối số end trong slice()

Khi lược bỏ đối số end trong slice(), độ dài mảng tính bởi array.length sẽ được sử dụng và sẽ tiến hành cắt cho đến hết mảng.

Ví dụ:

let src = [12, 24, 18, 35, 21];

let dst1 = src.slice(1);
console.log(dst1); // [ 24, 18, 35, 21 ]

let dst2 = src.slice(3);
console.log(dst2); // [ 35, 21 ]

Lược bỏ cả 2 đối số start và end trong slice()

Khi lược bỏ cả 2 đối số start và end trong slice(), khi đó start sẽ bằng 0, end sẽ bằng độ dài mảng, do đó một mảng mới hoàn toàn giống với mảng ban đầu sẽ được cắt ra.

Ví dụ:

let src = [12, 24, 18, 35, 21];

let dst1 = src.slice();
console.log(dst1); // [ 12, 24, 18, 35, 21 ]

Cắt mảng 2 chiều trong JavaScript

Chúng ta cũng có thể sử dụng phương thức slice() để cắt mảng 2 chiều trong JavaScript.

Ví dụ cụ thể:

let src =[['Yamada', 75], ['Suzuki', 68]];;
console.log("src= " , src);
// src= [ [ 'Yamada', 75 ], [ 'Suzuki', 68 ] ]

let result = src.slice(0,1);
console.log("result= " , result); [ 24, 18, 35, 21 ]
// result= [ [ 'Yamada', 75 ] ]

Tuy nhiên cần lưu ý là nếu chúng ta sử dụng phương thức slice() để cắt mảng 2 chiều trong JavaScript, giữa mảng kết quả và mảng ban đầu sẽ tồn tại mối quan hệ tham chiếu. Do đó khi thay đổi giá trị của một trong chúng thì mảng còn lại cũng sẽ thay đổi theo.

Ví dụ khi chúng ta thay đổi giá trị của mảng result ở trên, mảng src cũng sẽ bị thay thế như sau đây:

let src =[['Yamada', 75], ['Suzuki', 68]];;
console.log("src= " , src);
// src= [ [ 'Yamada', 75 ], [ 'Suzuki', 68 ] ]

let result = src.slice(0,1);
console.log("result= " , result); [ 24, 18, 35, 21 ]
// result= [ [ 'Yamada', 75 ] ]

/*Thay thế giá trị mảng result*/
result[0][1] = 2;

console.log("src after= " , src);
// src after= [ [ 'Yamada', 2 ], [ 'Suzuki', 68 ] ]

Lưu ý khi cắt mảng trong JavaScript bằng slice

Như đã phân tích ở trên thì nếu mảng đã cho là mảng 1 chiều, phương thức slice() không làm thay đổi mảng ban đầu đó, mà về thực chất là copy phần muốn cắt ra từ mảng ban đầu để tạo ra một mảng hoàn toàn mới. Do vậy giữa mảng ban đầu và mảng kết quả không có mối quan hệ tham chiếu và hoàn toàn độc lập với nhau, nên việc thay đổi 1 trong 2 mảng cũng không ảnh hưởng đến mảng còn lại.

Tuy nhiên nếu sử dụng slice để cắt mảng 2 chiều trong JavaScript, giữa mảng kết quả và mảng ban đầu sẽ tồn tại mối quan hệ tham chiếu. Do đó khi thay đổi giá trị của một trong chúng thì mảng còn lại cũng sẽ thay đổi theo.

Do đó chúng ta chỉ nên dùng slice để cắt mảng 1 chiều trong JavaScript mà thôi.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách cắt mảng trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.