Mình chắc chắn bạn đã nghe nói về toán tử spread trong JavaScript (Ký hiệu dấu 3 chấm ...).
Nói thật, spread là một trong những toán tử mạnh nhất mà JavaScript cung cấp có thể nói là:
SPREAD ...
A MÂY ZING GÚT CHÓP
Toán tử spread có thể được sử dụng để giải quyết nhiều vấn đề bạn có thể gặp trong JavaScript. Trong bài này, bạn sẽ tìm hiểu về 10 cách sử dụng toán tử để giải quyết các vấn đề đó.
Ở dạng cơ bản, toán tử spread trông giống như ba dấu chấm.
...
Mục lục bài viết:
Cách #1: Coppy một mảng bằng toán tử Spread
Chúng ta có thể sử dụng toán tử spread để sao chép một mảng, tuy nhiên đây vẫn là một bản sao nông (shalow clone).
-
Có nghĩa là chúng ta nhân đôi để tạo ra một bản sao mới, bản gốc sẽ giữ nguyên.
Giả sử chúng ta có một mảng tên là arr1 và chúng ta muốn tạo một bản sao của mảng này được gọi là arr2.
const arr1[1, 2, 3];
const arr2[...arr1];
console.log(arr2);
// Kết quả:
// [ 1, 2, 3 ]
Vì thế, bằng cách này chúng ta có thể sao chép một mảng cơ bản.
> Lưu ý: Nó không hoạt động đối với mảng nhiều cấp hoặc mảng có ngày tháng hoặc hàm.
Cách #2: Kết hợp các mảng
Giả sử bạn có 2 mảng mà bạn muốn hợp nhất thành một, điều này xảy ra khá thường xuyên và chúng ta có thể sử dụng phương thức concat.
Tuy nhiên, toán tử spread làm cho cách này dễ dàng hơn như bạn có thể thấy bên dưới.
const arr1[1, 2, 3];
const arr2[4, 5, 6];
const arr3[...arr1, ...arr2];
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]
Bây giờ, hai mảng arr1 và arr2 được kết hợp thành mảng arr3.
Bạn có thể sắp xếp vị trí khác nhau để tạo nên các mảng khác nhau, ví dụ:
const arr1[1, 2, 3];
const arr2[4, 5, 6];
const arr3 = [...arr2, ...arr1];
console.log(arr3);
// [4, 5, 6, 1, 2, 3];
Đây là một cách tốt để kết hợp các mảng, số lượng bạn có thể thêm là vô hạn nên bạn có thể tiếp tục thêm toán tử spread nếu muốn kết hợp nhiều mảng.
Ví dụ:
const arr5 = [...arr1, ...arr2, ...arr3, ...arr4];
Cách #3: Thêm phần tử vào mảng
Giả sử bạn có một mảng, nhưng bạn cần thêm một hoặc nhiều phần tử vào đó.
Trước đây bạn có thể tận dụng array.push như thế này:
let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1);
// [1, 2, 3, 4]
Nhưng toán tử spread cũng làm được tốt và đẹp hơn.
let arr1 = [1, 2, 3];
// Thêm phần tử vào mảng bằng toán tử Spread
arr1 = [...arr1, 4];
console.log(arr1);
// [1, 2, 3, 4]
Như bạn có thể thấy, mảng hiện có của chúng ta đã được thêm phần tử vào cuối.
Bạn thậm chí có thể thêm nhiều phần tử, nhiều loại dữ liệu:
let arr1 = [1, 2, 3];
arr1.push(4, 5, "ABC");
console.log(arr1);
// [1, 2, 3, 4, 5, "ABC"]
Cách #4: Thêm thuộc tính vào đối tượng
Giả sử bạn có một đối tượng là SinhVien, nhưng nó thiếu thuộc tính tuoi.
const SinhVien = {
ten: "Ngọc Anh",
gioiTinh: "Nữ"
};
Để thêm tuổi cho đối tượng SinhVien này, chúng ta lại có thể sử dụng toán tử spread.
// Thêm thuộc tính cho đối tượng
// bằng toán tử spread
const ketQua = {...SinhVien, tuoi: 18 };
Toàn bộ thiết lập sẽ như thế này:
const SinhVien = {
ten: "Ngọc Anh",
gioiTinh: "Nữ"
};
// Thêm thuộc tính cho đối tượng
// bằng toán tử spread
const ketQua = {...SinhVien, tuoi: 18 };
// { ten: "Ngọc Anh", gioiTinh: "Nữ", tuoi: 18 }
Cách #5: Spread kết hợp với Math()
Giả sử bạn có một mảng số và bạn muốn lấy giá trị nhỏ nhất, cao nhất hoặc tổng của những số này.
Mảng đầu vào của chúng ta sẽ trông như sau:
const arr1 = [1, -1, 0, 6, 9];
Để có được số nhỏ nhất, chúng ta có thể sử dụng toán tử spread và phương thức Math.min()
const arr1 = [1, -1, 0, 6, 9];
const min = Math.min(...arr1);
console.log(min);
// -1
Điều này sẽ xuất ra -1 vì đó là số nhỏ nhất, hãy thử và xóa -1 khỏi mảng bạn sẽ thấy giá trị nhỏ nhất sẽ trở thành 0.
Để có được số lớn nhất, chúng ta có thể sử dụng phương pháp Math.max()
const arr1 = [1, -1, 0, 6, 9];
const max = Math.max(...arr1);
console.log(max);
// 9
Như bạn có thể thấy, giá trị lớn nhất là 9, nếu chúng ta bỏ 9 đi, nó sẽ trả về 6.
Còn nếu bạn không sử dụng toán tử Spread, chúng ta nhận được kết quả như sau:
const arr1 = [1, -1, 0, 6, 9];
const max = Math.max(arr1);
console.log(max);
// NaN
Cách #6: Truyền mảng như đối số với toán tử spread
Giả sử, chúng ta có một hàm nhận 3 đối số như sau:
const cong3So = (x1, x2, x3) => {
// Tổng 3 số
console.log(x1 + x2 + x3);
}
Chúng ta có thể gọi hàm này theo cách sau:
// Truyền đối
cong3So(1, 2, 3);
Tuy nhiên, khi lập trình web, ứng dụng thực tế, chúng ta không thể thể nào mà thêm từng đối số "cứng" như thế này.
Thông thường, chúng ta sẽ có dữ liệu nằm trong một mảng:
const arr1 = [1, 2, 3];
Do đó, cách đơn giản là truyền mảng như đối số bằng cách sử dụng toán tử Spread.
const arr1 = [1, 2, 3];
cong3So(...arr1);
// 6
Như bạn có thể thấy, chương trình chạy ngon lành.
Khi đó, nếu có giá trị mới, chúng ta chỉ cần update nó vào mảng là được.
Toàn bộ chương trình trên sẽ như thế này:
const cong3So = (x1, x2, x3) => {
// Tổng 3 số
console.log(x1 + x2 + x3);
}
const arr1 = [1, 2, 3];
// Truyền mảng như đối số
cong3So(...arr1);
// 6
> Chú ý: Nếu muốn học lập trình web nhanh theo tiêu chuẩn Doanh nghiệp, bạn có thể tham gia ngay KHÓA HỌC JAVA WEB hoặc KHÓA HỌC PHP WEB tại NIIT - ICT Hà Nội.
Cách #7: Truyền tham số không giới hạn cho một hàm
Giả sử bạn có một hàm nhận đối số không giới hạn, giờ thì làm thế nào?
const myFunc = (...args) => {
console.log(args);
};
Nếu bây giờ ta gọi hàm, truyền vào nó nhiều đối số:
myFunc(1, 'a', new Date());
Kết quả sẽ được như sau:
[
1,
'a',
Date {
__proto__: Date {}
}
]
Cách #8: Chuyển một nodeList thành một mảng
Giả sử bạn đã sử dụng toán tử spread để lấy tất cả các thẻ div trên trang của mình. Đây sẽ là một nodeList.
Sau đó, chúng ta có thể tận dụng toán tử spread để chuyển đổi nodeList này thành một mảng.
const el = [...document.querySelectorAll('div')];
console.log(el);
// (3) [div, div, div]
Ở đây bạn có thể thấy chúng ta lấy được ba thẻ div từ DOM.
Bây giờ chúng ta có thể dễ dàng lặp qua các phần tử này vì chúng ở định dạng mảng.
const el = [...document.querySelectorAll('div')];
el.forEach(item => {
console.log(item);
});
// <div></div>
// <div></div>
// <div></div>
Cách #9: Phép gán hủy cấu trúc đối tượng
Nếu bạn đã quen thuộc với phép gán hủy cấu trúc đối tượng (Destructuring), bạn có thể thấy toán tử spread làm việc này rất tốt.
Giả sử chúng ta lại có một đối tượng cho SinhVien:
const SinhVien = {
ten: "Ngọc Anh",
gioiTinh: "Nữ",
tuoi: 18
};
Bây giờ chúng ta có thể hủy cấu trúc đối tượng này thành các biến đơn bằng cách sử dụng toán tử spread.
const { ten, ...thongTin } = SinhVien;
console.log(ten);
console.log(thongTin);
// Ngọc Anh
// { gioiTinh: "Nữ", tuoi: 18 }
Như bạn có thể thấy, chúng ta đã phân tích cú pháp đối tượng SinhVien và hủy tên đầu tiên thành biến ten và phần còn lại của đối tượng vào biến thongTin.
Cách #10: Tách chuỗi thành ký tự
Cách sử dụng toán tử spread cuối cùng mà mình muốn giới thiệu cho bạn đó chính là cách tách một chuỗi thành từng ký tự.
Giả sử chúng ta có chuỗi sau:
const chuoi = "Xin Chào";
Sử dụng toán tử spread trên chuỗi này, để nhận về một mảng các ký tự:
const chuoi = "Xin Chào";
const arr = [...chuoi];
console.log(arr);
// ["X", "i", "n", " ", "C", "h", "à", "o"]
Tổng kết
Như vậy, qua bài hướng dẫn này, mình đã giúp các bạn biết 10 cách sử dụng toán tử Spread trong JavaScript. Hi vọng rằng nó giúp bạn hiểu rõ hơn toán tử cực kỳ hữu ích này để quá trình HỌC LẬP TRÌNH WEB của bạn dễ thở hơn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python