Toán tử Spread JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về toán tử lây lan JavaScript với sự trợ giúp của các ví dụ.

Toán tử spread là một bổ sung mới cho các tính năng có sẵn trong phiên bản JavaScript ES6 .

Nhà khai thác Spread

Toán tử lây lan ...được sử dụng để mở rộng hoặc trải rộng một mảng có thể lặp lại hoặc một mảng. Ví dụ,

const arrValue = ['My', 'name', 'is', 'Jack'];

console.log(arrValue);   // ["My", "name", "is", "Jack"]
console.log(...arrValue); // My name is Jack

Trong trường hợp này, mã:

console.log(...arrValue)

tương đương với:

console.log('My', 'name', 'is', 'Jack');

Sao chép mảng bằng toán tử Spread

Bạn cũng có thể sử dụng cú pháp lây lan ... để sao chép các mục vào một mảng duy nhất. Ví dụ,

const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];

console.log(arr2); 
//  Output:
//  ["one", "two", "three", "four", "five"]

Mảng sao chép sử dụng toán tử Spread

Trong JavaScript, các đối tượng được gán bằng tham chiếu chứ không phải theo giá trị. Ví dụ,

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// append an item to the array
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

Ở đây, cả hai biến arr1 và arr2 đều tham chiếu đến cùng một mảng. Do đó, sự thay đổi trong một biến dẫn đến sự thay đổi trong cả hai biến.

Tuy nhiên, nếu bạn muốn sao chép các mảng để chúng không tham chiếu đến cùng một mảng, bạn có thể sử dụng toán tử lây lan. Bằng cách này, sự thay đổi trong một mảng không được phản ánh trong mảng kia. Ví dụ,

let arr1 = [ 1, 2, 3];

// copy using spread syntax
let arr2 = [...arr1];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// append an item to the array
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]

Toán tử Spread với Đối tượng

Bạn cũng có thể sử dụng toán tử spread với các ký tự đối tượng. Ví dụ,

const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };

// add members obj1 and obj2  to obj3
const obj3 = {...obj1, ...obj2};

console.log(obj3); // {x: 1, y: 2, z: 3}

Ở đây, cả hai obj1và obj2thuộc tính được thêm vào obj3bằng cách sử dụng toán tử spread.

Tham số còn lại

Khi toán tử spread được sử dụng như một tham số, nó được gọi là tham số nghỉ.

Bạn cũng có thể chấp nhận nhiều đối số trong một lệnh gọi hàm bằng cách sử dụng tham số còn lại. Ví dụ,

let func = function(...args) {
    console.log(args);
}

func(3); // [3]
func(4, 5, 6); // [4, 5, 6]

Đây,

• Khi một đối số được truyền cho hàm func(), tham số còn lại chỉ nhận một tham số.
• Khi ba đối số được truyền, tham số còn lại nhận cả ba tham số.

Lưu ý : Sử dụng tham số còn lại sẽ chuyển các đối số dưới dạng phần tử mảng.

Bạn cũng có thể chuyển nhiều đối số cho một hàm bằng cách sử dụng toán tử lây lan. Ví dụ,

function sum(x, y ,z) {
    console.log(x + y + z);
}

const num1 = [1, 3, 4, 5];

sum(...num1); // 8

Nếu bạn truyền nhiều đối số bằng toán tử spread, hàm sẽ nhận các đối số bắt buộc và bỏ qua phần còn lại.

Lưu ý : Toán tử Spread đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng cú pháp lây lan.