"JS Notes" read Nanyi teacher ES6 Introductory notes-Chapter One

In view of the recent development of projects with the VUEJS framework, many of them involve the ES6 grammar which is not well understood in order to read the book carefully.

Address: http://es6.ruanyifeng.com/#README

　　Chapter One: Let, const commands, and block-level scopes

ES6 adds a declarative keyword for both the Let and the const variables, which greatly reinforces the JS variable's reasonableness and fixes the bug that appeared before many ES6 versions. They have the following characteristics:

One: Let's statement

1.1 variables declared with let are bound to the statement block to which the declaration belongs, and the statement block is not accessible outside

For example, the following example:

for (Let i = 0; i < i++) {  //...} Console.log (i);//REFERENCEERROR:I is not defined

Before the ES6 version, variables in the loop condition could be accessed in the external environment after the loop ended with a VAR declaration, but not with a let declaration. Let is re-declared once in each cycle and valid in this round cycle

There is a special place in the For loop where both the condition block and the execution block are a separate block scope so the following example will work as well.

for (Let i = 0; i < 3; i++) {let  i = ' abc ';  Console.log (i);} abc//abc//ABC

Even if you declare a variable with the same name but because it is declared in a different block scope, there is no error, but I think there is a better experience to read the code or try not to use the same name variable

1.2 Variable elevation is not present for variables declared with Let

Variable promotion has always been a common problem of JS, it is called "characteristics", which not only subvert the programming language execution sequence will also bring some incredible problems, as follows:

The case of Var console.log (foo); Output Undefinedvar foo = 2;//Let case console.log (bar); Error Referenceerrorlet bar = 2;

The first variable declared with VAR can be disassembled to the following steps before the code executes:

var case var foo;console.log (foo); Output Undefinedfoo = 2;

That's why the output is undefined.

And let's appearance changed the "feature", so that JS does not have a variable declaration, if you call the variable before declaring the variable will be an error

1.3 Temporary dead zones

To declare a variable in a block of statements, the variable is bound to be unaffected by an external variable in this block of statements, for example:

var tmp = 123;if (true) {  TMP = ' abc ';//Referenceerror let  tmp;}

In the above example, because TMP is declared in the IF statement block, TMP is bound to the IF statement block, and the statement block will again judge the rationality of the statement within the block, and the call of the TMP before the declaration so that the error

In summary, let the variable is not available in the code block until it is declared with a command.

1.4 Duplicate declarations are not allowed

The variable with let declaration cannot have the same name, otherwise it will be an error, and the variable with let declaration inside the function cannot have the same name as the parameter

Two: block-level scope

2.1 Days without scopes

ES5 does not have the concept of block-level scope, which results in the internal variables covering the outer variables and the circulation variables used for counting are leaked as global variables

An example of an inner variable covering an outer variable:

var tmp = new Date (), function f () {  console.log (TMP);  if (false) {    var tmp = ' Hello World ';  }} f (); Undefined

As mentioned above, the variable of VAR declaration will be promoted, so the above example can be disassembled into this way:

var tmp = new Date (); function f () {  var tmp;  Console.log (TMP);  if (false) {    tmp = ' Hello World ';  }} f (); Undefined

Because the variable elevation tmp is not assigned the value is called (the function is not assigned the TMP later), so the function output is undefined

The loop variable used to count is leaked as a global variable example:

var s = ' Hello '; for (var i = 0; i < s.length; i++) {  console.log (s[i]);} Console.log (i); 5

As mentioned above, the benefit of declaring a variable inside a loop condition with let is that the variable is not leaked to the global scope, but with var. The solution for ES5 is to force the variables inside the loop condition to not leak with the closure simulation block scope

2.2 ES6 Scope of attack

Let's look at an example:

Function F1 () {let  n = 5;  if (true) {let    n = ten;  }  Console.log (n); 5}

Within the function body, a block scope is defined, and its ancestor scope is the function body, and when the variable n is called outside the scope of the IF statement, the variable that is not called inside the IF statement is called only the corresponding variable in the statement block to which the output statement belongs.

If you declare it in VAR:

Function F1 () {    var n = 5;     if (true) {         var n = ten;     }    Console.log (n);} F1 ();    Output 10

Because the increase of the variable affects the output, decomposition:

Function F1 () {    var n;    n = 5;        if (true) {          n = ten;     }//Determine the condition that the variable n is re-assigned to    Console.log (n);} F1 ();    So output 10

2.3 Block scopes can be nested, declaring variables with the same name in different block scopes without error

{{{}  insane = ' Hello world ';  {Let insane = ' Hello World '}}}; No problem

The presence of a block scope causes the original iife (self-executing function) to stop using the

2.4 Block-level internal declaration functions can cause incredible effects due to browser differences

A function in a ES5 rule can only be declared in the global scope and cannot be declared locally, but the browser does not follow this principle in order to be compatible with previous old code.

ES6 has a concept of block scope that explicitly indicates that a function can be declared in a block-scoped scope, for example:

function f () {Console.log (' I am outside! ');} (function () {  if (false) {    //} Repeat once function f functions    f () {Console.log (' I am inside! ');}  }  f ();} ());

Running in ES5 outputs I am inside! Because the function declaration of the promotion, and in the ES6 call theory will output I am outside!, and actually the browser execution will directly error that is because in order to alleviate the old code is not compatible with the problem browser can not follow the rules, specifically as follows:

• Allows you to declare a function within a block-level scope.
• A function declaration is similar to var , that is, promoted to the head of a global scope or function scope.
• Also, the function declaration is promoted to the head of the block-level scope at which it resides.

So executing the above example statement in a browser that supports ES6 actually executes the following statement

Browser's ES6 environment function f () {Console.log (' I am outside! ');} (function () {  var F;  if (false) {    F = function () {console.log (' I am inside! ');}  }  f ();} ());//uncaught typeerror:f is not a function

Consider the differences in the browser, so use function declarations as few as possible in the block scope to use function expressions.

In addition, the block-level scope of the ES6 allows declaring the rules of a function, only if the braces are used, and if no curly braces are used, an error is made.

Do not error ' use strict ', if (true) {  function f () {}}//error ' use strict '; if (true)  function f () {}

2.5 Do expressions

The block scope has no return value, and if you precede the block scope with a Do keyword to have a return value for the block scope, there is no experiment on chrome that can only post the instance code of the Nanyi teacher.

Let x = does {let  t = f ();  T * t + 1;};

X Gets the return value of the block scope (although it is not known where the returned value is)

Three: const ( constant ) Statement

The variable declared by the 3.1 const is a constant, and the value of the constant after the declaration is immutable and must be initialized once it is declared.

Errors that are assigned again after a constant is declared:

Const PI = 3.1415;console.log (pi); 3.1415PI = 3;//error typeerror:assignment to constant variable.

An error that declares a constant but does not assign an initial value:

Const foo;//syntaxerror:missing initializer in const declaration

The constants declared by the 3.2 const are the same as the variables that let declares:

1, will be bound in the declaration of the statement block, in the statement block out of the error

2, there is no variable promotion, there is a temporary dead zone, can only be used after the location of the declaration

3, cannot repeat the declaration

3.3 A const declared constant is an underlying type, it guarantees that the value of the underlying type is the same, and if the const-declared constant is a reference type, it guarantees that the pointer to the reference does not change

For a simple type of data (numeric, String, Boolean), the value is stored in the memory address that the variable points to, so it is equivalent to a constant.

For composite types of data (primarily objects and arrays), the memory address that the variable points to is only a pointer, which guarantees that the const pointer is fixed, and that the data structure it points to is not variable, and it is completely out of control. For example, if we change the corresponding value of a key in an object, we can continue to run it under the constant declaration without error.

If you want to freeze objects completely, use Object.freeze ()

Original blog: http://www.cnblogs.com/stitchgogo/p/7533273.html

"JS Notes" read Nanyi teacher ES6 Introductory notes-Chapter One