Phá vỡ một mảng thành các biến lưu trử giá trị trong mảng

Chào các bạn

Trong bài viết này chúng ta sẽ cùng nhau phá vỡ một mảng thành các biến lưu trữ giữ liệu của mảng đó.

Array

Để phá vỡ mảng các bạn dùng như sau.

Cú pháp

1let [tenBien1, tenBien2, ...tenBienN] = [1, 2, 3, 4, 5];

Bắt đầu là từ khóa let hoặc const hoặc var tiếp theo là dấu ngoặc vuông [...], tenBien1 tenBien2 ...tenBienN là các biến dùng đễ lưu trữ giá trị của mãng mà chúng ta cần phá vỡ. Tiếp theo là dấu bằng = đối tượng mảng chúng ta cần phá vỡ.

Ví dụ:

1let arr = [1, 2, 3, 4, 5];
2
3let [item1, item2, ...itemN] = arr;
4
5console.log(item1); // 1
6console.log(item2); // 2
7console.log(itemN); // [3, 4, 5]

Như các bạn có thể thấy. Ngay bây giờ thì nó như thế này.

Các giá trị trong mảng đi vào các biến từ trái sang phải.

• ...itemN Có nghĩa là nếu mãng chúng ta có nhiều nhiều phần tử hơn nữa thì giá trị sẽ được lưu trử vào biến đó. Nó chính là một biến lưu trữ một mảng các giá trị còn lại.

  Chúng ta có thể thêm hoặc xóa hoặc làm bất cứ điều gì. Vì nó bây giờ là một mảng.

Ví dụ:

1let arr = [1, 2, 3, 4, 5];
2
3let [item1, item2, ...itemN] = arr;
4
5itemN.push(6, 7, 8); // Thêm phần tử vào mảng có tên biến là itemN
6
7console.log(item1); // 1
8console.log(item2); // 2
9console.log(itemN); // [3, 4, 5, 6, 7, 8]

Chúng ta cũng có thể bỏ qua các giá trị chúng ta không cần thiết phải gán vào tên biến bằng dấu phẩy ,

1let arr = [1, 2, 3, 4, 5];
2
3// Bỏ qua phần tử chúng ta không cần bằng dấu phẩy
4let [item1, , , item2, ...itemN] = arr;
5
6itemN.push(6, 7, 8); // Thêm phần tử vào mảng có tên biến là itemN
7
8console.log(item1); // 1
9console.log(item2); // 4
10console.log(itemN); // [5, 6, 7, 8]

Chúng ta cũng có thể gán giá trị mặc định cho tên biến của chúng ta bằng cách

1let arr = [100];
2
3let [item1 = 1, item2 = prompt("Nhập vào giá trị")] = arr;
4
5console.log(item1); // 100
6console.log(item2); // 4

Như các bạn có thể thấy. Mảng có tên arr chỉ có giá trị là 100 nên item1 sẽ được gán giá trị bằng item1 = 100. Nhưng item2 thì không có nên giá trị mặc định được sử dụng.

Ví dụ mặc định trên là cuộc gọi hàm hoặc bất kỳ giá trị nào nếu chúng ta muốn.

Áp dụng vào thực tế

Thực tế sẽ có rất rất là nhiều cách. Tùy vào bài toán của bạn. Nhưng ở đây mình chỉ muốn làm chức năng. Trong chức năng đó chúng ta trả về một mảng có 2 giá trị. Giá trị đầu tiên là mảng thứ hai là chức năng thêm vào mảng đó.

Ví dụ:

1function classUserName() {
2    let arrName = []; // Tạo mảng rỗng lưu tên
3
4    /**
5     * Chức năng thêm tên
6     * @param {string} name Tên của học sinh
7     */
8    function addName(name) {
9        if (typeof name !== "string") {
10            throw new Error(`Tên không hợp lệ`);
11        }
12        arrName.push(name);
13    }
14
15    // Trả về mảng
16    return [arrName, addName]; 
17}
18
19
20// Phá vỡ nó
21let [arrName,  addName] = classUserName();
22
23
24console.log(arrName); // []
25
26addName("Hồ Quang Trí"); // thêm tên vào mảng arrName
27addName("User 1");
28
29console.log(arrName); // ['Hồ Quang Trí', 'User 1']

Kỷ thuật này rất rất là phổ biến. Các bạn chưa hiểu thì cứ nhìn ví dụ nhé.

Tổng kết

Trong bài viết này mình đã nói qua về cách phá vỡ một mảng thành các biến lưu trử giá trị của mảng đó.

Kỷ thuật này gọi là Destructuring