Example code of the spread operator and its application in JavaScript

The spread operator allows an expression to be expanded at some point. The spread operator can be used where there are multiple parameters (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignments).

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

The above usage is actually equivalent to

obj2 = {value1: 1, value2: 2}

The difference between the writing of the spread operator and the writing of direct assignment of obj2 = obj1 is that if the value is assigned directly, for引用類型, it is equivalent to just assigning the memory space address of obj1 . When obj2 changes, obj1 will also change accordingly. If you use展開運算符, since the attribute types in the obj1 object are all基本類型, it is equivalent to recreating an object. At this time, when obj2 changes, it will not affect the obj1 object. But this is only limited to the case where all its properties are of basic types (or in other words, only one level of deep copy is performed). If the property in the object is of reference type, if the value of the reference type in the property is modified, the property values ​​of both objects will be modified.

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

Application of the spread operator

1. Using the spread operator in a function

function test(a, b, c){};

let arr = [1, 2, 3];
test(...arr);

2. Using the spread operator in array literals

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// Using push method let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3. Used for deconstruction assignment. The expansion operator can only be used at the end of the deconstruction assignment, otherwise an error will be reported.

// The spread operator can only be used at the end of a destructuring assignment.
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4. Class array becomes array

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5. Use the spread operator in objects
The object spread operator in ES7 allows us to manipulate objects more quickly:

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

Insert an object into another object:

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

Merge two objects:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

This is the end of this article about the spread operator in JavaScript and its application example code. For more relevant js spread operator content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!