What is let in es6

In es6, let is a keyword used to declare variables; this keyword is only valid in the declared code block. An error will be reported outside the specified code block, and there is no scope promotion. Repeated declarations are allowed, and there is a temporary dead zone. The syntax is "let name=value;".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is let in es6

let is a command in es6 to declare a variable. It is only valid in the code block in which it is declared. If this code block is left, an error will be reported. It is also very suitable for for loops. The value of i in the loop only takes effect in the loop statement and cannot be obtained outside.

The var command declares a global variable, i points to the global variable, and only the last value will be output. Let only takes effect in the loop statement block. Each loop will re-declare an i, so the corresponding value can be obtained every loop.

The variable in the for loop is the parent scope and is not in the same scope as the variable (child scope) defined by let in the loop body.

For example:

//1.在自身所在代码块中有效
{
    let a = 1;
    var b = 2;
}
console.log(b); // 2
console.log(a); // a is not defined
//2.在for循环语句块中有效
for(var i=0;i<10;i++) {
    //...
}
console.log(i); // 10
for(let j=0;j<10;j++) {
    //...
}
console.log(j); // j is not defined
var arr = [];
for(var a=0;a<10;a++) {
    arr[a] = function () {
        console.log(a);
    }
}
console.log(a[4]); // 10
for(let b=0;b<10;b++) {
    arr[b] = function () {
        console.log(b);
    }
}
console.log(b[4]); // 4
// 3.for循环的变量和循环体内的变量
for(var i=0;i<10;i++) {
    let i = &#39;fed&#39;;
    console.log(i);
}
/*
* 结果是
*   fed
*   fed
*   fed
*/

let command does not have scope promotion

The var command will have scope promotion. Before it is declared, it is undefined. If it is not declared, there will be a default Worth it. Variables defined by let must be used after declaration.

console.log(fa); // undefined
var fa = 1;
console.log(fb); // fb is not defined
let fb = 2;

let has a temporary dead zone

The "temporary dead zone" (TDZ) refers to the provisions of ES6, if there are let and const commands in the block , the variables declared by these two commands have formed a closed scope. Variables declared before this will report an error.

For example: A global variable is declared below, but let declares another variable in the block-level scope.

var food = 'apple';
if(typeof 'str' == 'string') {
    food = 'banana'; // Uncaught ReferenceError: food is not defined
    let food;
    console.log(food); // undefined
    food = 'orange';
    console.log(food); // orange
}

Note: There will be some bad things about the temporary fourth area.

Typeof detection is unsafe

typeof x; // Uncaught ReferenceError: x is not defined
let x;

Duplicate declarations are not allowed

In short, it is not allowed to declare two identical variables in the same scope.

For example:

{
    let a = 1;
    var a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
// 或者
{
    let b = 1;
    let b = 2; // Uncaught SyntaxError: Identifier 'b' has already been declared
}

Note: Parameters cannot be declared repeatedly within function parameters, otherwise an error will be reported.

function wait(x,y) {
    let x = 1; // Uncaught SyntaxError: Identifier 'x' has already been declared
    let y = 2; // Uncaught SyntaxError: Identifier 'y' has already been declared
}
wait(3,5);

Top-level object

Before ES6, the properties of top-level objects were consistent with global variables, which led to many problems.

Only by running can errors be caught, and errors cannot be detected from the beginning.

Top-level objects can be read and written at any time and anywhere, so they are not conducive to modular programming.

window actually refers to the browser window, and the top-level object has an entity meaning.

So es6 has improved one thing, that is, global variables declared by let and const do not belong to the properties of the top-level object.

For example:

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

Learn what you have learned and apply the let command

As the old saying goes: if you learn, you can use it everywhere; if you don’t learn, it means nothing. So I wrote a small example about let.

This is a case of tabs. Before, we had to define btns[i].index = i, but now it is much more convenient to use the let command.

.tab {
    width: 300px;
    height: 30px;
    border: 1px solid #fff;
}
.tab > span {
    float: left;
    display: block;
    width: 98px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #aaa;
    cursor: pointer;
}
span.active {
    color: #fff;
    background-color: #f00;
    border: 1px solid #f00;
}
.content, .content > p {
    width: 300px;
    height: 300px;
}
.content > p {
    display: none;
    border: 1px solid #aaa;
}
p.active {
    display: block;
}
<div class="tab">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="content">
    <p class="active">1的内容</p>
    <p>2的内容</p>
    <p>3的内容</p>
</div>
let btns = document.querySelectorAll(&#39;.tab span&#39;);
let contents = document.querySelectorAll(&#39;.content p&#39;);
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            btns[j].className = &#39;&#39;;
            contents[j].className = &#39;&#39;;
        }
        this.className = &#39;active&#39;;
        contents[i].className = &#39;active&#39;;
    }
}

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is let in es6. For more information, please follow other related articles on the PHP Chinese website!