Toán tử trải rộng JavaScript [
let arr1 = [ 1, 2, 3];
// copy using spread syntax
let arr2 = [...arr1];
console.log[arr1]; // [1, 2, 3]
console.log[arr2]; // [1, 2, 3]
// append an item to the array
arr1.push[4];
console.log[arr1]; // [1, 2, 3, 4]
console.log[arr2]; // [1, 2, 3]Ví dụ
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];Tự mình thử »
Toán tử trải phổ thường được sử dụng kết hợp với phá hủy
Ví dụ
Gán các mục đầu tiên và thứ hai từ
let arr1 = [ 1, 2, 3];
// copy using spread syntax
let arr2 = [...arr1];
console.log[arr1]; // [1, 2, 3]
console.log[arr2]; // [1, 2, 3]
// append an item to the array
arr1.push[4];
console.log[arr1]; // [1, 2, 3, 4]
console.log[arr2]; // [1, 2, 3]const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Tự mình thử »
Chúng ta cũng có thể sử dụng toán tử trải rộng với các đối tượng
Ví dụ
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}Tự mình thử »
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,
let arr1 = [ 1, 2, 3];
// copy using spread syntax
let arr2 = [...arr1];
console.log[arr1]; // [1, 2, 3]
console.log[arr2]; // [1, 2, 3]
// append an item to the array
arr1.push[4];
console.log[arr1]; // [1, 2, 3, 4]
console.log[arr2]; // [1, 2, 3]let arr1 = [ 1, 2, 3];
// copy using spread syntax
let arr2 = [...arr1];
console.log[arr1]; // [1, 2, 3]
console.log[arr2]; // [1, 2, 3]
// append an item to the array
arr1.push[4];
console.log[arr1]; // [1, 2, 3, 4]
console.log[arr2]; // [1, 2, 3]Ở đây, cả hai biến arr1 và arr2 đều đề cập đến cùng một mảng. Do đó, sự thay đổi của một biến dẫn đến sự thay đổi của cả hai biến
Tuy nhiên, nếu bạn muốn sao chép các mảng để chúng không tham chiếu đến cùng một mảng, bạn có thể sử dụng toán tử trải rộng. Bằng cách này, sự thay đổi trong một mảng không được phản ánh trong mảng khác. Ví dụ,
let arr1 = [ 1, 2, 3];
// copy using spread syntax
let arr2 = [...arr1];
console.log[arr1]; // [1, 2, 3]
console.log[arr2]; // [1, 2, 3]
// append an item to the array
arr1.push[4];
console.log[arr1]; // [1, 2, 3, 4]
console.log[arr2]; // [1, 2, 3]Toán tử trải rộng với đối tượng
Bạn cũng có thể sử dụng toán tử trải rộng với các đối tượng bằng chữ. Ví dụ,
const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };
// add members obj1 and obj2 to obj3
const obj3 = {...obj1, ...obj2};
console.log[obj3]; // {x: 1, y: 2, z: 3}Ở đây, cả hai thuộc tính
console.log[...arrValue]console.log[...arrValue]console.log[...arrValue]Thông số nghỉ ngơi
Khi toán tử trải rộng được sử dụng làm tham số, nó được gọi là tham số còn lại
Bạn cũng có thể chấp 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ụ,
________số 8Đây,
- Khi một đối số duy nhất được chuyển đến hàm
4, tham số còn lại chỉ nhận một tham sốconsole.log[...arrValue] - Khi ba đối số được truyền, tham số còn lại nhận cả ba tham số
Ghi chú. Sử dụng tham số còn lại sẽ truyền các đối số dưới dạng các phần tử mảng
Bạn cũng có thể truyền nhiều đối số cho một hàm bằng cách sử dụng toán tử trải rộng. Ví dụ,
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Nếu bạn chuyển nhiều đối số bằng toán tử trải rộng, hàm sẽ nhận các đối số được yêu cầu và bỏ qua phần còn lại
Trong hướng dẫn này, bạn sẽ tìm hiểu các cách khác nhau mà bạn có thể sử dụng toán tử trải rộng trong JavaScript và sự khác biệt chính giữa toán tử trải rộng và phần còn lại
Được ký hiệu bằng ba dấu chấm [
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Toán tử trải rộng có thể được sử dụng để tạo và sao chép mảng và đối tượng, truyền mảng dưới dạng tham số hàm, loại bỏ các bản sao khỏi mảng, v.v.
cú pháp
Toán tử trải rộng chỉ có thể được sử dụng trên các đối tượng có thể lặp lại. Nó phải được sử dụng ngay trước đối tượng có thể lặp lại mà không có bất kỳ sự tách biệt nào. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Thông số chức năng
Lấy ví dụ môn Toán. phương thức tối thiểu []. Phương thức này chấp nhận ít nhất một số làm tham số và trả về số nhỏ nhất trong số các tham số đã truyền
Nếu bạn có một dãy số và bạn muốn tìm giá trị nhỏ nhất của các số này, thì không có toán tử trải phổ, bạn sẽ cần chuyển từng phần tử một bằng chỉ số của chúng hoặc sử dụng phương thức apply[] để chuyển các phần tử của mảng . Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Xin lưu ý rằng tham số đầu tiên là
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Toán tử trải rộng là một giải pháp thuận tiện và dễ đọc hơn để chuyển các phần tử của một mảng dưới dạng tham số cho hàm. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Bạn có thể thấy nó trong ví dụ trực tiếp này
Xem Bút
Sử dụng Toán tử trải rộng trong Hàm JS của SitePoint [@SitePoint]
trên CodePen.
Tạo mảng
Toán tử trải rộng có thể được sử dụng để tạo các mảng mới từ các mảng hiện có hoặc các đối tượng có thể lặp khác bao gồm Biểu tượng. phương thức iterator[]. Đây là những đối tượng có thể được lặp lại bằng cách sử dụng vòng lặp
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Ví dụ, nó có thể được sử dụng để sao chép các mảng. Nếu bạn chỉ gán một mảng mới giá trị của một mảng hiện có, thì việc thay đổi mảng mới sẽ cập nhật mảng hiện có
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Bằng cách sử dụng toán tử trải rộng, mảng hiện có có thể được sao chép thành một mảng mới và mọi thay đổi được thực hiện đối với mảng mới sẽ không ảnh hưởng đến mảng hiện có
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Cần lưu ý rằng điều này sẽ chỉ sao chép các mảng một chiều. Nó sẽ không hoạt động đối với các mảng đa chiều
Toán tử trải rộng cũng có thể được sử dụng để nối nhiều mảng thành một. Ví dụ
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}Bạn cũng có thể sử dụng toán tử trải rộng trên một chuỗi để tạo một mảng trong đó mỗi mục là một ký tự trong chuỗi
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}Tạo đối tượng
Toán tử trải rộng có thể được sử dụng theo nhiều cách khác nhau để tạo đối tượng
Nó có thể được sử dụng để sao chép một đối tượng khác. Ví dụ
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}Nó cũng có thể được sử dụng để hợp nhất nhiều đối tượng thành một. Ví dụ
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}Cần lưu ý rằng, nếu các đối tượng có cùng tên thuộc tính, thì giá trị của đối tượng cuối cùng sẽ được sử dụng. Ví dụ
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}Toán tử trải rộng có thể được sử dụng để tạo một đối tượng từ một mảng, trong đó các chỉ số trong mảng trở thành thuộc tính và giá trị tại chỉ mục đó trở thành giá trị của thuộc tính. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Nó cũng có thể được sử dụng để tạo một đối tượng từ một chuỗi, trong đó, tương tự, các chỉ mục trong chuỗi trở thành thuộc tính và ký tự tại chỉ mục đó trở thành giá trị của thuộc tính. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Chuyển đổi một NodeList thành một mảng
NodeList là tập hợp các nút, là các phần tử trong tài liệu. Các phần tử được truy cập thông qua các phương thức trong bộ sưu tập, chẳng hạn như
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Bạn có thể sử dụng toán tử trải rộng để chuyển đổi NodeList thành Array. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Xóa các bản sao khỏi mảng
Đối tượng Set là một bộ sưu tập chỉ lưu trữ các giá trị duy nhất. Tương tự như NodeList, một Tập hợp có thể được chuyển đổi thành một mảng bằng cách sử dụng toán tử trải rộng
Vì Set chỉ lưu trữ các giá trị duy nhất nên nó có thể được ghép nối với toán tử trải rộng để loại bỏ các giá trị trùng lặp khỏi một mảng. Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Toán tử trải rộng vs Toán tử còn lại
Toán tử còn lại cũng là toán tử ba chấm [
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Ví dụ
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Trong ví dụ này, toán tử còn lại được sử dụng làm tham số của hàm
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Sau đó, bạn có thể chuyển từng biến một cho hàm
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;Phần kết luận
Toán tử trải rộng cho phép bạn làm được nhiều việc hơn với ít dòng mã hơn, trong khi vẫn duy trì khả năng đọc mã. Nó có thể được sử dụng trên các đối tượng có thể lặp lại để truyền tham số cho hàm hoặc để tạo mảng và đối tượng từ các đối tượng có thể lặp lại khác
đọc liên quan
- Các phương thức toán học còn thiếu trong JavaScript
- Mẹo nhanh. Cách sắp xếp một mảng các đối tượng trong JavaScript
- Cách sử dụng vòng lặp for trong JavaScript
- Mẹo nhanh. Kiểm tra xem Chuỗi có khớp với Regex trong JavaScript không
- JavaScript. Người mới học Ninja
Chia sẻ bài viết này
Dianne Pena
Dianne là biên tập viên bản tin của SitePoint. Cô ấy đặc biệt thích tìm hiểu về JavaScript, CSS và các công nghệ front-end