Tomorrow is the Lantern Festival, in this xiaobian in advance to wish everyone a happy Lantern Festival! Spread syntax ES6 Spread syntax

Expand the grammar with “…” An expansion syntax breaks an iterable object into individual values (syntactic level expansion).

The expansion syntax is usually used to pass the value of an iterable object to the parameters of a function. Today xiaobian will introduce from the following aspects:

  • Application of function parameters
  • Array related applications
  • Application of residual parameters

The reading time for this article is expected to be 10 minutes

Application of function parameters

Prior to ES6, if we wanted to pass arrays as arguments to parameters in a Function, we could use the apply() method of Function. The following code looks like this:

function myFunction(a, b) {
  return a + b;
}
var data = [1.4];
var result = myFunction.apply(null, data);
console.log(result); / / the Output "5"Copy the code

From the code above, the Apply method takes an array, breaking it up into individual arguments and passing them to the function to call.

ES6’s expansion syntax allows us to make calls in a more concise way, as shown in the following code:

function myFunction(a, b) {
    return a + b; 
}
let data = [1.4];
letresult = myFunction(... data);console.log(result); / / the Output "5"Copy the code

While the code is running, the JavaScript interpreter will replace myFunction with the 1,4 expression… Operator:

letresult = myFunction(... data);Copy the code

The above code will be replaced with the following:

let result = myFunction(1.4);Copy the code

After the substitution, the code in the function will continue to execute.

Array related applications

Array merging

The expansion syntax adds an array to another array as part of it.

let array1 = [2.3.4];
let array2 = [1. array1,5.6.7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7"Copy the code

The code runs with the following code:

let array2 = [1. array1,5.6.7];Copy the code

The above code will be replaced with the following code:

let array2 = [1.2.3.4.5.6.7];Copy the code

The application of push method

Sometimes we need to append the contents of one array to another. Before ES6 we could do this, as shown in the following code:

var array1 = [2.3.4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4"Copy the code

The ES6 expansion syntax can be implemented in a more concise form, as shown in the following code:

let array1 = [2.3.4];
let array2=[1]; array2.push(... array1);console.log(array2); //Output "1, 2, 3, 4"Copy the code

The code runs with the following code:

array2.push(... array1);Copy the code

The above code will be replaced with the following code:

array2.push(2.3.4);Copy the code

Pass multiple array parameters

We can use the expansion syntax to pass multiple arrays as arguments, as shown in the following code:

let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3.4]].//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
  return a+b+c+d+e;
}
letresult = myFunction(... array3, ... array4);//multi array spread
console.log(result); / / the Output "15"Copy the code

Application of residual parameters

We know that the JS function has a arguments object inside that takes all arguments. Now that ES6 has given us a new object, we can get arguments other than the start argument, the remaining argument, and we can use the expansion syntax… Get.

Before ES6, we could get the remaining parameters as shown in the following code:

function myFunction(a, b) {
    const args = Array.prototype.slice.call(arguments, myFunction.length);
    console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5"Copy the code

In ES6, the above code can be changed as follows:

function myFunction(a, b, ... args) {
    console.log(args); //Output "3, 4, 5"
}
myFunction(1.2.3.4.5);Copy the code

Once the first argument in a function takes the remaining arguments, no arguments can be added, otherwise an error will be thrown. For example:

function fn(. rest,foo) {}  
//Output "SyntaxError: Rest parameter must be last formal parameter"Copy the code

section

This is the end of today’s content, to expand the syntax sugar is particularly cool, in the future development, we will try to use new syntax sugar instead of the old writing method. It makes our code look cleaner, cleaner, and easier to understand.

E6 related articles

ES6 Basics Let and scope

【ES6 basics 】 Const introduction

ES6 Basics Default value

More exciting content, please pay attention to the wechat “front-end talent” public number!