New Features of es6

1. Arrow functions:

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

 var f = () => 5; var sum = (num1, num2) => num1 + num2;

The code block of an arrow function contains more than one statement, which must be enclosed in braces and returned 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, parentheses 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

 function full(person) {　　return person.first + ‘ ‘ + person.last; }

Simplify the callback function.
Normal function writing

 [1,2,3].map(function (x) {     return x * x; });

Arrow function writing

[1,2,3].map(x => x * x);

Note:
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.
The arrow function does not have its own this, but references the outer this

 

2. Rest parameters (...)

Purpose:

It can be seen as an extension operator positive operation, which can convert an array to a parameter list.

console.log(1,...[2,3,4],5); //1 2 3 4 5

Can replace the apply Method

Math.max.apply(null,[14,3,7])console.log(Math.min(...[14,3,7]));

It can be used to merge arrays.

[1,2].concat([3])console.log([1,2,...[3]]);

Used in combination with deconstruct value assignment can only be placed at the end of the parameter; otherwise, an error is reported.

const [first, ...rest] = [1, 2, 3, 4, 5];console.log(first); // 1console.log(rest); // [2, 3, 4, 5]const [first, ...rest] = [];console.log(first); // undefinedconsole.log(rest); // []const [first, ...rest] = ["foo"];console.log(first); // "foo"console.log(rest); // []

Returns multiple values for the function.

var dateFields = readDateFields(database);var d = new Date(...dateFields);

Extract a row of data from the database and pass it directly to the constructor date through the extension operator.
Converts a string to an array.

console.log([...‘hello‘]);[ "h", "e", "l", "l", "o" ]

This method correctly recognizes 32-bit Unicode characters

function length(str) {    return [...str].length;console.log([...str].length);}length(‘x\uD83D\uDE80y‘); // 3

Objects that implement the iterator Interface

var nodeList = document.querySelectorAll(‘div‘);var array = [...nodeList];

Any iterator interface object can be converted to a real Array Using the extension operator.
Map and set structures. The generator function can both use the extension operator.

let map = new Map([　　[1, ‘one‘],　　[2, ‘two‘],　　[3, ‘three‘],]);let arr = [...map.keys()]; // [1, 2, 3]var go = function*(){　　yield 1;　　yield 2;　　yield 3;};[...go()] // [1, 2, 3]　

Length attribute definition: the number of parameters that the function expects to pass in.

New Features of es6