Tiếp theo bài này, Thế giới JS sẽ cùng ae tìm hiểu về Toán tử trải rộng trong javascript, Nó cho phép một iterable mở rộng ở những nơi có hơn 0 đối số. Nó chủ yếu được sử dụng trong biến mảng trong đó có nhiều hơn 1 giá trị được mong đợi. Nó cho phép chúng ta có đặc quyền lấy danh sách các tham số từ một mảng. Cú pháp của toán tử Spread giống như tham số Rest nhưng nó hoạt động hoàn toàn ngược lại.
Cú pháp:
var variablename1 = [...value];
Trong cú pháp trên, … là toán tử trải rộng sẽ nhắm mục tiêu tất cả các giá trị trong biến cụ thể. Khi … xảy ra trong lệnh gọi hàm hoặc tương tự, nó được gọi là toán tử trải rộng. Toán tử trải rộng có thể được sử dụng trong nhiều trường hợp, chẳng hạn như khi chúng ta muốn mở rộng, sao chép, nối với đối tượng toán học . Hãy xem xét từng cái một:
Lưu ý : Để chạy code trong bài viết này, hãy sử dụng console do trình duyệt cung cấp.
1.concat()
Phương thức concat() do javascript cung cấp giúp nối hai hoặc nhiều chuỗi (String concat() ) hoặc được sử dụng để hợp nhất hai hoặc nhiều mảng. Trong trường hợp mảng, phương thức này không thay đổi các mảng hiện có mà thay vào đó trả về một mảng mới.
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// normal array concat() method
let arr = [1,2,3];
let arr2 = [4,5];
arr = arr.concat(arr2);
console.log(arr); // [ 1, 2, 3, 4, 5 ]
Đầu ra:
[1, 2, 3, 4, 5]
Chúng ta có thể đạt được đầu ra tương tự với sự trợ giúp của toán tử trải rộng, code sẽ giống như thế này:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// spread operator doing the concat job
let arr = [1,2,3];
let arr2 = [4,5];
arr = [...arr,...arr2];
console.log(arr); // [ 1, 2, 3, 4, 5 ]
Đầu ra:
[1,2,3,4,5]
Lưu ý : Mặc dù chúng ta có thể đạt được kết quả tương tự, nhưng không nên sử dụng trải rộng trong trường hợp cụ thể này, vì đối với một tập dữ liệu lớn, nó sẽ hoạt động chậm hơn khi so sánh với phương thức concat() gốc.
2.Copy(như phương pháp nối)
Để sao chép nội dung của mảng sang mảng khác, chúng ta có thể làm như sau:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// copying without the spread operator
let arr = ['a','b','c'];
let arr2 = arr;
console.log(arr2); // [ 'a', 'b', 'c' ]
Đầu ra:
[a,b,c]
Đoạn code trên hoạt động tốt vì chúng ta có thể sao chép nội dung của một mảng sang một mảng khác, nhưng về cơ bản, nó rất khác vì khi chúng ta thay đổi mảng mới, nó cũng sẽ ảnh hưởng đến mảng cũ (mảng mà chúng ta đã sao chép). Xem mã dưới đây:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// changed the original array
let arr = ['a','b','c'];
let arr2 = arr;
arr2.push('d');
console.log(arr2);
console.log(arr); // even affected the original array(arr)
Đầu ra:
['a', 'b', 'c', 'd'] ['a', 'b', 'c', 'd']
Trong đoạn code trên, chúng ta có thể thấy rõ ràng rằng khi chúng ta cố gắng chèn một phần tử vào bên trong mảng, thì mảng ban đầu cũng bị thay đổi, điều mà chúng ta không mong muốn và không được khuyến khích. Chúng ta có thể sử dụng toán tử trải rộng trong trường hợp này, như sau:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// spread operator for copying
let arr = ['a','b','c'];
let arr2 = [...arr];
console.log(arr); // [ 'a', 'b', 'c' ]
arr2.push('d'); //inserting an element at the end of arr2
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]
console.log(arr); // [ 'a', 'b', 'c' ]
Đầu ra:
(3) ['a', 'b', 'c'] (4) ['a', 'b', 'c', 'd'] (3) ['a', 'b', 'c']
Bằng cách sử dụng toán tử trải rộng, chúng tôi đảm bảo rằng mảng ban đầu không bị ảnh hưởng bất cứ khi nào chúng tôi thay đổi mảng mới.
3.Mở rộng
Bất cứ khi nào chúng ta muốn mở rộng một mảng thành một mảng khác, chúng ta sẽ làm như sau:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// normally used expand method
let arr = ['a','b'];
let arr2 = [arr,'c','d'];
console.log(arr2); // [ [ 'a', 'b' ], 'c', 'd' ]
Đầu ra:
(3) [Array(2), 'c', 'd'] 0: (2) ['a', 'b'] 1: "c" 2: "d" length: 3 [[Prototype]]: Array(0)
Mặc dù chúng tôi lấy nội dung trên một mảng bên trong một mảng khác, nhưng thực tế nó lại là mảng bên trong một mảng khác, đây chắc chắn là điều chúng tôi không muốn. Nếu chúng ta muốn nội dung nằm trong một mảng, chúng ta có thể sử dụng toán tử trải rộng.
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
// expand using spread operator
let arr = ['a','b'];
let arr2 = [...arr,'c','d'];
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]
Đầu ra:
(4) ['a', 'b', 'c', 'd']
4.Đối tượng Toán
Đối tượng Math trong javascript có các thuộc tính khác nhau mà chúng ta có thể sử dụng để làm những gì chúng ta muốn như tìm giá trị nhỏ nhất từ danh sách các số, tìm giá trị lớn nhất, v.v. Hãy xem xét trường hợp chúng ta muốn tìm giá trị nhỏ nhất từ danh sách các số, chúng ta sẽ viết một cái gì đó như thế này:
// https://vpsus.vn/ // https://www.facebook.com/groups/893052378563701 // https://twitter.com/thegioijs console.log(Math.min(1,2,3,-1)); //-1
Đầu ra:
-1
Bây giờ hãy xem xét rằng chúng ta có một mảng thay vì một danh sách, phương thức đối tượng Math ở trên này sẽ không hoạt động và sẽ trả về NaN, như:
// https://vpsus.vn/ // https://www.facebook.com/groups/893052378563701 // https://twitter.com/thegioijs // min in an array using Math.min() let arr = [1,2,3,-1]; console.log(Math.min(arr)); //NaN
Đầu ra:
NaN
Khi …arr được sử dụng trong lệnh gọi hàm, nó sẽ “mở rộng” một đối tượng có thể lặp lại arr vào danh sách các đối số
Để tránh đầu ra NaN này, chúng tôi sử dụng toán tử trải rộng, như:
// https://vpsus.vn/ // https://www.facebook.com/groups/893052378563701 // https://twitter.com/thegioijs // with spread let arr = [1,2,3,-1]; console.log(Math.min(...arr)); //-1
Đầu ra:
-1
5.Ví dụ về toán tử trải rộng với các đối tượng
ES6 đã thêm thuộc tính trải rộng(Spread) cho đối tượng bằng chữ trong javascript. Toán tử trải rộng ( … ) với các đối tượng được sử dụng để tạo các bản sao của các đối tượng hiện có với các giá trị mới hoặc được cập nhật hoặc để tạo một bản sao của một đối tượng có nhiều thuộc tính hơn. Hãy lấy một ví dụ về cách sử dụng toán tử trải rộng trên một đối tượng,
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const user1 = {
name: 'vpsus.vn',
age: 22
};
const clonedUser = { ...user1 };
console.log(clonedUser);
Đầu ra:
{name: 'vpsus.vn', age: 22}
Ở đây chúng tôi đang trải rộng đối tượng user1 . Tất cả các cặp khóa-giá trị của đối tượng user1 được sao chép vào đối tượng cloneUser. Hãy xem một ví dụ khác về việc hợp nhất hai đối tượng bằng cách sử dụng toán tử trải rộng,
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const user1 = {
name: 'vpsus.vn',
age: 22,
};
const user2 = {
name: "vpsus.vn",
location: "Philadelphia"
};
const mergedUsers = {...user1, ...user2};
console.log(mergedUsers)
Đầu ra:
{name: 'vpsus.vn', age: 22, location: 'Philadelphia'}
mergeUsers là bản sao của user1 và user2 . Trên thực tế, mọi thuộc tính có thể đếm được trên các đối tượng sẽ được sao chép vào đối tượng người dùng đã hợp nhất. Toán tử trải rộng(Spread) chỉ là cách viết tắt của phương thức Object.assign() , nhưng có một số khác biệt giữa hai loại này
Trên đây là tất cả những gì về Toán tử trải rộng trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới Toán tử trải rộng , hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
