This is the 13th day of my participation in Gwen Challenge

Extension operators (…) You can expand an array expression or string syntactically during a function call/array construction; It also expands the object expression by key-value when constructing the object.

An array of 1.

If there is no extension operator, only push, splice, concat and other methods can be combined to convert existing array elements into new array elements. Constructing new arrays is easier and more elegant with the extension operator: the spread operator is the three points we know (…). , which acts like the inverse of the REST argument, turning an array into a comma-separated sequence of arguments.

console.log(... [1.2.3]);
/ / 1 2 3
console.log(1. [2.3.4].5)
// 1, 2, 3, 4, 5
console.log([1. [2.3.4].5])
// [1, 2, 3, 4, 5]
Copy the code

The array.assign () syntax is the same as object.assign ()

let arr = [1.2.3];
let arr2 = [...arr]; / / [1, 2, 3]
arr2.push(4); 
console.log(arr2); // [1, 2, 3, 4]

// Array contains empty space
let arr3 = [1.3],
    arr4 = [...arr3];
console.log(arr4); // [1, undefined, 3]
Copy the code

1.3 Merge Array nature: Convert an array into a comma-separated sequence of arguments, and place it in the array

var arr1 = [0.1.2];
var arr2 = [3.4.5];
var arr3 = [...arr1, ...arr2];// Append all elements in arR2 to arr1 and return
/ / is equivalent to
var arr4 = arr1.concat(arr2);
console.log(arr3,arr4) / /,1,2,3,4,5 [0] [0,1,2,3,4,5]
Copy the code

2. The object

Extended operators (…) Use to fetch all traversable properties of the parameter object and copy them to the current object. 2.1 Clone Object If String, Number, or Boolean is a deep copy. If Object or Array is used, it is a shallow copy.

var obj1 = { foo: 'bar'.x: 42 };
varclonedObj = { ... obj1 };console.log(clonedObj); // { foo: "bar", x: 42 } 
Copy the code

2.2 Merging Objects

let age = {age: 15};
let name = {name: "Amy"};
letperson = {... age, ... name};console.log(person);  // {age: 15, name: "Amy"}
Copy the code

Note: if a custom attribute comes after the extension operator, all attributes with the same name inside the extension operator object will be overwritten. The user-defined attribute will be overwritten before the extension of operation degree.

let person = {name: "Amy".age: 15};
letsomeone = { ... person,name: "Mike".age: 17};
let someone1 = {  name: "Mike".age: 17. person};console.log(someone);  // {name: "Mike", age: 17}
console.log(someone1);  // {name: "Amy", age: 15}
Copy the code

The extension operator is followed by an empty object, null, and undefined, with no effect and no error.

/ / null objects
leta = {... {},a: 1.b: 2};
console.log(a);  //{a: 1, b: 2}

/ / null, and undefined
letb = {... null, ... undefined,a: 1.b: 2};
console.log(b);  //{a: 1, b: 2}
Copy the code

3. The function

In a function call, the extension operator (…) Turn an array into a sequence of parameters

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1.2.3];

// Do not use the extension operator
console.log(sum.apply(null, numbers));

// Use the extension operator
console.log(sum(... numbers));/ / 6
Copy the code

The extension operator can be used in conjunction with the function argument, which is very flexible:

function f(x,y,z,v,w,u){
	console.log(x,y,z,v,w,u)
}
var args = [0.1.5];
f(-1. args,2. [3]); // -1, 0, 1, 5, 2,3
Copy the code

4. React

When encapsulating a component, we usually expose some props to implement the function. In most cases, we should show the props for external use. However, when we pass a large number of props, it is very complicated. (extension operator, used to fetch all traversable properties of the parameter object).

Previously written:

<CustomComponent name ='Jine' age ={21} / >Copy the code

The use of… Is the same as the above

const params = {name: 'Jine'.age: 21} <CustomComponent {... params} />Copy the code

Work with destructuring assignments to avoid passing in unnecessary arguments

var params = {
	name: '123'.title: '456'.type: 'aaa'
}

var{ type, ... other } = params;<CustomComponent type='normal' number={2} {. other} / >
/ / is equivalent to
<CustomComponent type='normal' number={2} name='123' title='456' />
Copy the code