HOME>> học javascript - lập trình javascript cơ bản>>04. mảng trong javascript
Cắt mảng trong JavaScript (slice)
14 tháng 12 ,2021
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. Để 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(); Trong đó: 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. 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.Phương thức slice() trong JavaScript
arr.slice(start);
arr.slice(start, end);Cắt mảng trong JavaScript
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:
Copylet 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:
Nếu start nhỏ hơn 0 thì mặc định start bằng 0 và cắt từ đầu chuỗi
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ể:
Copylet 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ụ:
Copylet 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ụ:
Copylet 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ể:
Copylet 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:
Copylet 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.
Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tạiCreativecommonsvà DMCA
Bài viết liên quan
Array filter trong JavaScript
Array map trong JavaScript
Array reduce trong JavaScript
Chuyển mảng thành chuỗi trong javascript
Phương thức concat() trong JavaScript
Đảo ngược mảng trong JavaScript
Đếm số lần xuất hiện phần tử trong mảng JavaScript
Đếm số phần tử trong mảng JavaScript (length)
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>> học javascript - lập trình javascript cơ bản>>04. mảng trong javascript
Bài sauToán tử thao tác bit trong JavaScript
Bài tiếpPhương thức concat() trong JavaScript
- Bài viết mới nhất
- report this ad
Video liên quan