1. The rest parameters

ES6 introduces rest parameters (in the form of “… Variable name “) to get the extra arguments to the function, so you don’t need the Arguments object. Rest parameters are paired with an array of variables that will

Excess parameters are put into the array.

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

The add function in the above code is a summation function that can be passed any number of arguments using rest parameters.

Here is an example of a REST argument replacing the arguments variable.

/ / the arguments written variable function sortNumbers () {return Array. Prototype. Slice. The call (the arguments). The sort (); } // Rest const sortNumbers = (... numbers) => numbers.sort();Copy the code

After comparing the two ways of writing the above code, you can see that the rest parameters are more natural and concise.

A variable in a REST parameter represents an array, so array-specific methods can be applied to that variable. Here is an example of rewriting the array push method with rest parameters.

function push(array, ... items) { items.forEach(function(item) { array.push(item); console.log(item); }); } var a = []; Push (a, 1, 2, 3) Note that the REST parameter cannot be followed by any other parameter (i.e. only the last parameter), otherwise an error will be reported. Function f(a,... b, c) { // ... }Copy the code

The length attribute of the function, excluding rest parameters.

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

2. Extension operators

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

console.log(... [1, 2, 3]) // 1 2 3 console.log(1, ... [2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]Copy the code

This operator is used primarily for function calls.

function push(array, ... items) { array.push(... items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(... numbers) // 42Copy the code

In the above code, array.push(… The items) and add (… The numbers line, both of which are function calls, use the extension operator. This operator changes an array into a sequence of arguments. Extension operators can be used in conjunction with normal function arguments, making them very flexible.

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

2. Replace the array apply method

Since the extension operator expands an array, the apply method is no longer needed to convert the array into a function argument.

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

Here is a practical example of extending the operator instead of applying the apply method, using the Math. Max method to simplify the writing of the maximum element in an array. // ES5

Math.max. Apply (null, [14, 3, 77]) [14, 3, 77]) // Equivalent to math.max (14, 3, 77);Copy the code

The above code indicates that since JavaScript does not provide a function to find the largest element in an array, we can only use the math. Max function to convert the array into a sequence of arguments and then maximize it. We have extended operations

After that, you can use math.max directly.

Another example is to add an array to the end of another array through the push function.

Var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); Var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(... arr2);Copy the code

In the ES5 version of the above code, the parameter of the push method cannot be an array, so we have to adapt the push method to apply. With the extension operator, you can pass the array directly into the push method.

Here's another example. // ES5 new (Date.bind.apply(Date, [null, 2015, 1, 1])) // ES6 new Date(... [2015, 1, 1));Copy the code