Hiểu về toán tử ba chấm (Spread operator) trong Javascript

Trong bài viết hôm nay, chúng ta sẽ nói về các tính năng tuyệt vời của JavaScript, cụ thể là toán tử...

Trong bài viết hôm nay, chúng ta sẽ nói về các tính năng tuyệt vời của JavaScript, cụ thể là toán tử Spread ( ...) hoặc cú pháp Spread.

Ở cuối bài viết này, là danh sách các bài viết liên quan, nếu có hứng thú các bạn có thể tìm đọc thêm.

Bây giờ chúng ta hãy tập trung vào Toán tử Spread ( ...), nó là gì và cách sử dụng nó để viết mã JavaScript tốt hơn.

Cú pháp Spread là một tính năng JavaScript cho phép unpacked(giải nén và lấy các giá trị bên trong một mảng) hoặc mở rộng các đối tượng, có thể được sử dụng để tạo các shallow copies của cấu trúc dữ liệu để thao tác dữ liệu dễ dàng. Nó thường được sử dụng kết hợp với destructuring.

Toán tử Spread dùng để làm gì?

Toán tử này có thể được sử dụng để thực hiện nhiều tác vụ thông thường một cách dễ dàng. Toán tử spread có thể được sử dụng để làm như sau:

Sao chép một mảng
Concat hoặc kết hợp các mảng
Sử dụng các hàm Toán học
Sử dụng một mảng làm đối số
Thêm một item vào danh sách
Kết hợp các đối tượng

Hãy xem một ví dụ về từng trường hợp sử dụng này.

Sao chép một mảng

Sử dụng toán tử Trải rộng là một cách thuận tiện để sao chép một mảng hoặc kết hợp các mảng và thậm chí nó có thể thêm item mới.

const animals = ['🦁','🐘','🐈','🐕‍🦺','🐇']
const moreAnimals = [...animals];
console.log(moreAnimals) // Array(5) ['🦁','🐘','🐈','🐕‍🦺','🐇']

Kết hợp hoặc nối các mảng

Toán tử trải rộng có thể được sử dụng để nhanh chóng kết hợp hai mảng.

const myArray = [1,2,3];
const yourArray = [4,5];
const ourArray = [...myArray,...yourArray];

console.log(ourArray); // Array(5) [ 1, 2, 3, 4, 5 ]

Sử dụng hàm `Math`

Cách tốt nhất để hiểu về toán tử Spread là xem các hàm dựng sẵn Math.min( ) và Math.max() , cả hai đều mong đợi một danh sách các đối số, không phải một mảng.

Giả sử bạn có một mảng số và muốn lấy số nhỏ nhất hoặc lớn nhất trong mảng đó, bạn sẽ phải sử dụng Math.min( ) hoặc Math.max() nhưng việc truyền một mảng cho bất kỳ hàm nào trong số này sẽ trả về giá trị NaN. Thay vào đó, bạn nên sử dụng ...toán tử ( ) để mở rộng mảng dưới dạng danh sách các đối số trong Mathhàm như minh họa trong ví dụ bên dưới:

const numbers = [28, -6, 19, 0]
console.log(Math.min(numbers)) // NaN
console.log(Math.min(...numbers)) // -6
console.log(Math.max(...numbers)) // 28

Sử dụng một mảng làm đối số

Bạn có thể sử dụng toán tử Spread để biến một mảng thành một danh sách các đối số. Xem ví dụ dưới đây:

function sandwich(a, b, c) {
  console.log(a); // '🍞'
  console.log(b); // '🥬'
  console.log(c); // '🥓'
}

const food = ['🍞', '🥬', '🥓'];

// Old way
sandwich.apply(null, food);

// ✅ ES6 way
sandwich(...food);

Thêm một item vào danh sách

Toán tử Spread có thể thêm một phần tử vào một mảng khác với cú pháp tự nhiên, dễ hiểu:

const numbers = [1, 2, 3, 4]
const moreNumbers = [...numbers, 5, 6, 7, 8]

console.log(moreNumbers) // Array(8) [1, 2, 3, 4, 5, 6, 7, 8]

Kết hợp các đối tượng

Xem cách toán tử Spread kết hợp hai đối tượng này:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Lưu ý rằng các thuộc tính không khớp đã được kết hợp, nhưng thuộc tính khớp, color, đã bị ghi đè bởi đối tượng cuối cùng đã được chuyển, updateMyVehicle. Nên kết quả sẽ là màu vàng.

Phần kết luận

Sự ra đời của ES6 không chỉ làm cho JavaScript hiệu quả hơn mà còn thú vị hơn với việc giới thiệu các tính năng thú vị như toán tử Spread và các tính năng khác.

Link bài viết: https://dev.to/brandonbawe/understanding-the-spread-operator-in-javascript-4pg6

Ngontumathuat