Trong hướng dẫn này, bạn sẽ tìm hiểu các cách khác nhau mà bạn có thể sử dụng toán tử spread trong JavaScript và sự khác biệt chính giữa toán tử spread và toán tử rest.
Được ký hiệu bằng ba dấu chấm (...), toán tử spread (spread operator) trong JavaScript được giới thiệu từ ES6. Nó được sử dụng để mở rộng các phần tử trong tập hợp và mảng thành các phần tử đơn lẻ.
Toán tử lan truyền (spread operator) có thể dùng để tạo và sao chép các mảng và đối tượng, chuyển các mảng làm tham số hàm, loại bỏ các bản sao khỏi mảng và hơn thế nữa.
Cú pháp của toán tử Spread
Toán tử spread chỉ dùng được trên trên các đối tượng có thể lặp lại. Nó phải được sử dụng ngay trước đối tượng có thể lặp lại, không có bất kỳ sự phân tách nào. Ví dụ:
console.log(...arr);
Function Parameters Tham số hàm
Lấy ví dụ về phương thức Math.min(). Phương thức này chấp nhận ít nhất một số làm tham số và trả về số nhỏ nhất trong số các tham số được truyền vào.
Nếu bạn có một mảng số và bạn muốn tìm số tối thiểu của những con số này, mà không dùng toán tử spread, bạn sẽ cần chuyển từng phần tử một bằng cách sử dụng index của chúng hoặc sử dụng phương thức apply() để chuyển các phần tử của mảng như các tham số. Ví dụ:
const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13
Hãy lưu ý rằng tham số đầu tiên là null, vì tham số đầu tiên được sử dụng để thay đổi giá trị của this của hàm gọi.
Toán tử spread là một giải pháp dễ đọc và thuận tiện hơn để chuyển các phần tử của mảng làm tham số cho hàm. Ví dụ:
const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13
Bạn có thể thấy nó trong ví dụ trực tiếp này:
Tạo Mảng
Toán tử spread có thể được sử dụng để tạo mảng mới từ các mảng hiện có hoặc các đối tượng có thể lặp khác bao gồm phương thức Symbol.iterator(). Đây là những đối tượng có thể được lặp lại bằng cách sử dụng vòng lặp for...of.
Ví dụ, nó cũng được sử dụng để sao chép các mảng. Nếu bạn chỉ cần gán cho một mảng mới giá trị của một mảng hiện có, thì việc thực hiện các thay đổi đối với mảng mới sẽ cập nhật giá trị hiện có:
const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]
Bằng cách sử dụng toán tử spread, mảng hiện có có thể được sao chép thành một mảng mới và bất kỳ thay đổi nào được thực hiện đối với mảng mới sẽ không ảnh hưởng đến mảng hiện có:
const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]
Cần lưu ý rằng thao tác này sẽ chỉ sao chép các mảng một chiều. Nó sẽ không hoạt động đối với các mảng đa chiều.
Toán tử spread cũng được sử dụng để nối nhiều mảng thành một. Ví dụ:
const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]
Bạn cũng có thể sử dụng toán tử lan truyền trên một chuỗi để tạo một mảng trong đó mỗi mục là một ký tự trong chuỗi:
const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']
Tạo Đối Tượng
Toán tử spread còn được sử dụng theo nhiều cách khác nhau để tạo các đối tượng.
Nó có thể được sử dụng để sao-chép-nông một đối tượng khác. Ví dụ:
const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}
Nó cũng được sử dụng để hợp nhất nhiều đối tượng thành một. Ví dụ:
const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}
Cần lưu ý rằng, nếu các đối tượng có chung tên thuộc tính thì giá trị của đối tượng được spread cuối cùng sẽ được sử dụng. Ví dụ:
const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}
Toán tử spread có thể được sử dụng để tạo một đối tượng từ một mảng, trong đó các chỉ số trong mảng trở thành thuộc tính và giá trị tại chỉ mục đó trở thành giá trị của thuộc tính. Ví dụ:
const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}
Nó cũng có thể được sử dụng để tạo một đối tượng từ một chuỗi, trong đó, tương tự, các chỉ số trong chuỗi trở thành thuộc tính và ký tự tại chỉ mục đó trở thành giá trị của thuộc tính. Ví dụ:
const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}
Chuyển đổi NodeList thành Array (Mảng)
A NodeList is a collection of nodes, which are elements in the document. The elements are accessed through methods in the collections, such as item or entries, unlike arrays. NodeList là một tập hợp các nút, là các phần tử trong tài liệu. Các phần tử được truy cập thông qua các phương thức trong bộ sưu tập, chẳng hạn như item hoặc entries, không giống như mảng.
Bạn có thể sử dụng toán tử spread để chuyển đổi NodeList thành Array. Ví dụ:
const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>
Xóa bản sao khỏi mảng
Đối tượng Set là một tập hợp chỉ lưu trữ các giá trị độc nhất. Tương tự như NodeList, Tập hợp có thể chuyển đổi thành một mảng bằng cách sử dụng toán tử spread.
For example: Vì một Set chỉ lưu trữ các giá trị độc nhất, nó có thể được ghép chung với toán tử spread để loại bỏ các bản sao khỏi một mảng. Ví dụ:
const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]
Toán tử Spread Operator vs toán tử Rest Operator
Toán tử rest cũng là một toán tử ba chấm (...), nhưng nó được sử dụng cho một mục đích khác. Toán tử rest cũng được dùng trong danh sách tham số của hàm để nói rằng hàm này chấp nhận một số lượng tham số không xác định. Các tham số này cũng được xử lý như một mảng.
Ví dụ:
function calculateSum(...funcArgs) {
let sum = 0;
for (const arg of funcArgs) {
sum += arg;
}
return sum;
}
Trong ví dụ này, toán tử rest được sử dụng như một tham số của hàm calculateSum. Sau đó, bạn lặp lại các mục trong mảng và cộng chúng lại để tính tổng của chúng.
Sau đó, bạn có thể chuyển từng biến một cho hàm calculateSum dưới dạng đối số hoặc sử dụng toán tử spread để chuyển các phần tử của một mảng dưới dạng đối số:
console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6
Lời kết
Toán tử spread cho phép bạn làm được nhiều thứ hơn với ít dòng mã hơn, trong khi vẫn duy trì khả năng đọc mã. Nó có thể sử dụng được trên các đối tượng có thể lặp để truyền các tham số cho một hàm, hoặc để tạo mảng và đối tượng từ các đối tượng có thể lặp khác.
Theo sitepoint
Nhận xét
Đăng nhận xét