Detailed description of extended instances of new features in ES6, and detailed description of new feature instances in es6

Detailed description of extended instances of new features in ES6, and detailed description of new feature instances in es6

This article describes the function extension of the new features of ES6. We will share this with you for your reference. The details are as follows:

I. Default function parameters

1. ES6 allows you to set default values for function parameters, that is, they are directly written after parameter definitions.

function log(x, y = 'World') {  console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello

There are two advantages for this writing: first, the person who reads the code can immediately realize which parameters can be omitted without looking at the function body or documentation. Second, it is conducive to future code optimization, even if this parameter is completely removed from an external interface in a future version, the previous Code will not run.

Parameter variables are declared by default, so they cannot be declared again using let or const. Otherwise, an error is reported.

2. The default value of the parameter can be used in combination with the default value of the deconstruct value assignment.

function foo({x, y = 5}) {  console.log(x, y);}foo({}) // undefined, 5foo({x: 1}) // 1, 5foo({x: 1, y: 2}) // 1, 2foo() // TypeError: Cannot read property 'x' of undefined

Generally, the default parameter is defined, which should be the end parameter of the function. This makes it easy to see which parameters are omitted. If the default value is set for a non-tail parameter, this parameter cannot be omitted.

After the default value is specified, The length attribute of the function returns the number of parameters without the default value. That is to say, if the default value is specified, the length attribute will be distorted.

(function (a) {}).length // 1(function (a = 5) {}).length // 0(function (a, b, c = 5) {}).length // 2

Ii. rest Parameters

ES6 introduces the rest parameter (in the form of "... variable name"), used to obtain redundant parameters of the function, so that you do not need to use the arguments object. The variable used with the rest parameter is an array, which puts redundant parameters into the array.

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

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

Note: No other parameters can be added after the rest parameter (that is, only the last parameter can be used). Otherwise, an error is returned.

The length attribute of the function, excluding the rest parameter.

Iii. Extended Operators

The extension operator (spread) is three vertices (...). It is like the inverse operation of rest parameters. It converts an array into a comma-separated parameter sequence.

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

Iv. Arrow Functions

ES6 allows the use of "arrows" (=>) to define functions. The arrow function is preceded by input and followed by output. Inputs => outputs

Var f = v => v; // The Arrow function above is equivalent to: var f = function (v) {return v ;};

If the arrow function does not require parameters or requires multiple parameters, a parentheses are used to represent the parameter section.

Var f = () => 5; // equivalent to var f = function () {return 5}; var sum = (num1, num2) => num1 + num2; // equivalent to var sum = function (num1, num2) {return num1 + num2 ;};

If the code block of an arrow function contains more than one statement, enclose it with braces and return it using the return statement.

Var sum = (num1, num2) => {return num1 + num2;} // Since braces are interpreted as code blocks, if the arrow function returns an object directly, brackets must be added outside the object. Var getTempItem = id => ({id: id, name: "Temp "});

Arrow functions can be used in combination with variable deconstruct.

Const full = ({first, last}) => first + ''+ last; // equivalent to function full (person) {return person. first + ''+ person. last ;}

One use of Arrow functions is to simplify callback functions.

// Normal function syntax [1, 2, 3]. map (function (x) {return x * x;}); // arrow function syntax [1, 2, 3]. map (x => x * x );

The following is an example of combining rest parameters with arrow functions.

const numbers = (...nums) => nums;numbers(1, 2, 3, 4, 5)// [1,2,3,4,5]

There are several usage notes for arrow functions.

(1) this object in the function body is the object in the definition, rather than the object in use.
(2) it cannot be used as a constructor. That is to say, the new command cannot be used. Otherwise, an error is thrown.
(3) The arguments object cannot be used. This object does not exist in the function body. If you want to use it, you can use the Rest parameter instead.
(4) The yield command cannot be used, so the arrow function cannot be used as the Generator function.

In the above four points, the first point is particularly worth noting. The point of this object is variable, but it is fixed in the arrow function.

5. comma at the end of the function parameter

ECMAscript 2017 adds the last parameter of the function to a comma (trailing comma ).

Previously, comma (,) is not allowed after the last parameter during Function Definition and calling.

function clownsEverywhere(  param1,  param2) { /* ... */ }

In the above Code, if a comma is added after param2 or bar, an error is returned.

In this case, if you want to add a third parameter to the function clownsEverywhere, you must add a comma after the second parameter. For version management systems, it will show that the line for adding commas has also changed. This seems redundant, so the new syntax allows a comma at the end of the definition and call.

function clownsEverywhere(  param1,  param2,) { /* ... */ }

I hope this article will help you design the ECMAscript program.