Object extension operator:

Extension operators in objects (...) Retrieves all traversable properties from the parameter object and copies them to the current object

let zxx = {a: 1, b: 2};
letzxxs = {... zxx}; Console. log(ZXXS) // {a: 1, b: 2} is equivalent tolet zxx = {a: 1, b: 2};
let zxxs = Object.assign({}, zxx)
console.log(zxxs) // {a: 1, b: 2}Copy the code

Similarly, if a user-defined attribute is placed after an extension operator, the attributes of the same name inside the extension operator will be overwritten. 

let zxx = {a: 1, b: 2};
letzxxs = {... zxx, a:3, ... {b:3, c:2}}; console.log(zxxs) // {a: 3, b: 3, c: 2}Copy the code

A copy of an object instance by an extension operator is a shallow copy (copying a reference to the object). 

let zxx = {a: 1, b: 2, c: {age: 18}};
letzxxs = {... zxx}; console.log(zxxs) // {a: 3, b: 3, c: {age: 18}} ================== zxx.c.age = 8 console.log(zxx) // {a: 3, b: 3, c: {age: 8}} console.log(zxxs) // {a: 3, b: 3, c: {age: 8}}Copy the code

An extension operator for an array

You can convert an array to a sequence of parameters

function add(x, y) {
  returnx + y; } const numbers = [4, 38]; add(... numbers) // 42Copy the code

You can copy arrays

const arr1 = [1, 2];
const arr2 = [...arr1];
console.log(arr2) // [1, 2]Copy the code

Extension operators can be combined with destructive assignment

Used to generate arrays (if the extension operator is used for array assignment, it must be placed in the last bit of the argument, otherwise an error will be reported)

const [first, ...rest] = [1, 2, 3, 4, 5]; The console. The log (first) / / 1 console. The log (rest) / / [2, 3, 4, 5] = = = = = = = = = = = = / / error writing const [... rest, first] = [1, 2, 3, 4, 5]; console.log(first) // Rest element must be last element console.log(rest)Copy the code

Extension operators can also turn strings into true arrays

[...'zxx'] / ["z"."x"."x"]Copy the code

Any object of the Iterator interface can be converted to a true array using the extension operator

function foo() {
    console.log(arguments) // [1, 2, 3, callee: function, Symbol(Symbol.iterator): function]
    const args = [...arguments];
    console.log(args) // [1, 2, 3]
}
foo(1, 2, 3) Copy the code

The output shows that arguments is not an array, but a pseudo-array that can be converted to a real array using the extension operator

​

The extension operator cannot convert a pseudo-array without an iterator into an array

let likeArr = { "0": 1,"1": 2."length"2} :letArr = [...likeArr] // TypeError: Object is not iterable // Array.fromlet likeArr = { "0": 1,"1": 2."length"2} :letArr = array. from(likeArr) console.log(arr) // [1,2]Copy the code

This is equivalent to the apply method

If you want to iterate over array elements as Function parameters, you usually use function.prototype. apply.

functionmyFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args); = = = = = = = = = =functionmyFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(... args);Copy the code

All parameters can be passed by expansion syntax, and there is no limit to the multiple use of expansion syntax. 

functionmyFunction(v, w, x, y, z) { console.log(... arguments) // -1 0 1 2 3 } var args = [0, 1]; myFunction(-1, ... args, 2, ... [3]);Copy the code