Toán tử spread là một sự bổ sung mới trong các tính năng có sẵn trong phiên bản JavaScript ES6.
Toán tử Spread
Toán tử spread ...
được sử dụng để mở rộng hoặc phân tán một đối tượng có thể lặp 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, đoạn 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 spread ...
để sao chép các phần tử 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"]
Sao chép Mảng bằng Toán tử Spread
Trong JavaScript, các đối tượng được gán bằng tham chiếu và không phải bằng 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ả 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 sao cho chúng không tham chiếu đến cùng một mảng, bạn có thể sử dụng toán tử spread. Như vậy, sự thay đổi trong một mảng không được phản ánh trong mảng khác. 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 đối tượng chữ. 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ả các thuộc tính obj1
và obj2
được thêm vào obj3
bằng toán tử spread.
Tham số Rest
Cảm ơn bạn!
Khi toán tử trải (spread operator) được sử dụng như một tham số, nó được gọi là tham số rest.
Bạn cũng có thể chấp nhận nhiều đối số trong cuộc gọi hàm bằng cách sử dụng tham số rest. 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ố duy nhất được truyền vào hàm
func()
, tham số rest chỉ lấy một đối số. - Khi ba đối số được truyền, tham số rest lấy tất cả ba đối số.
Lưu ý : Sử dụng tham số rest sẽ truyền các đối số như các phần tử của mảng.
Bạn cũng có thể truyền nhiều đối số vào một hàm bằng cách sử dụng toán tử trải. 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ử trải, hàm sẽ lấy các đối số cần thiết và bỏ qua những đối số còn lại.
- Bài đăng trên blog này ban đầu được xuất bản tại:https://www.programiz.com/