Summary of the use of rest parameter of ES6

Usage of function rest parameter in ES6

es6 introduces rest parameter, the style is like...xxx, which is used to obtain unnecessary parameters of the function, so there is no need to use arguments object. A variable that is paired with the rest parameter is an array, which puts the excess parameters into the array. For example:

function add(...value){
    (value);
    let sum=0;
    for(var val of value){
        sum+=val    
    }
    return sum
}
add(2,3,5);//10

The add function in the above code is a sum function. Using the rest parameter, you can pass any number of parameters to the function.

Here is an example of rest parameter instead of arguments variable:

function sortNumbers(){
    return (arguments).sort();
}
//Rest writing methodconst sortNumbers=(...numbers)=>();

The above two writing methods are written with rest parameters more natural and concise.

The arguments object is not an array, it is just an array object of class. To use the array method, you must first convert it into an array. The rest parameter does not have this problem. It is a real array, and the array methods can be used. The following is a push method that uses the rest parameter to rewrite the array.

function push(array,...items){
    (function(item){    
        (item);
        (item);
    })
}
var a=[];
push(a,1,2,3);

Also note that

There cannot be other parameters after the rest parameter, otherwise an error will be reported.

The length property of the function does not include the rest parameter.

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

ES6-rest parameters

rest parameter

1.rest parameter

• The rest parameter (form is "…variable name") is used to obtain unnecessary parameters of the function, so there is no need to use arguments (parameters) objects.
• The variable with the rest parameter is an array, which puts the excess parameters into the array.

function add(...a){
    let sum = 0;
    for(var val of a){
        sum += val;
    }
    return sum;
}
add(2,5,3);//10

The add function is a sum function. Using the rest parameter, any number of parameters can be passed to the function.

3. Rest parameter instead of arguments variable

// How to write arguments variablesfunction sortNumbers() {
  return (arguments).sort();
}
// How to write rest parameterconst sortNumbers = (...numbers) => ();

The variables in the parameter represent an array, so the squares unique to the array can be used for this variable. The following is an example of rewriting the array push method using the rest parameter.

function push(array, ...items){
    //forEach is for each    (function(item){
        (item);
        (item);
    });
}
var a = [];
push(a, 1, 2, 3);

There can be no other parameters after the parameter (that is, it can only be the last parameter), otherwise an error will be reported.

6. The length property of the function does not include the rest parameter

(function(a){}).length //1
(function(...a){}).length //0
(function(a,...b){}).length //1

2. Extended operators

1. Meaning:

The expansion operator (spread) is three points (…). It is like the inverse operation of the rest parameter, converting an array into a comma-separated parameter sequence.

(...[1,2,3])
//1 2 3
(1,...[2,3,4],5);
//1 2 3 4 5
[...('div')]
//[<div>,<div>,<div>]

2. This operator is mainly used for function calls

function add(x, y) {
  return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

3. Extension operators can be used in combination with normal function parameters, which is very flexible

function f(v, w, x, y, z) {
    (v); //-1
    (w); //0
    (x); //1
    (y); //2
    (z); //3
}
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

3. Application of extension operators

1. Merge arrays

//ES5
[1, 2].concat(more)
//ES6
[1, 2, ...more]
var arr1 = ['a','b'];
var arr2 = ['c'];
// ES5 merge array(arr1, arr2);
// ES6 merge array[...arr1, ...arr2]

4. Strict mode

1. Starting from ES5, the function can be set to strict mode inside

function doSomething(a,b){
    'use strict'
    //code
}

2. ES6 has made some modifications, stipulating that as long as the function parameters use default values, deconstruction assignments, or extension operators, the function cannot be explicitly set to strict mode, otherwise an error will be reported.

Five.name attributes

1. The name attribute of the function returns the function name of the function.

function foo(){}
 //"foo"

If an anonymous function is assigned to a variable, the name attribute of ES5 will return an empty string, while the name attribute of ES6 will return the actual function name.

2. The function instance returned by the function constructor, the value of the name attribute is "anonymous".

function foo(){}
 //"foo"

The returned function, the name attribute value will be prefixed with "bound".

function foo() {};
({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

Reference Documents

ES6 official documentation

This is the article about the usage of rest parameters of ES6. For more related content on the usage of rest parameters of ES6, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!