Trong JavaScript, ba dấu chấm (...) thường được gọi là “three dots” hoặc “spread/rest operator” tùy vào cách chúng được sử dụng. Three dots có thể được sử dụng trong nhiều ngữ cảnh khác nhau và mang lại nhiều lợi ích trong việc viết code hiệu quả. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng three dots trong JavaScript và các trường hợp sử dụng phổ biến.
1. Spread Operator
Spread operator cho phép bạn mở rộng một mảng hoặc một đối tượng thành các phần tử hoặc thuộc tính đơn lẻ.
Sử dụng với mảng:
|
1 2 3 4 5 |
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, ...arr2]; console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6] |
Sử dụng với đối tượng:
|
1 2 3 4 5 |
const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const mergedObject = { ...obj1, ...obj2 }; console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 } |
2. Rest Parameter
Rest parameter cho phép bạn gom các tham số của hàm thành một mảng.
|
1 2 3 4 5 |
function sum(...args) { return args.reduce((total, current) => total + current, 0); } console.log(sum(1, 2, 3)); // Output: 6 |
3. Destructuring
Three dots cũng được sử dụng trong việc destructuring mảng và đối tượng.
Destructuring mảng:
|
1 2 3 4 5 6 |
const numbers = [1, 2, 3, 4, 5]; const [first, second, ...rest] = numbers; console.log(first); // Output: 1 console.log(second); // Output: 2 console.log(rest); // Output: [3, 4, 5] |
Destructuring đối tượng:
|
1 2 3 4 5 6 7 8 9 10 |
const person = { name: 'John', age: 30, country: 'USA' }; const { name, ...rest } = person; console.log(name); // Output: John console.log(rest); // Output: { age: 30, country: 'USA' } |
4. Clone Mảng và Đối Tượng
Spread operator cũng được sử dụng để sao chép mảng và đối tượng một cách nhanh chóng và thuận tiện.
Clone mảng:
|
1 2 3 4 |
const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray); // Output: [1, 2, 3] |
Clone đối tượng:
|
1 2 3 4 |
const originalObject = { a: 1, b: 2 }; const clonedObject = { ...originalObject }; console.log(clonedObject); // Output: { a: 1, b: 2 } |
Show Comments
