JavaScript--ES6 explanation

Section 1 let

// ES6 — let

let a = 1;

if (1 === a) {
let b = 2;
}

for (let c = 0; c < 3; c++) {
// …
}

function letsDeclareAnotherOne() {
let d = 4;
}

console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
console.log (c); // ReferenceError: c is not defined
console.log(d); // ReferenceError: d is not defined

// window
console.log(window.a) ; // 1
console.log(window.b); // undefined
console.log(window.c); // undefined
console.log(window.d); // undefined
As we can see, this time only variable a is declared as a global. let gives us a way to declare block scoped variables, which is undefined outside it.

//todo

The uses of let and const are similar to var, both are used to declare variables, but in practical applications they have their own special uses.

demo1
var name = 'shitu91'

if(true) {
var name = 'shituketang'
console.log(name) //shituketang
}

console.log(name) //shituketang
Use var. Both outputs are shituketang. The inner variables you see now cover the outer variables. This is because ES5 only has global scope. (scope) and function scope, there is no block-level scope.

And let actually adds a new block-level scope to JavaScript. The variables declared with it are only valid within the code block where the let command is located.

let name = 'shitu91'
if (true) {
let name = 'shituketang'
console.log(name) //shituketang
}

console.log(name) //shitu91
demo2 Counted loop variables are leaked as global variables
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a6; // 10
In the above code , the variable i is declared by var and is valid in the global scope. So every time it loops, the new i value will overwrite the old value, causing the final output to be the value of i in the last round.
This problem will not occur when using let.

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i );
};
}
a6; // 6
demo3
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < ; clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i)
}

We had hoped The purpose is to click on different clickBoxes and display different i, but the fact is that no matter which clickBox we click, the output is 5. Let's take a look at how to use closures to do it.
function iteratorFactory(i){
var onclick = function(e){
console.log(i)
}
return onclick;
}
var clickBoxs = document .querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i)
}
const Also used to declare variables, but constants are declared. Once declared, the value of a constant cannot be changed.
const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only
When we try to change the const When declaring constants, the browser will report an error. Const has a good application scenario, that is, variables declared when we refer to third-party libraries. Using const to declare can avoid bugs caused by accidental renaming in the future: +

const monent = require( 'moment')
// todo

The variables declared with the let keyword do not have the variable hoisting feature
let and const are declared only in the closest block (within curly braces) Valid
When using a constant const declaration, please use uppercase variables, such as: CAPITAL_CASING
const must be assigned a value at the time of declaration
Let:

New keywords added by ES6 that allow us to change the way we work with variables. JavaScript:

var name = 'Max';
console.log(name;

let new_name = 'Max';
console.log (new_name);
Console:

"Max"
"Max"
Here we see that both let and var do the same thing So what is the difference?

Using let allows us to control variable scoping. JavaScript:

if(true) {
let age = 24; // in the scope of the 'if' statment
}
console .log(age); // not in scope of the 'if' statement
Console:

"error"
"Reference Error: age is not defined
As another example, when using variables in a for loop, the index won't be used outside of the loop anymore!

The above is the detailed content of JavaScript--ES6 explanation. For more information, please follow other related articles on the PHP Chinese website!