Trong bài viết này, ta sẽ cùng tìm hiểu về toán tử Spread trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.

Toán tử Spread trong JavaScript

Toán tử Spread là một tính năng bổ sung mới cho các tính năng có sẵn trong phiên bản JavaScript ES6. Toán tử Spread được sử dụng để mở rộng một đối tượng hoặc một mảng có thể lặp.

Ví dụ:

const a = ['Lập trình', 'JavaScript', 'căn bản'];
console.log(a);
console.log(...a);

const a = ['Lập trình', 'JavaScript', 'căn bản'];

console.log(a);

console.log(...a);

Kết quả:

['Lập trình', 'JavaScript', 'căn bản']
Lập trình JavaScript căn bản

1 2	['Lập trình', 'JavaScript', 'căn bản'] Lập trình JavaScript căn bản

Trong đoạn mã trên, câu lệnh:

console.log(...a);

1	console.log(...a);

Tương đương với:

console.log('Lập trình', 'JavaScript', 'căn bản');

1	console.log('Lập trình', 'JavaScript', 'căn bản');

Sao chép mảng bằng toán tử Spread

Ta cũng có thể sử dụng cú pháp của toán tử Spread để sao chép các phần tử vào một mảng.

Ví dụ:

const a = [143, 543];
const b = [...a, 231, 423, 123];
console.log(b);

const a = [143, 543];

const b = [...a, 231, 423, 123];

console.log(b);

Kết quả:

[143, 543, 231, 423, 123]

1	[143, 543, 231, 423, 123]

Tạo một bản sao của mảng sử dụng toán tử Spread

Trong JavaScript, các đối tượng được gán bằng tham chiếu chứ không phải theo giá trị.

Ví dụ:

let a = [ 432, 122, 432];
let b = a;
a.push(343);
console.log(a);
console.log(b);

let a = [ 432, 122, 432];

let b = a;

a.push(343);

console.log(a);

console.log(b);

Kết quả:

[432, 122, 432, 343]
[432, 122, 432, 343]

1 2	[432, 122, 432, 343] [432, 122, 432, 343]

Ở đây, cả hai biến a và b đều tham chiếu đến cùng một mảng. Do đó, sự thay đổi trong một biến này sẽ dẫn đến sự thay đổi trong cả hai biến.

Tuy nhiên, nếu ta muốn tạo một bản sao riêng của các mảng để chúng không tham chiếu đến cùng một mảng, ta có thể sử dụng toán tử Spread. Bằng cách này, khi có sự thay đổi trong một biến, thì sẽ không có sự thay đổi trong biến còn lại.

Ví dụ:

let a = [ 234, 221, 543, 2142];
let b = [...a];
a.push(100);
console.log(a);
console.log(b);

let a = [ 234, 221, 543, 2142];

let b = [...a];

a.push(100);

console.log(a);

console.log(b);

Kết quả:

[234, 221, 543, 2142, 100]
[234, 221, 543, 2142]

1 2	[234, 221, 543, 2142, 100] [234, 221, 543, 2142]

Toán tử Spread sử dụng với đối tượng

Ta cũng có thể sử dụng toán tử Spread với các đối tượng.

Ví dụ:

const a = { ID: 243, Ten : "Nam" };
const b = { email : "Nam@aaaa" };
const c = {...a, ...b};
console.log(c);

const a = { ID: 243, Ten : "Nam" };

const b = { email : "Nam@aaaa" };

const c = {...a, ...b};

console.log(c);

Kết quả:

{ID: 243, Ten: 'Nam', email: 'Nam@aaaa'}

1	{ID: 243, Ten: 'Nam', email: 'Nam@aaaa'}

Ở đây, cả thuộc tính của các đối tượng a và b đều được thêm vào đối tượng c bằng cách sử dụng toán tử spread.

Các tham số

Khi toán tử Spread được sử dụng như một tham số, nó được gọi là Rest Parameter. Ta cũng có thể nhận nhiều đối số trong một lệnh gọi hàm bằng cách sử dụng tham số còn lại.

Ví dụ:

let vi_du = function(...args) {
    console.log(args);
}
vi_du("Lập trình");
vi_du("Lập trình", "JavaScript");

let vi_du = function(...args) {

console.log(args);

}

vi_du("Lập trình");

vi_du("Lập trình", "JavaScript");

Kết quả:

['Lập trình']
['Lập trình', 'JavaScript']

1 2	['Lập trình'] ['Lập trình', 'JavaScript']

Ở đây,

Khi một đối số duy nhất được truyền vào hàm vi_du(), tham số args chỉ nhận một tham số.
Khi 2 đối số được truyền, tham số args sẽ nhận cả 2 tham số.

Chú ý: Sử dụng Rest Parameter sẽ truyền các đối số dưới dạng các phần tử của một mảng.

Ta cũng có thể truyền nhiều đối số cho một hàm bằng toán tử Spread.

Ví dụ:

function vi_du(a, b ,c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
let a = ["Lập", "trình", "JavaScript"];
vi_du(...a);

function vi_du(a, b ,c) {

console.log(a);

console.log(b);

console.log(c);

}

let a = ["Lập", "trình", "JavaScript"];

vi_du(...a);

Kết quả:

Lập
trình
JavaScript

Lập

trình

JavaScript

Nếu ta truyền nhiều đối số bằng toán tử Spread, hàm sẽ nhận các đối số bắt buộc và bỏ qua giá trị còn lại.

Ví dụ:

function vi_du(a, b ,c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
let a = ["Lập", "trình", "JavaScript", "căn bản"];
vi_du(...a);

function vi_du(a, b ,c) {

console.log(a);

console.log(b);

console.log(c);

}

let a = ["Lập", "trình", "JavaScript", "căn bản"];

vi_du(...a);

Kết quả:

Lập
trình
JavaScript

Lập

trình

JavaScript

Trong đoạn mã trên, mặc dù ta truyền một mảng có 4 phần tử, nhưng vì hàm chỉ nhận 3 tham số bắt buộc đầu tiên, do đó, đối số cuối cùng là giá trị “căn bản” của mảng sẽ bị bỏ qua.

Chú ý: Toán tử Spread đã được giới thiệu trong ES6. Một số trình duyệt có thể không hỗ trợ việc sử dụng toán tử này.

Trên đây là khái niệm và ví dụ cơ bản về toán tử Spread trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!

P/s: Cảm ơn mọi người đã tin tưởng tek4!

0 0 vote

Article Rating