Cú pháp chênh lệch (const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
9) cho phép có thể 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ố (cho các cuộc gọi chức năng) hoặc các phần tử (đối với các chữ cái) được mong đợi. Trong một đối tượng theo nghĩa đen, cú pháp lan truyền liệt kê các thuộc tính của một đối tượng và thêm các cặp giá trị khóa vào đối tượng được tạo.spread (const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
9) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created. Cú pháp lan truyền giống hệt như cú pháp REST. Theo một cách nào đó, cú pháp lan truyền là trái ngược với cú pháp REST. Truyền Syntax "mở rộng" một mảng thành các phần tử của nó, trong khi Cú pháp REST thu thập nhiều phần tử và "ngưng tụ" chúng thành một phần tử duy nhất. Xem tham số REST và thuộc tính REST. myFunction(a, ...iterableObj, b)
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }
Có thể sử dụng cú pháp lan truyền 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 người một trong danh sách đối số của Call. Có ba địa điểm riêng biệt chấp nhận cú pháp lây lan: Mặc dù cú pháp trông giống nhau, nhưng chúng đi kèm với ngữ nghĩa hơi khác nhau. Chỉ có thể lặp lại các đối tượng, như const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
3, mới có thể được lan truyền trong các tham số mảng và chức năng. Nhiều đối tượng không thể hiểu được, 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 }
4: const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
Mặt khác, việc truyền bá theo nghĩa đen đố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à các thuộc tính riêng, vì vậy các mảng có thể được lan truyền 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 lan truyền cho các cuộc gọi chức năng, hãy lưu ý về khả năng vượt quá giới hạn độ dài đối số của độ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ết. 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ột mảng làm đối số cho một hàm.Thử nó
Cú pháp
Sự mô tả
Ví dụ
Lan truyền trong các cuộc gọi chức năng
Thay thế áp dụng ()
function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args);
Với cú pháp lây lan, có thể được viết là:
function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args);
Bất kỳ đối số nào trong danh sách đối số có thể sử dụng cú pháp lan truyền và cú pháp lan truyền có thể được sử dụng nhiều lần.
function myFunction(v, w, x, y, z) {} const args = [0, 1]; myFunction(-1, ...args, 2, ...[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ể trực tiếp sử dụng 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 chức năng đích thay vì xây dựng nó, có nghĩa là, trong số những thứ khác, rằng function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 0 sẽ là function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 1. Tuy nhiên, một mảng có thể dễ dàng được sử dụng với const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 } 7 nhờ cú pháp lan truyền:directly use an array and const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 } 8, because const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 } 8 calls the target function instead of constructing it, which means, among other things, that function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 0 will be function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 1. However, an array can be easily used with const array = [1, 2, 3]; const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 } 7 thanks to spread syntax:
const dateFields = [1970, 0, 1]; // 1 Jan 1970 const d = new Date(...dateFields);
Lan truyền theo nghĩa đen
Một mảng mạnh mẽ hơn theo nghĩa đen
Không có cú pháp lan truyền, để tạo một mảng mới bằng một mảng hiện có làm một phần của nó, cú pháp theo nghĩa đen không còn đủ và phải sử dụng mã bắt buộc thay vào đó bằng cách sử dụng kết hợp function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 3, function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 4, function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 5, v.v. trở nên cô đọng hơn nhiều:
const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
Giống như sự lây lan 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 cứ đâu trong nghĩa đen của mảng và có thể được sử dụng nhiều lần.
Sao chép một mảng
const arr = [1, 2, 3]; const arr2 = [...arr]; // like arr.slice() arr2.push(4); // arr2 becomes [1, 2, 3, 4] // arr remains unaffected
LƯU Ý: Cú pháp lan truyền 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 các mảng đa chiều. Điều tương tự cũng đúng với function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7 - không có hoạt động gốc trong JavaScript thực hiện một bản sao sâu. Phương thức API Web function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 8 cho phép các giá trị sao chép sâu của các loại được hỗ trợ nhất định. Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays. The same is true with function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7 — no native operation in JavaScript does a deep clone. The web API method function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 8 allows deep copying values of certain supported types.
const a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // Oh no! Now array 'a' is affected as well: console.log(a); // [[], [2], [3]]
Một cách tốt hơn để kết hợp các mảng
function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 9 thường được sử dụng để kết hợp một mảng vào cuối một mảng hiện có. Không có cú pháp lan truyền, điều này được thực hiện như:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 0
Với cú pháp lây lan Điều này trở thành:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 1
function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 0 thường được sử dụng để chèn một mảng các giá trị khi bắt đầu một mảng hiện có. Không có cú pháp lan truyền, điều này được thực hiện như:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 2
Với cú pháp lây lan, điều này trở thành:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 3
Lưu ý: Không giống như function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 1, điều này tạo ra một function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 2 mới, thay vì sửa đổi mảng function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 2 ban đầu tại chỗ. Unlike function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 1, this creates a new function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 2, instead of modifying the original function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 2 array in-place.
Lan truyền trong các chữ cái
Có thể nhân bản (không bao gồm nguyên mẫu) hoặc hợp nhất các đối tượng là có thể sử dụng cú pháp ngắn hơn function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7.
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 4
Lưu ý rằng function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7 có thể được sử dụng để biến đổi một đối tượng, trong khi cú pháp lây lan không thể.
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 5
Ngoài ra, function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7 kích hoạt các setters trên đối tượng đích, trong khi cú pháp lây lan thì không.
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 6
Bạn không thể thực hiện lại chức năng function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7 thông qua một lần lan truyền:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 7
Trong ví dụ trên, cú pháp lan truyền không hoạt động như người ta có thể mong đợi: nó lan truyền một mảng các đối số vào theo nghĩa đen của đối tượng, do tham số còn lại. Dưới đây là việc triển khai function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction(...args); 8 bằng cách sử dụng cú pháp lan truyền, có hành vi tương tự như function myFunction(x, y, z) {} const args = [0, 1, 2]; myFunction.apply(null, args); 7, ngoại trừ việc nó không kích hoạt các setters, cũng không làm đột biến bất kỳ đối tượng nào:
const obj = { key1: 'value1' }; const array = [...obj]; // TypeError: obj is not iterable 8
Thông số kỹ thuật
Thông số kỹ thuật ngôn ngữ Ecmascript # SPREADEMENT # prod-SpreadElement |
Đặc tả ngôn ngữ Ecmascript # Prod-Argumentlist # prod-ArgumentList |
Đặc tả ngôn ngữ Ecmascript # prod-propertyDefDef # prod-PropertyDefinition |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt