Hướng dẫn what is spread operator in javascript with example? - ví dụ về toán tử trải rộng trong javascript là gì?

Question

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.

Nội dung chính Show

Sự mô tả
Lan truyền trong các cuộc gọi chức năng
Lan truyền theo nghĩa đen
Lan truyền trong các chữ cái
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Toán tử lây lan trong JavaScript là gì?
Người vận hành nghỉ ngơi và lây lan trong JavaScript là gì?
Nhà điều hành lan truyền JavaScript là khi nào?
Nhà điều hành lây lan được sử dụng ở đâu?

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.

Thử nó

Cú pháp

myFunction(a, ...iterableObj, b)
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }

Sự mô tả

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:

Danh sách đối số chức năng (

const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

0)

Dòng chữ (

const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

1)

Đối tượng chữ (

const array = [1, 2, 3];
const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

2)

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.

Ví dụ

Lan truyền 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ột mảng làm đối số cho một hàm.

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

Sự chỉ rõ
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

Xem thêm

Toán tử lây lan trong JavaScript là gì?

Toán tử lan truyền JavaScript (...) cho phép chúng tôi nhanh chóng sao chép tất cả hoặc một phần của mảng hoặc đối tượng hiện có vào một mảng hoặc đối tượng khác.allows us to quickly copy all or part of an existing array or object into another array or object.

Người vận hành nghỉ ngơi và lây lan trong JavaScript là gì?

Toán tử REST (Mạnh) cho phép chúng tôi gọi một hàm với bất kỳ số lượng đối số nào và sau đó truy cập các đối số dư thừa đó dưới dạng mảng.Toán tử REST cũng cho phép chúng tôi phá hủy mảng hoặc đối tượng.Toán tử lây lan (trên mạng) cho phép chúng tôi mở rộng một mảng giống như có thể vào các yếu tố riêng lẻ của nó.. The rest operator also allows us in destructuring array or objects. The spread operator (…) allows us to expand an iterable like array into its individual elements.

Nhà điều hành lan truyền JavaScript là khi nào?

Toán tử lan truyền là một trong những tính năng thú vị nhất được giới thiệu như một phần của bản phát hành ES2015, chúng tôi sẽ xem xét một số ứng dụng hữu ích của nó.ES2015 release, we will look at some its useful applications.

Nhà điều hành lây lan được sử dụng ở đâu?

Toán tử lây lan cho phép một sự khác biệt mở rộng ở những nơi dự kiến 0+ đối số.Nó chủ yếu được sử dụng trong mảng biến trong đó có nhiều hơn 1 giá trị được mong đợi.Nó cho phép chúng tôi đặc quyền có được một danh sách các tham số từ một mảng.mostly used in the variable array where there is more than 1 values are expected. It allows us the privilege to obtain a list of parameters from an array.