ES6 let, const keyword
let keyword, newly added in ES6.
// let can be used to declare variables
let x;
let x,y,z,i;
// let can directly declare and assign initial values
let a=1;
let q=123,w='123',e=[];
// Note:
// 1.let variables cannot be declared repeatedly
// (prevent the repetition of variable names and prevent variables from being polluted)
// Error demonstration:
let a=1;
let a=2;
// var variables can be declared repeatedly
var x=1;
var x=2;
Block level scope, newly added in ES6. Before ES6, there are global scope, function scope and eval.
// 2. Block level scope (only valid in code block, other scopes are invalid) global, function, eval
// If let is used to declare variables, the block level scope is only valid in {} after if else while for (valid in the loop body).
{
let a=1;
}
// console.log(a);// An error is reported. A has not been defined
{
var a=1;
}
console.log(a);//var does not have a block level scope, so var is declared in the global scope. Output 1
What is variable promotion? (implicit variable promotion)
Is to collect variables before code execution.
var and function have variable promotion.
let, const and object do not have variable promotion.
① // There is no variable promotion
console.log(b);//An error is reported. This variable is not allowed to be used before the variable declaration
let b=2;
② // var has variable promotion (will be given an initial value - undefined)
console.log(c);//No error will be reported and undefined will be output
var c=3;
//The specific steps of var variable promotion are as follows:
<script/>
// The variable is promoted to the front of the global scope
// Is given an initial value of undefined
// A variable is declared. If there is no assignment, the initial value of the variable is undefined
var a;
console.log(a);//undefined
a = 1;
</script>
const defines constants
- Declare variable
- Initial value must be assigned
- General constants use uppercase (hidden rule)
- The value of a constant cannot be modified
- Constants are block level scopes
- The modification of array and object elements does not count as the modification of constants, and no error will be reported
Arrays and objects change the save address
ES6 allows you to extract values from arrays and objects according to a certain pattern and assign values to variables, which is called deconstruction assignment.
-
Deconstruction of arrays
//Deconstruction of arrays let family=['Page','George']; let [one,two]=family; console.log(one);//Page console.log(two);//George -
Deconstruction of objects
// Deconstruction of objects
const student={
name:'Zixuan',
sex:'female',
good:function(){
console.log('Zixia Fairy')
}
}
let {name,sex,good}=student;
console.log(name);
console.log(sex);
console.log(good);
good();
// let {good}=student;
// good();
ES6 introduces a new way to declare strings: backquote ` ` (template string)
- For declaration
- Line breaks can appear directly in the content
- Backquotes can be used directly in the content without string splicing. Simple and practical
- Variable splicing ${}
let a=`123`;
console.log(a);//123
//It can be spliced better
let b=`Maybe it will be different,`;
console.log(`${b}It may hurt`);//Maybe it will be different, maybe it will hurt
ES6 allows variables and functions to be written directly within braces, which is more concise as the attributes and methods of objects
(if the attribute name and attribute value are the same, you can omit the attribute value and write the attribute name directly. The effect is the same.)
let name="Xi Shi";
let sex="female";
let player=function(){
console.log('One of the four beauties');
}
console.log(player);
const play={
// name:name,
// sex:sex,
//Optimize ES6 NEW
name,
sex,
// msg:function(){
// console.log(123);
// }
//Optimize ES6
msg(){
console.log(123);
}
}
console.log(play);
ES6 allows you to define functions using arrow functions (= >)
Declarative function-Call function
// General function
let fn=function(){}
// Arrow function
let fn1=(a,b)=>{
return a-b;
}
// Call function
let result=fn1(5,2);
console.log(result);//3
This of the arrow function is static. This always points to the value of this under the scope where the function is declared (no matter what method is used). The arrow function does not have its own this point
//Declare functions and variables
function msg(){
console.log(this,name);
}
let msg1 = () => {
console.log(this,name);
}
//Set the name property of the window object
window.name='good';
const person={
name: 'happy',
}
//Direct call
//Call variables and functions (point to the name attribute of the window object)
// msg();// good
// msg1();// good
//The call method can be called to change the point of this within the function.
msg.call(person); // good (point to the name attribute of the window object)
//The value of the arrow function has not changed. It is still the name value of window. Note that this of the arrow function is static, no matter what method is used to call it.
msg1.call(person); // happy (refers to the value of this under the scope where the function is declared)
- Arrow functions cannot be instantiated as construction objects
- Arrow functions cannot use the arguments variable. (arguments is used to hold arguments)
- Abbreviation of arrow function (omitting parentheses and curly braces)
// Omit parentheses when there is only one formal parameter
let msg=i => {
return i+i;
}
console.log(msg);//i => {return i+i;}
//Omit curly braces. When there is only one statement in the contemporary code body, return must be omitted
// And the execution result of the statement is the return value of the function
// let msg1=(i) =>{
// return i-i;
// }
let msg1=i => i-i; // In line with the upstairs, so omit the parentheses
console.log(msg1);//i => i-i
The arrow function is suitable for callbacks that have nothing to do with this, timers, and array methods
The arrow function is not suitable for this related callbacks, event callbacks, and object methods