preface

Rest parameters:… The variable name used to get the argument passed in when the function is called. As the name implies, the REST parameter represents a collection of parameters other than those specified explicitly, and is of type Array

Extension operators:… Can be used to construct an array/object, or to call a function using an array as a parameter (that is, to convert the array to a list of parameters, so that each element becomes an argument to the function).

Examples of application

Example 1 — The rest argument is the remaining argument (. variableAs a parameter)

Rest, which translates as residual, is like the Ellipsis in Chinese, and can be used to get arguments to functions that do not yet have corresponding parameters

function fn(first,second,... rest,args){
    console.log(first) / / 0
    console.log(second) / / 1
    console.log(` remaining${rest.length}Is: ' + rest) // There are six remaining parameters
    console.log(rest) / /,3,4,5,6,7 [2]
    console.log(` in total,The ${arguments.length}Number of arguments, ')  // There are eight arguments in total
    console.log(Array.from(arguments))  / /,1,2,3,4,5,6,7 [0]
    console.log(arguments) / / the Arguments (8) [0,1,2,3,4,5,6,7, the callee: (...), Symbol (Symbol. The iterator) : ƒ]
}
fn(0.1.2.3.4.5.6.7)
Copy the code

Note:

  • Behind the fn(a)inside. The shape parameter(such as:… Rest) and must be placed last, otherwise an error will be reported, as shown below
  • Apply this variable to write directlyThe shape parameter(for example, REST)

Differences between REST arguments and Arguments objects

  • Rest parameters only contain thoseNo corresponding parameterThe argument; The Arguments object contains arguments that are passed to functionsAll the arguments.
  • Rest parameters isReal Array instanceThat is, you can use all of them directly on itArray methods; The Arguments object is not a real array, it is aThe arguments object.
  • Arguments Objects also have additional properties (such as the Callee property)

Example 2 — The extension operator splits arrays into one after another (. variableAs arguments)

var arr = [1.2.3.4]
var arr1 = [5.6]
var arr2 = [5.6]
arr1.push(arr)
console.log(arr1) // [1, 2, 3, 4]]arr2.push(... arr)console.log(arr2) // [5, 6, 1, 2, 3, 4], equivalent to arr2.concat(arr)
Copy the code
var arr = [1.2.3.4]
var fn = function(value){
    console.log(value)
}
fn(arr) / / [1, 2, 3, 4]fn(... arr)// 1, print only the first element 1, continue to add parameters to continue to have


// Note that the object is not a traverser and cannot be used... The operator
var obj = {
    name: "Jack".age: 18} fn(... obj)/ / an error
Copy the code

Example 3 – Extension operator for shallow copy object/array

Arr2 = arr1, complete the assignment mapping (both objects/arrays are essentially the same)

let arr1 = ["I"."love"."you"]
let arr2 = arr1
console.log(arr1 === arr2) // true
arr2.push("too")
console.log(arr2 , arr1) // ["I","love","you","too"] ["I","love","you","too"]
Copy the code

Use the REST operator arr2 = […arr1] to complete the copy

let arr1 = ["I"."love"."you"]
let arr2 = [...arr1]
console.log(arr1 === arr2) // false
arr2.push("too")
console.log(arr2 , arr1) // ["I","love","you","too"] ["I","love","you"]
Copy the code

Note: Only shallow copy is possible with the REST operator, that is, level 1 deep copy

var arr1 = [[1.2.3].4.5]
var arr2 = [...arr1]
console.log(arr1 === arr2) // false
console.log(arr1[0] === arr2[0]) // true
Copy the code

Example 4 — The extension operator is used to merge objects/arrays

[Merge object]let obj1 = {
    age: 20.name: "Jack"
}
let obj2 = {
    gender: "man".state: "single"
}
console.log({obj1,obj2}) // {obj1: {age: 20, name: "Jack"}, obj2: {gender: "man", state: "single"}}
console.log({... obj1,... obj2})// {age: 20, name: "Jack", gender: "man", state: "single"}
let obj3 = {
    obj1,
    in_days: 243.address: "China"
}
letobj4 = { ... obj1,in_days: 243.address: "China"
}
console.log(obj3) / / {obj1: {... }, in_days: 243, address: "China"}
console.log(obj4) // {age: 20, name: "Jack", in_days: 243, address: "China"}[Merge array]let arr1 = [1.2.3]
let arr2 = [4.5.6]
console.log([arr1,arr2]) // [[1,2,3],[4,5,6]]
console.log([...arr1,...arr2]) // [1,2,3,4,5,6], equivalent to arr1.concat(arr2)
Copy the code

For example, a previous project involved:

demand

You have a list of components, and you click the trigger event to add common properties to all the components in the list

code

const commonStyle = {
    rotate: 0.opacity: 1
};
const commonAttr = {
    animations: [].events: {},
    groupStyle: {}, // Used when a component becomes a child of a Group
    isLock: false // Whether to lock components
};
// List of components to the left of the editor
const list = [
    {
        component: "v-text".label: "Text".propValue: "Double click edit text".icon: "wenben".style: {
            width: 200.height: 22.fontSize: 14.fontWeight: 500.lineHeight: "".letterSpacing: 0.textAlign: "".color: ""}}, {component: "v-button".label: "Button".propValue: "Button".icon: "button".style: {
            width: 100.height: 34.borderWidth: 1.borderColor: "".borderRadius: "".fontSize: 14.fontWeight: 500.lineHeight: "".letterSpacing: 0.textAlign: "".color: "".backgroundColor: ""}}];for (let i = 0, len = list.length; i < len; i++) { list[i].style = { ... commonStyle , ... list[i].style }// Merge two objectslist[i] = { ... commonAttr , ... list[i] }// Merge two objects
}
console.log(list);
Copy the code

The results of

Refer to the article

  • ES6 rest parameters and extended operators in detail
  • JavaScript Learning Series 4 —– Extension operators in JavaScript three dots (…)