Var and let/const
-
Var and let are used to declare variables, and const is used to declare read-only constants.
-
Variables declared by var have no block-level scope and are valid globally. Variables declared by let and const are valid only in their block-level scope.
-
Let and const are not “promoted” like var, so var defines variables that can be used first and declared later. Let and const can only be declared first and then used.
-
Variables declared by lets have temporary dead zones, that is, as long as a LET exists in a block-level scope, the variables declared by it are bound to this zone and are no longer affected by external influences.
-
Let does not allow the same variable to be declared repeatedly in the same scope.
-
The const command has two notes:
Const must be assigned immediately after the declaration or an error will be reported
Const simple types cannot be changed once declared,
The e addresses to which Pointers to complex types (arrays, objects, etc.) point cannot be changed; the internal data can be changed.
2. Block level scope
Why do you need block-level scopes?
ES5 has only global and functional scopes, not block-level scopes. This leads to a lot of irrational scenarios:
(1) Inner variables may overwrite outer variables
(2) Loop variables used to count are leaked as global variables
let
//ES6
var me = 'l';
(function (me) {
var hello = function () {
return 'hello'
}
console.log(`${hello()}!${me}`)/ / hello! l
var me = 'f'
console.log(`${hello()}!${me}`)/ / hello! f
function hello() {
return 'hello'
}
})(me);
Copy the codeconst
const A = {a:1.b:4}
const B ={b:2}
const C = {c:3}
const D = Object.assign(A,B,C)
// Merge the values of three objects, repeat the attributes of the previous one, return the merge result to A, A was modified.
console.log(D)//{ a: 1, b: 2, c: 3 }
D.d = 4
console.log(D)//{ a: 1, b: 2, c: 3, d: 4 }
console.log(A)//{ a: 1, b: 2, c: 3, d: 4 }
Copy the code2 What is the difference between arrow functions and ordinary functions?
The arrow function this points to the rule:
- The arrow function has no prototype, so the arrow function itself has no this
- The arrow function’s this points to this, which inherits from the first normal function in the outer layer when it is defined.
- If the arrow function has no normal function outside, its this refers to the window(global object) in both strict and non-strict modes.
- The arrow function’s own this pointer cannot be changed, but can modify the this of the object it inherits from.
Arguments for arrow functions:
The 1 arrow function this points to global, using arguments raises an undeclared error.
When the arrow function’s this points to a normal function, its argumens inherit from the normal function
Arrow function without constructor:
Calling an arrow function with new returns an error because the arrow function has no constructor
Arrow functions do not support new.target
Arrow functions do not support renaming function arguments. Function arguments of normal functions support renaming
Arrow functions have a more concise and elegant syntax than normal functions
Precautions of arrow function and not applicable scenarios
Note for arrow functions:
Arrow function a statement that returns an object literal, parenthesized
Arrow functions cannot break lines between arguments and arrows
Arrow function resolution order relative | |
Not applicable: unexpected this pointing of the arrow function and code readability.
var myObject = {
myName : 'JULY'.func:function () {
var self = this
console.log(this.myName)//JULY
console.log(self.myName);//JULY
(function () {
console.log(this.myName)//undefined
console.log(self.myName)//JULY} ()); (() = >{
console.log(this.myName
)//JULY
console.log(self.myName)//JULY}) (); } } myObject.func()Copy the code3 Template String
// Template string
let name = 'july'
let str1 = 'This is a string.'
let str3 = 'This is one${name}String `
console.log(str3)// This is a July string
Copy the code4 structure assignment and extension operators
Structure assignment
import {add,sum} from 'common.js'// Instead of summing up the two methods in common.js into two variables add,sum, for my use.
Copy the codelet arr = [1.2.3]
/*let a = arr[0]
let b = arr[1]
let c = arr[2]*/
// Structure assignment
let [a,b,c] = [1.2.3]
Copy the code
const obj = {
name:'july'.age:14
}
/*
let name = obj.name
let age = obj.age
*/
// Structure assignment
let {name,age} = obj
Copy the codeExtended operator
let arr1 = [1.2.45.6.7]
let arr2 = [...arr1,7.8.9]
console.log(arr2)//[1, 2, 45, 6,7, 7, 8, 9]
Copy the codefunction demo(. args) {
console.log(args)//[1, 24, 6, 8]
}
demo(1.24.6.8)
Copy the code
5 Class: Classes and Class inheritance
/ / class declaration
class Person1 {
constructor(name,age,gender) {
this.name = name
this.age = age
this.gender = gender
}
say(){
console.log(this.name)
console.log(this.age)
console.log(this.gender)
}
}
class Student extends Person1{
constructor(name,age,gender,school) {
super(name,age,gender);
this.school = school
}
study(){
console.log(this.school)
}
}
const s = new Student('tom'.23.'male'.'Tsinghua University')
console.log(s)//Student {name: 'Tom ', age: 23, gender: 'male', school:' Tsinghua University '}
s.say()
s.study()Tsinghua University
Copy the code6 JSON serialization and deserialization
let pp = JSON.stringify(p)
console.log(pp)//{"name":"sam","age":10,"gender":"male"}
let o = JSON.parse(pp)
console.log(o.name)//sam
Copy the code7 Modular Programming
//one.js
let name = 'sam'
let age = 20
function add(x,y) {
return x+y
}
export {name,age,add}// Partial export
export class Person {// An export
constructor(){}say(){
console.log('test')}}Copy the code//index.js
import {add} from "./one"
import {add as mul} from "./two"
console.log(add(10.30))
console.log(mul(2.4))
import {Person} from "./one";// An import
const p = new Person()
p.say()
import * as one from "./one"// Import together
console.log(one.add(2.5))
Copy the code