Sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9 để đẩy một đối tượng vào một mảng, e. g. const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
0. Phương thức const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9 sẽ đẩy đối tượng được cung cấp đến cuối mảngChúng tôi đã sử dụng Mảng. phương thức push[] để đẩy một đối tượng vào một mảng
Đối tượng được đẩy đến cuối mảng
Nếu bạn chỉ có các giá trị mà đối tượng nên chứa, hãy tạo đối tượng trước khi đẩy nó vào mảng
Chúng ta có thể sử dụng ký hiệu ngoặc để thêm một hoặc nhiều cặp khóa-giá trị vào đối tượng
Khi các cặp khóa-giá trị được gán cho đối tượng, hãy sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9 để thêm đối tượng vào cuối mảngCách tiếp cận tương tự có thể được sử dụng để đẩy nhiều đối tượng vào một mảng
Chúng tôi đã sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9 để đẩy 3 đối tượng vào một mảng trong một câu lệnhPhương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9 lấy một hoặc nhiều giá trị và đẩy chúng vào mảngĐiều này cho phép chúng ta chuyển nhiều đối tượng được phân tách bằng dấu phẩy làm đối số trong lệnh gọi phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
5Nếu bạn muốn đẩy một đối tượng lên đầu mảng, hãy sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
6Mảng. phương thức unshift[] thêm một hoặc nhiều phần tử vào đầu mảng
Phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
7 cũng có thể được gọi với nhiều đối tượngCâu lệnh thêm 2 đối tượng được cung cấp vào đầu mảng
Mẫu mã trước đã sử dụng ký hiệu ngoặc để thêm các cặp khóa-giá trị vào một đối tượng trước khi đẩy nó vào một mảng
Tuy nhiên, bạn cũng có thể sử dụng ký hiệu dấu chấm để thêm các cặp khóa-giá trị vào một đối tượng. Bạn chỉ cần đảm bảo rằng tên của các phím không chứa dấu cách và không bắt đầu bằng các ký tự đặc biệt
Sử dụng ký hiệu dấu chấm để thêm các thuộc tính vào một đối tượng ngắn gọn và thanh lịch hơn nhiều
Tuy nhiên, đảm bảo sử dụng ký hiệu ngoặc nếu tên của khóa chứa khoảng trắng
Ngoài ra, bạn có thể sử dụng cú pháp lây lan [. ] để đẩy một đối tượng vào một mảng
Đẩy một đối tượng vào một mảng bằng cách sử dụng cú pháp lây lan #
Để đẩy một đối tượng vào một mảng
- Khai báo mảng sử dụng từ khóa
8const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
- Sử dụng cú pháp lây lan [. ] để giải nén mảng và thêm đối tượng
- Gán lại giá trị của biến mảng cho kết quả
Chúng tôi đã sử dụng cú pháp lây lan [. ] để giải nén các phần tử của mảng thành một mảng mới và thêm đối tượng vào cuối
Bạn có thể tưởng tượng rằng cú pháp
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
00 giải nén các phần tử [đối tượng] của mảng thành một mảng mới mà chúng ta có thể thêm các đối tượng bổ sung vào đóLưu ý rằng chúng tôi đã sử dụng từ khóa
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
8 khi khai báo biến const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
02Điều này rất quan trọng vì các biến được khai báo bằng cách sử dụng
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
03 không thể được gán lạiBạn cũng có thể giải nén mảng sau đối tượng nếu bạn muốn thêm đối tượng vào đầu mảng
Thứ tự giải nén các phần tử mảng được giữ nguyên
Nếu bạn cần đẩy một đối tượng vào một mảng tại một chỉ mục cụ thể, hãy sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
04Đẩy một đối tượng vào một mảng bằng cách sử dụng Array. nối[] #
Sử dụng phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
04 để đẩy một đối tượng vào một mảng, e. g. const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
06Phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
04 lấy chỉ mục để chèn đối tượng và đối tượng làm đối sốMẫu mã chèn đối tượng vào mảng tại chỉ mục
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
08Chúng tôi đã chuyển các đối số sau cho Array. phương thức mối nối []
- Chỉ mục bắt đầu - chỉ mục bắt đầu thay đổi mảng
- Số lần xóa - số phần tử sẽ bị xóa khỏi mảng từ chỉ mục bắt đầu trở đi
- Các phần tử để thêm vào mảng bắt đầu từ đầu
Chúng tôi đã sử dụng
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
08 làm chỉ mục bắt đầu để thêm đối tượng vào mảng tại chỉ mục const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
08Chúng tôi đã chỉ định giá trị của
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
91 cho đối số đếm xóa để không xóa bất kỳ phần tử nào khỏi mảngCuối cùng, chúng tôi đã chuyển đối tượng làm đối số thứ ba cho phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
04Bạn có thể sử dụng cùng một cách tiếp cận để thêm nhiều đối tượng vào mảng tại chỉ mục đã chỉ định
Chúng tôi đã chuyển nhiều đối tượng cho phương thức
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
04 và tất cả chúng đã được thêm vào mảng bắt đầu từ chỉ mục const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
08 Cú pháp spread [
const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
9] cho phép một khả năng lặp lại, chẳng hạn như một mảng hoặc chuỗi, được mở rộng ở những nơi không có hoặc nhiều đối số [đối với lệnh gọi hàm] hoặc phần tử [đối với mảng ký tự] được mong đợi. Trong một đối tượng theo nghĩa đen, cú pháp trải rộng liệt kê các thuộc tính của một đối tượng và thêm các cặp khóa-giá trị vào đối tượng đang được tạoCú pháp lây lan trông giống hệt như cú pháp nghỉ ngơi. Theo một cách nào đó, cú pháp trải rộng ngược lại với cú pháp nghỉ ngơi. Cú pháp trải rộng "mở rộng" một mảng thành các phần tử của nó, trong khi cú pháp phần còn lại thu thập nhiều phần tử và "cô đặc" chúng thành một phần tử duy nhất. Xem tham số nghỉ ngơi và thuộc tính nghỉ ngơi
Thử nó
cú pháp
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
Sự miêu tả
Cú pháp trải rộng có thể được sử dụng khi tất cả các phần tử từ một đối tượng hoặc mảng cần được đưa vào một mảng hoặc đối tượng mới hoặc nên được áp dụng từng cái một trong danh sách đối số của lệnh gọi hàm. Có ba nơi riêng biệt chấp nhận cú pháp lây lan
- Danh sách đối số chức năng [
0]const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
- Mảng chữ [
1]const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
- Đối tượng chữ [
2]const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
Mặc dù cú pháp trông giống nhau, nhưng chúng có ngữ nghĩa hơi khác nhau
Chỉ các đối tượng có thể lặp lại, như
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
3, mới có thể được trải rộng trong các tham số hàm và mảng. Nhiều đối tượng không thể lặp lại, bao gồm tất cả các đối tượng đơn giản thiếu phương thức const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
4const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
Mặt khác, trải rộng theo nghĩa đen của đối tượng liệt kê các thuộc tính riêng của đối tượng. Đối với các mảng điển hình, tất cả các chỉ số là vô số thuộc tính riêng, vì vậy các mảng có thể được trải thành các đối tượng
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
Khi sử dụng cú pháp trải rộng cho các lệnh gọi hàm, hãy lưu ý khả năng vượt quá giới hạn độ dài đối số của công cụ JavaScript. Xem
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
5 để biết thêm chi tiếtví dụ
Trải rộng trong các cuộc gọi chức năng
Thay thế áp dụng[]
Người ta thường sử dụng
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
5 trong trường hợp bạn muốn sử dụng các phần tử của mảng làm đối số cho hàmmyFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
1Với cú pháp lây lan ở trên có thể được viết là
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
2Bất kỳ đối số nào trong danh sách đối số đều có thể sử dụng cú pháp trải rộng và cú pháp trải rộng có thể được sử dụng nhiều lần
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
3Áp dụng cho nhà điều hành mới
Khi gọi một hàm tạo với
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
7, không thể sử dụng trực tiếp một mảng và const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
8, bởi vì const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
8 gọi hàm mục tiêu thay vì xây dựng nó, điều đó có nghĩa là, trong số những thứ khác, myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
10 sẽ là myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
11. Tuy nhiên, một mảng có thể dễ dàng sử dụng với const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
7 nhờ cú pháp trải rộngconst array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
0Trải rộng trong mảng chữ
Một mảng mạnh hơn theo nghĩa đen
Không có cú pháp trải rộng, để tạo một mảng mới bằng cách sử dụng một mảng hiện có như một phần của nó, cú pháp ký tự mảng không còn đủ và thay vào đó phải sử dụng mã bắt buộc bằng cách sử dụng kết hợp của
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
13, myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
14, myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
15, v.v. Với cú pháp lây lan, điều này trở nên ngắn gọn hơn nhiềuconst array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
4Giống như trải rộng cho danh sách đối số,
const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
9 có thể được sử dụng ở bất kỳ đâu trong mảng chữ và có thể được sử dụng nhiều lầnSao chép một mảng
const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
6Ghi chú. Cú pháp trải rộng hiệu quả đi sâu một cấp trong khi sao chép một mảng. Do đó, nó có thể không phù hợp để sao chép mảng nhiều chiều. Điều này cũng đúng với
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17 — không có thao tác gốc nào trong JavaScript thực hiện bản sao sâu. Phương pháp API web myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
18 cho phép sao chép sâu các giá trị của một số loại được hỗ trợconst array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
9Một cách tốt hơn để nối các mảng
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
19 thường được sử dụng để nối một mảng vào cuối một mảng hiện có. Không có cú pháp trải rộng, điều này được thực hiện nhưconst obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
0Với cú pháp trải rộng, điều này trở thành
const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
1myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
20 thường được sử dụng để chèn một mảng giá trị vào đầu một mảng hiện có. Không có cú pháp trải rộng, điều này được thực hiện nhưconst obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
2Với cú pháp trải rộng, điều này trở thành
const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
3Ghi chú. Không giống như
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
21, điều này tạo ra một myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
22 mới, thay vì sửa đổi mảng myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
22 ban đầu tại chỗTrải rộng theo nghĩa đen đối tượng
Có thể sao chép nông [không bao gồm nguyên mẫu] hoặc hợp nhất các đối tượng bằng cách sử dụng cú pháp ngắn hơn
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
4Lưu ý rằng
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17 có thể được sử dụng để thay đổi một đối tượng, trong khi cú pháp lan truyền không thểconst obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
5Ngoài ra,
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17 kích hoạt setters trên đối tượng đích, trong khi cú pháp trải rộng thì khôngconst obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
6Bạn không thể triển khai lại hàm
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17 một cách ngây thơ thông qua một lần trải rộngconst obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
7Trong ví dụ trên, cú pháp trải rộng không hoạt động như mong đợi. nó truyền một mảng đối số vào đối tượng theo nghĩa đen, do tham số còn lại. Đây là một triển khai của
myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
28 sử dụng cú pháp trải rộng, có hành vi tương tự như myFunction[a, ...iterableObj, b]
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
17, ngoại trừ việc nó không kích hoạt setters, cũng như không thay đổi bất kỳ đối tượng nào