JavaScript - Operator Phủ Broader: Bí quyết đơn giản hóa mã của bạn

Xin chào các bạn tương lai của các pháp sư JavaScript! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng linh hoạt và mạnh mẽ nhất của JavaScript hiện đại: Operator Phủ Broader. Đừng lo lắng nếu bạn chưa từng nghe về nó trước đây - đến cuối bài học này, bạn sẽ thành thạo như một chuyên gia! ?

Operator Phủ Broader là gì?

Hãy bắt đầu từ những điều cơ bản. Operator Phủ Broader được biểu thị bằng ba chấm nhỏ (...). Đúng vậy, chỉ cần ba chấm có thể làm được rất nhiều điều! Nó giống như một枝 cửuцю có thể unpack các phần tử từ mảng, đối tượng, hoặc các tham số hàm.

Hãy tưởng tượng bạn có một hộp sô-cô-la (yum!). Operator Phủ Broader giống như mở hộp đó và trải ra tất cả các viên sô-cô-la riêng lẻ. Mỗi viên sô-cô-la.now riêng lẻ, nhưng chúng đều đến từ cùng một hộp.

Dưới đây là một ví dụ đơn giản:

const chocolateBox = ['dark', 'milk', 'white'];
console.log(...chocolateBox);

Kết quả:

dark milk white

Trong ví dụ này, ...chocolateBox phân tán tất cả các phần tử của mảng. Như thể chúng ta đã viết:

console.log('dark', 'milk', 'white');

Thật tuyệt vời phải không? Nhưng đây mới chỉ là bắt đầu. Hãy cùng khám phá thêm các ứng dụng mạnh mẽ của Operator Phủ Broader!

Operator Phủ Broader để gộp mảng

Một trong những ứng dụng phổ biến nhất của Operator Phủ Broader là kết hợp các mảng. Nó giống như trộn hai hộp sô-cô-la khác nhau để tạo ra sự kết hợp mơ ước của bạn!

const fruitBasket1 = ['apple', 'banana'];
const fruitBasket2 = ['orange', 'pear'];
const combinedBasket = [...fruitBasket1, ...fruitBasket2];

console.log(combinedBasket);

Kết quả:

['apple', 'banana', 'orange', 'pear']

Ở đây, chúng ta đã tạo ra một mảng mới combinedBasket chứa tất cả các phần tử từ cả fruitBasket1 và fruitBasket2. Operator Phủ Broader unpack mỗi mảng, và chúng ta có được một mảng duy nhất chứa tất cả các quả.

Nhưng đợi đã, còn nhiều hơn nữa! Chúng ta cũng có thể thêm các phần tử mới trong khi kết hợp:

const superBasket = ['grape', ...fruitBasket1, 'kiwi', ...fruitBasket2, 'mango'];
console.log(superBasket);

Kết quả:

['grape', 'apple', 'banana', 'kiwi', 'orange', 'pear', 'mango']

Trong ví dụ này, chúng ta đã thêm 'grape' ở đầu, 'kiwi' ở giữa, và 'mango' ở cuối. Operator Phủ Broader cho phép chúng ta chèn các mảng chính xác ở vị trí chúng ta muốn.

Operator Phủ Broader để sao chép mảng

Một ứng dụng超级有用的 của Operator Phủ Broader là tạo một bản sao của một mảng. Nó giống như photocoppy bài tập về nhà (nhưng đừng làm điều đó ở trường, các em nhỏ ơi! ?).

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = [...originalArray];

console.log(clonedArray);

Kết quả:

[1, 2, 3, 4, 5]

Điều này tạo ra một mảng mới clonedArray với các phần tử tương tự như originalArray. Phần tốt nhất? Thay đổi ở clonedArray sẽ không ảnh hưởng đến originalArray, và ngược lại. Chúng là các bản sao độc lập!

Hãy kiểm tra điều này:

clonedArray.push(6);
console.log('Original:', originalArray);
console.log('Cloned:', clonedArray);

Kết quả:

Original: [1, 2, 3, 4, 5]
Cloned: [1, 2, 3, 4, 5, 6]

Xem nào? Mảng gốc vẫn không thay đổi trong khi chúng ta đã sửa đổi bản sao.

Operator Phủ Broader để kết hợp đối tượng

Operator Phủ Broader không chỉ dành cho mảng - nó hoạt động kỳ diệu với các đối tượng nữa! Nó giống như kết hợp hai công thức khác nhau để tạo ra một siêu công thức.

const person = { name: 'Alice', age: 25 };
const job = { title: 'Developer', company: 'Tech Co.' };

const employeeProfile = { ...person, ...job };
console.log(employeeProfile);

Kết quả:

{name: 'Alice', age: 25, title: 'Developer', company: 'Tech Co.'}

Ở đây, chúng ta đã kết hợp các đối tượng person và job thành một đối tượng duy nhất employeeProfile. Tất cả các thuộc tính từ cả hai đối tượng bây giờ đều ở một nơi!

Giống như với mảng, chúng ta cũng có thể thêm hoặc ghi đè các thuộc tính:

const updatedProfile = { ...employeeProfile, age: 26, location: 'New York' };
console.log(updatedProfile);

Kết quả:

{name: 'Alice', age: 26, title: 'Developer', company: 'Tech Co.', location: 'New York'}

Trong ví dụ này, chúng ta đã cập nhật tuổi của Alice và thêm thuộc tính location.

Tham số Rest trong hàm

Cuối cùng, hãy cùng thảo luận về cách sử dụng Operator Phủ Broader trong các tham số hàm. Khi được sử dụng trong ngữ cảnh này, nó thực sự được gọi là Tham số Rest, nhưng nó sử dụng cùng cú pháp ...`.

Tham số Rest cho phép một hàm chấp nhận bất kỳ số lượng tham số nào dưới dạng một mảng. Nó giống như một túi ma thuật có thể chứa bất kỳ số lượng vật phẩm nào bạn muốn!

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4, 5));

Kết quả:

6
15

Trong ví dụ này, ...numbers thu thập tất cả các tham số được truyền vào hàm sum thành một mảng. Sau đó, chúng ta sử dụng phương thức reduce để cộng tất cả các số lại với nhau. Hàm này bây giờ có thể chấp nhận bất kỳ số lượng tham số nào!

Dưới đây là một ví dụ thực tế hơn:

function introducePeople(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introducePeople('Hello', 'Alice', 'Bob', 'Charlie');

Kết quả:

Hello, Alice!
Hello, Bob!
Hello, Charlie!

Trong hàm này, tham số đầu tiên được gán cho greeting, và tất cả các tham số tiếp theo được thu thập vào mảng names.

Tóm tắt các phương pháp của Operator Phủ Broader

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã covered:

Phương pháp	Mô tả	Ví dụ
Kết hợp mảng	Kết hợp hai hoặc nhiều mảng	[...array1, ...array2]
Sao chép mảng	Tạo một bản sao nông của một mảng	[...originalArray]
Kết hợp đối tượng	Kết hợp hai hoặc nhiều đối tượng	{...object1, ...object2}
Tham số hàm	Phân tán một mảng thành các tham số riêng lẻ	myFunction(...args)
Tham số Rest	Thu thập nhiều tham số vào một mảng	function(...args) {}

Và thế là xong! Bạn đã vừa học về một trong những tính năng mạnh mẽ và linh hoạt nhất trong JavaScript hiện đại. Operator Phủ Broader có thể nhỏ bé - chỉ có ba chấm - nhưng nó có thể làm cho mã của bạn sạch sẽ hơn, dễ đọc hơn và hiệu quả hơn.

Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử sử dụng Operator Phủ Broader trong mã của bạn, thử nghiệm với nó, và sớm bạn sẽ không thể sống thiếu nó. Chúc may mắn trong việc lập mã, và mong mã của bạn luôn được phân tán mượt mà! ??‍??‍?

Credits: Image by storyset