ES6
1. Use of let
1. methods for declaring variables (let and const)
let and const commands are new syntax in es6
Function: it is used to declare variables that have the same function as var, but the declared variables are only valid in the code block where the let command is located
Difference:
1.let can be re assigned within the agreed scope but cannot be declared repeatedly
2.const declares that constants cannot be redeclared or reassigned after declaration.
[note]
1. block level scope {}
2. no claim promotion
3. repeated declaration is not allowed (including ordinary variables and function parameters)
Variable binding
//1. Variables declared by a let only work within the scope of the let (variable binding)
var a = 123;
if(true){
a = 456;
console.log(a);
Proceed below let statement
let a;
}
Local scope (function keyword)
//Generally, if we need a variable to work within the specified scope, we need to use the function keyword to build a local scope
(function(){
var a = 1;
}())
console.log(a);
Block level scope
//However, in the case of ES6, it is introduced that a block level scope can be formed as long as {} exists for the let, whether it is an if structure or a for loop structure, as long as {} exists
//A block level scope is formed
{
let s = 8;
}
console.log(s);
The problem of variable promotion for var declaration variables
//Requirement: print the current time in real time during function call
//If the var declaration {} in the if structure cannot form a block level scope, the variable declaration in the if structure will overwrite the global variable declaration
//So the printed undefined
//Solution: use let to declare variables in the if structure to form a block level scope in the if structure
var time = new Date();
function fn(){
console.log(time);
if (false) {
//var time = "tomorrow is the Dragon Boat Festival";
let time = "Tomorrow is the Dragon Boat Festival";
}
}
/*function fn(){
var time;
console.log(time);
if (false) {
time = "Tomorrow is the Dragon Boat Festival ";
}
}*/
fn();
//(3) Leakage of loop variables into global variables in the for loop
for(var i = 0;i<5;i++){
setTimeout(function(){
console.log(i);
},1000)
console.log(111);
}
console.log(123);
A major feature of js language:
A single thread does only one thing at a time
Task queue:
All tasks need to be queued up before the first task can be executed
Event cycle:
The main thread will repeatedly fetch the task from the task queue to read the task (Event Loop). When an asynchronous task is completed or an event is triggered
Then the corresponding callback function or function body will be pulled to the main thread for execution
2. Deconstruction assignment
What is deconstruction?
We generalize it as follows: according to a certain pattern, extract values from arrays and objects, and assign values to variables.
Moreover, in essence, deconstruction assignment is pattern matching.
Here is an example:
//Basic assignment method:
var a = 1,b = 2, c = 3 ;
var a = 1 ;
var b = 2 ;
var c = 3 ;
//Destructuring assignment
var [a,b,c] = [1,2,3];
console.log(a,b,c);//123
In other words, if you want to successfully deconstruct the assignment, you must ensure that the patterns on both sides are exactly the same.
Well, here comes the problem. What if the deconstruction fails??
let [r] = []; console.log(r);//undefined means that var does not assign values after declaring variables var a;
Well, our conclusion is: if the deconstruction is unsuccessful, the value of the variable is equal to undefined
At this point, we still need to know what is__ Incomplete deconstruction?
Incomplete deconstruction: it means that the patterns on the left and right sides of the equal sign are the same, but only part of the data on the right is matched
For example:
let [x,y] = [1,2,3]; console.log(x,y);
Therefore, we will find that the deconstruction assignment can also be performed in the case of incomplete deconstruction, except that the array with the following values has more numbers
In addition, we should also note that if the right side of the equal sign is not an array, an error will be reported because the modes are different
// let [m] = 1;
// let [m] = false;
// let [m] = null;
// let [m] = {};
// Console Log (m)// {} is not iteratable because {} cannot iterate with Subscripts
What about the deconstruction assignment of objects?
let {a,b} = {a:" aaa" ,b:" bbb" };//a=aaa ,b=bbb
let {a:b} = {a:" aaa" };//a=aaa
let{a,b= 5}= {a: 1};//a=1,b=5
[summary of points needing attention]:
1. the default value can be set for the deconstruction assignment. However, if the default value is to be enabled, the value of this variable must be strictly equal to undefined
2. if the default setting is an expression, the expression will only operate when the default value needs to be enabled
3. other variables can be used for the default value, but the precondition is that the assigned variable must be declared in advance
3. Template string
var stu = {
name : "lisa",
age : 12,
place : "Wuhan, Hubei",
grade : 6
}
document.querySelector("p").innerHTML = "My name is" +stu.name+",This year"+stu.age+"Years old, I live in"+stu.place+",Last year"+stu.grade+"grade";
document.querySelector("p").innerHTML = "My name is" +stu.name+",This year"+stu.age+"I live in"+stu.place+",Last year"+stu.grade+"grade";
Disadvantages of splicing strings:
1. the splicing is too troublesome and needs to be divided for many times, which is not convenient for maintenance
2. all spliced strings can only be displayed on one line, which is too long
So in ES6, we use the template string.
So, how to use the template string?
1. embed variables or expressions directly into strings
2. use backquotes (``) to splice multiline strings
Embedded variable
let obj = {"name" :"john","age":20};
let{name,age} . obj;
console . log( `${name }My age is ${age}` );
Embedded expression (using the previous case)
//You can put any js expression in ${} for operation
function age (num){
return num -1;
}
document.querySelector("p").innerHTML = `My name is ${stu.name},This year ${stu.age}Years old, I go ${stu.grade -1},I live in ${stu.place}`;
4. Arrow Function
[note]
1. only 1 expression is included
2. contains multiple statements
3. The direction of this
ES5
/*var foo = function(){
return 1 ;
}
console. log(foo());*/
ES6
let foo=()=>1;
let foo = (a)=>{
let b=10;
return a+b;
}
console . log(foo(10));//20
5. set structure and map structure
set structure
let set = new Set([1,2,3,4,4]);
Constructor, no duplicate values
| element | meaning |
|---|---|
| [...set] | ... extend the operator to convert a class array object to a comma separated sequence |
| for of | ergodic |
| set.size | length |
| set.add(0) | Add a new element |
| set.delete(0) | Delete an element |
| set.has(0) | Indicates whether the current element contains an element |
| set.clear() | Empty structure |
keys (): the traverser that returns the key name
for (let item of set.keys()) {
console.log(item);
}
values(): the iterator that returns the key value
entries(): returns the traversal of key value pairs
forEach (): use the callback function to traverse each member
set.forEach((value, key) => console.log(value * 2));
map structure
let map = new Map([["name","john"]，["age",30]]); map.set(1,1);
Map Size / / length
map.set(key,value);
map.get(key);
map.delete(key);
map.has(key);
map.clear();
keys(): the traverser that returns the key name
values(): the iterator that returns the key value
entries(): returns the traversal of key value pairs
for (let [key, value] of map.entries() ){ console.log(key, value); }
forEach(): use the callback function to traverse each member
map.forEach((value, key) => console.log(value*.2))