This is the first day of my participation in the August Challenge. For details, see:August is more challenging
Review ES6 grammar, ** refer to the introduction of ESCMAScript6 by ruanyifeng teacher es6.ruanyifeng.com/#docs/let**… They add a little bit of their own understanding. After insufficient, still ask many give directions!
1. Let the order
The distinction between let and var
reference
console.log(a) // Uncaught ReferenceError
console.log(b) // undefined
let a
var b
Copy the codeFrom the error report, we can see that the former is a reference error, the latter is undefined because the variable can be promoted
{
let a = 1
var b = 2
}
console.log(b) / / 2
console.log(a) // Uncaught ReferenceError: a is not defined
Copy the codeAgain, because of scope and variable promotion issues, the two results are different.
The for loop
- Var () {var () {var () {var () {var ();
- Let declared arguments that are only used in this loop. Each loop I is a new variable
for(let i = 0; i < 5; i++) {
console.log(i) // 0 1 2 3 4
}
console.log(i) // Uncaught ReferenceError: i is not defined
Copy the codeContrast the var
for(var i = 0; i < 5; i++) {
console.log(i) // 0 1 2 3 4
}
console.log(i) / / 5
Copy the codeVar declaration parameters are promoted to global, and let is better than that.
Let’s do another example
var a = [];
for(var i = 0; i < 5; i++) {
a[i] = function () {
console.log(i)
}
}
a[2] ()/ / 5
Copy the codeIn the above code, we actually wanted to print 2, but since we declared that we were using var, we did not achieve the desired result. Compare this with let
let a = [];
for(let i = 0; i < 5; i++) {
a[i] = function () {
console.log(i)
}
}
a[2] ()/ / 2
Copy the codeWith let, this block-level scope achieves our goal.
The problem of variable promotion
The problem of variable promotion is what we have mentioned in the previous example. Here we know about temporary dead zones
Temporary dead zone
As long as there is a let command in the block-level scope, variables declared by it “bind” the area and are no longer subject to external influence.
In the code block, the current variable cannot be used until the let variable is used, and the ReferenceError is called a temporary dead zone
The following example
var a = 123;
if (true) {
a = 'abc'; // Uncaught ReferenceError
let a;
}
Copy the codeIn the above code, we declare var a = 123 at the top, but use let in the block-level scope, creating a temporary dead zone. Therefore, a reference type error is reported.
Temporary dead zone – function
function bar(x = y, y = 2) {
return [x, y];
}
bar(); / / error ReferenceError
Copy the codeIn the function, there is no let or var before x, but var is the default. However, in the process of assigning y to x, y as the value is currently not declared, so the ReferenceError is reported
Let’s look at the example below
function bar(x = 2, y = x) {
return [x, y];
}
console.log(bar()) / / (2, 2)
Copy the codeDeclare x and assign it, declare y and assign the value of x to y, perfect!
var a = a
let b = b // Uncaught ReferenceError
Copy the codeI’m going to focus on the a’s and the B’s
In A, the var a is automatically generated for the assigned a, but there is no declaration for the assigned B. The whole process should be to get the declaration of the assigned parameter first, then get the value if there is a value, then undefined if there is no value, and then assign the value
Repeated declarations are not allowed
Variable declarations cannot be repeated, and arguments cannot be redeclared inside a function. A SyntaxError is reported for repeated declarations. As the following two
var a
let a // SyntaxError
Copy the codefunction a(b) {
let b
} / / an error
Copy the codeThe following is true
function c(d) {{let d
}
} / / is not an error
Copy the codeBlock-level scope
var a = new Date(a);function b() {
console.log(a) // undefined
if (false) {
var a = 'a'
}
}
b()
Copy the codeLet’s take a look at this example and see why the output is undefined
var a = new Date(a);function b() {
console.log(a) // Sun Aug 01 2021 22:00:25 GMT+0800
// if (false) {
// var a = 'a'
// }
}
b()
Copy the codeSo now we have the outer variables
And then change
var a = new Date(a);function b() {
console.log(a) // undefined
if (true) {
var a = 'a'
}
}
b()
Copy the codeNow you see that it doesn’t matter whether it’s true or false. The real reason is that the inner variable promotion overrides the outer variable.
The following code
var a = new Date(a);function b() {
var a
console.log(a) // undefined
if (true) {
a = '123'
}
}
b()
Copy the codeVariable leak
An example of this problem is the for loop using var we talked about earlier
for (var i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(i); / / 5
Copy the codeBut using let, we can fix this problem
The following
function c() {
let d = 5
if(true) {
let d = 10;
}
console.log(d) / / 5
}
c()
Copy the codeBlock-level scope and function declarations
ES6 introduced block-level scope, explicitly allowing functions to be declared in block-level scope. ES6 states that within the block-level scope, function declarations behave like lets and cannot be referenced outside the block-level scope.
Examples are as follows
if (true) {
function f() {}}try {
function f() {}}catch(e) {
// ...
}
function a() { console.log('Outside')}
(function(){
if(false) {
function a() { console.log('inside')}
}
a()
})() // TypeError: a is not a function
Copy the codeFunctions are allowed to be declared in block-level scope. Function declarations are similar to var declarations, that is, promoted to the head of the global scope or function scope. Also, the function declaration is promoted to the head of the block-level scope in which it resides.
function f() { console.log('I am outside! '); }
(function () {
var f = undefined;
if (false) {
function f() { console.log('I am inside! '); } } f(); } ());// Uncaught TypeError: f is not a function
Copy the codeWithin the block-level scope, function expressions are preferred
{
let a = '1';
let f = function () {
return a;
};
}
Copy the codeConst command
- Const declares a read-only constant. Once declared, the value of the constant cannot be changed.
- If you declare without assigning, you get an error
- Valid only in the block-level scope of the declaration
- Temporary dead zones also exist and can only be used after the declared location.
- Non-repeatable declaration
Here are examples of proof
const b = {}
b.a = 'a'
b = {} // Uncaught TypeError: Assignment to constant variable.
Copy the codeconsole.log(a) // Uncaught ReferenceError
const a = 10
Copy the codeA frozen object can only freeze data of simple types such as string,number, and array
Object property freezing
let constatize = (obj) = > {
Object.freeze(obj)
Object.keys(obj).forEach((key, i) = > {
if(typeof obj[key] === 'object') {
constatize(obj[key])
}
})
}
Copy the codeThe above is all my harvest, shortcomings, also please give advice!