ES6 let common JS development can not understand the basic grammar (fast ES6)

ES6

Introduction to detailed reference pages the relationship between ECMAScript and JavaScript is that the former is the latter specification and the latter is an implementation of the former. Generally speaking, these two words can be interchangeable. Let command ES6 New Let command to declare a variable, which is similar to Var, but the declared variable is valid only in the block of code where the Let command is located.

{Let
  a = ten;
  var b = 1;
}

A//REFERENCEERROR:A is not defined.
b//1

Let command avoids the release of the loop variable as a global variable

var s = ' Hello ';

for (var i = 0; i < s.length i++) {
  console.log (s[i]);

Console.log (i); 5

In the code above, the variable i is only used to control the loop, but after the loop ends, it does not disappear and leaks into global variables. the deconstruction assignment of a variable ES6 allows values to be extracted from arrays and objects in a certain pattern, assigning values to variables, which is called deconstruction (destructuring). In essence, this type of writing is "pattern matching," as long as the pattern on both sides of the equals sign is the same, and the variable on the left is assigned the corresponding value. Here are some examples of using nested arrays for deconstruction.

let [foo, [[Bar], Baz]] = [1, [[2], 3]];
Foo//1
bar//2
Baz//3 Let

[,, third] = ["foo", "Bar", "Baz"];
Third//"Baz" let

[X,, Y] = [1, 2, 3];
X//1
y//3 let

[Head, ... tail] = [1, 2, 3, 4];
Head//1
tail//[2, 3, 4] Let

[x, Y, ... z] = [' a '];
X//"a"
y//undefined
z//[]

var {foo, bar} = {foo: "AAA", Bar: "BBB"};
Foo//"AAA"
Bar//"BBB"

var {bar, Foo} = {foo: "AAA", Bar: "BBB"};
Foo//"AAA"
Bar//"BBB"

var {baz} = {foo: "AAA", Bar: "BBB"};
Baz//undefined

The deconstruction assignment allows you to specify a default value.

var [foo = True] = [];
Foo//True

[x, y = ' b '] = [' a '];//x= ' a ', y= ' B '
[x, y = ' b '] = [' A ', undefined];//x= ' a ', y= ' B '

Template String

The traditional JavaScript language, the output template is usually written like this.

$ (' #result '). Append ('
  There are <b> ' + basket.count + ' </b> ' +
  ' items in your basket, ' +
  ' <em > ' + basket.onsale +
  ' </em> are on sale! '
);

The above writing is quite cumbersome and inconvenient, ES6 introduced the template string to solve this problem.

$ (' #result '). Append ('
  There are <b>${basket.count}</b> items
   in your basket, <em>${ Basket.onsale}</em>
  are on sale!
`);

The template string (template string) is an enhanced string that is identified with an inverted quotation mark ('). It can be used as a normal string, or it can be used to define a multiline string, or to embed a variable in a string.

Normal string
' in JavaScript ' \ n ' is a line-feed. '

//Multiline string
' in JavaScript '-not
 legal. '

Console . log (' string text line 1
string text line 2 ');

Embedded variable
var name = ' Bob ' in string, time = ' Today ';
' Hello ${name}, how are you ${time}? '

Number Global Object

ES6 the Global Method parseint () and parsefloat () to the number object, and the behavior remains intact. function Change ES6 allows you to set a default value for the parameters of a function, which is written directly after the parameter definition.

function log (x, y = ' world ') {
  console.log (x, y);
}

Log (' hello ')//Hello World
log (' Hello ', ' country ')//hello '
log (' Hello ', ')//Hello

Parameter defaults can be used in conjunction with the default values of the deconstruction assignment.

function foo ({x, y = 5}) {
  console.log (x, y);
}

Foo ({})//Undefined, 5
foo ({x:1})//1, 5
foo ({x:1, y:2})//1, 2
foo ()//Typeerror:cannot Read Propert Y ' x ' of undefined

ES6 introduces the rest parameter (in the form "...)." Variable name "To get the extra parameters of the function so that you do not need to use the arguments object. The rest parameter is an array of variables that put extra arguments in the array.

function Add (... values) {let
  sum = 0;

  For (var val of values) {
    sum = val;
  }

  return sum;
}

Add (2, 5, 3)//10

Arrow function
ES6 allows you to define functions using the arrows (=>).

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;
};

Const FULL = ({i, last}) =>-i + last;

Equivalent to
function full [person] {return
  Person.first + ' + person.last;
}

extension Operators

The extension operator (spread) is a three point (...). ）。 It is like the inverse of rest parameters, converting an array to a comma-delimited sequence of parameters.

function push (array, ... items) {
  Array.push (... items);
}

function add (x, y) {return
  x + y;
}

var numbers = [4];
Add (... numbers)//42

Application of Extended operators

ES5
[1, 2].concat (more)
//ES6
[1, 2, ... more]

var arr1 = [' A ', ' B '];
var arr2 = [' C '];
var arr3 = [' d ', ' e '];

ES5 of the merged array
arr1.concat (arr2, ARR3);
[' A ', ' B ', ' C ', ' d ', ' e ']

//ES6 merged array
[... arr1, ... arr2, ... arr3]
//[' A ', ' B ', ' C ', ' d ', ' e ']

/ /ES5
a = list[0], rest = List.slice (1)
//ES6, combined with deconstruction assignment
[A, ... rest] = List

//function's return value
var Datefiel ds = Readdatefields (database);
var d = new Date (... datefields);

ObjectES6 allows you to write directly to variables and functions as objects ' properties and methods. Such writing is more concise.

var birth = ' 2000/01/01 ';

var person = {

  name: ' John ',//

  equivalent to Birth:birth
  birth,

  //equal to Hello:function ()
  ... Hello () {console.log (' My name is ', this.name);}

};

An attribute name expression that, when ES6 allows literal definition of an object, uses method two (an expression) as the object's property name, which is the expression in square brackets.

Let Propkey = ' foo ';

Let obj = {
  [Propkey]: True,
  [' a ' + ' BC ']: 123
};