let
Why the new let declaration variable keyword
- Var is not working
- Var can be declared repeatedly
- Var cannot restrict changes
- Var has no block-level scope
Var a = 5 {var a = 10 console.log(a); var a = 10 console.log(a); // 10 } console.log(a); Function test() {var b = 10} function test() {var b = 10} console.log(b); // Uncaught ReferenceError: b is not definedCopy the code
Variables declared using let cannot be declared twice
let a = 10
let a = 20
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
Copy the code
Variables declared in a block-level scope using let are not available externally
{let a = 10 console.log(a) // 10 Internal use} console.log(a) // Uncaught ReferenceError: a is not definedCopy the code
There is no variable promotion in LET
a = 10
console.log(a); // 10
var a
b = 20
console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
let b
Copy the code
const
The declared value of const cannot be changed
const A = 10
A++
console.log(A) // Uncaught TypeError: Assignment to constant variable.
Copy the code
Const must be declared with a value
const A
console.log(A) // Uncaught SyntaxError: Missing initializer in const declaration
Copy the code
Const is only valid in the declared block-level scope
{
const A = 10
console.log(A) // 10
}
console.log(A) // Uncaught ReferenceError: A is not defined
Copy the code
Const declared constants are not promoted
console.log(A) // Uncaught ReferenceError: Cannot access 'A' before initialization
const A = 10
Copy the code
Const, like let, cannot be declared twice
const A = 10
const A = 20
console.log(A) //Uncaught SyntaxError: Identifier 'A' has already been declared
Copy the code
Const a compound type of data (array, object) declared by const, whose value can be changed
Because the declared array or object itself is stored in stack memory, and the values and data in the array or object are stored in heap memory, variable values in heap memory can be changed (addresses in memory cannot be changed, but referenced values can be changed).
const obj = {
'name' : 'haoran',
'age' : 18
}
console.log(obj);
obj.age = 20
console.log(obj.age);
obj = {} // Uncaught TypeError: Assignment to constant variable.
obj = { // Uncaught TypeError: Assignment to constant variable.
'a' : 1,
'b' : 2
}
Copy the code
Arrow Function
The use of arrow functions
Common function
function fun(x){
return x * x
}
console.log(fun(10)) // 100
Copy the code
Using the arrow function
const fun = (x) => {return x * x}
console.log(fun(10)) // 100
Copy the code
If you only have one argument, you don’t have to use ()
A single statement does not require {} or return
const fun = x => x * x
console.log(fun(10)) // 100
Copy the code
If there are no arguments, getting multiple arguments requires using () to define the argument list
// No const fun = () => 10 console.log(fun()) // 10Copy the code
Example: Sort the data in an array from smallest to largest
Let arr = [1,5,36,4,564,125,651,134] // ES5 syntax arr.sort(function(a, b){return a-b}) console.log(arr) // 1, 4,5, Sort ((a, b) => a-b) console.log(arr) // 1, 4, 5, 36, 125, 134, 564, 651Copy the code
Note: When the arrow function returns an object, it must enclose ().
const fun = id => ({id:id, name: 'haoran'})
console.log(fun(10).name) // haoran
Copy the code
Array new advanced methods
There are some values in the array, find the values greater than 10 and discount them by 50%, and calculate the total price after the discount
Let arr = [2, 4, 5, 21, 7, 13, 65, 23, 9, 34] // let arr1 = arr.filter(function (n) { Return n >= 10} console.log(arr1); return n >= 10} console.log(arr1); // 21, 13, 65, 23, Arr2 = arr1.map(function (n) {return n * 0.5}) console.log(arr2); // The first time s is 0, n is the first element in the array (subscript 0) // the second time, Let sum = arr2.reduce(function(s, n){return s + n}) console.log(sum); / / 78Copy the code
There is an easier way: use arrow functions + chained programming
Let sum = arr.filter(n => n >= 10).map(n => n * 0.5).reduce((s, n) => s + n) console.log(sum); / / 78Copy the code
The Set and Map
Set
Const obj = new Set() const obj = new Set() Obj.add (1) obj.add(2) obj.add(2) obj.add(3) obj.add(['a', 'b']) console.log(obj); Console. log(obj.has(1)); // 1 2 3 ['a','b'] // Check whether set has a value, if true, false console.log(obj.has(1)); // true console.log(obj.has(9)); Obj.delete (1) console.log(obj.delete(4)); Return false console.log(obj.delete(3)); Return true console.log(obj); / / 2 [' a ', 'b'] / / get the set the length of the console, log (obj. Size); / / 2Copy the code
Map
Const obj =new Map() // Add data in the form of key-value pairs, specify the key obj. Set ('a','1') console.log(obj); / / Map (1) {" a "= >" 1 "} obj. Set (' b ', '2') obj. Set (' c ', '3') / / get the value through the subscript console. The log (obj. Get (" b ")); Obj.set ('a', '100') console.log(obj.get('a')); Obj.delete ('a') // get the length obj.size()Copy the code
String new features
New string methods
-
What string does startsWith start with
-
EndsWith determines what string endsWith
If (url.startswith (‘ HTTPS ‘)){console.log(‘yes’); // yes }else { console.log(‘no’); } if(url.endswith (‘com’)){console.log(‘yes’); // yes }else{ console.log(‘no’); }
Template string
-
Enhanced string, identified by backquotes (‘)
// Let name = 'haoran' let str1 = name+'shishuaige' console.log(str1); Str2 = '{name} haoshuai' console.log(str2); str2 = '{name} haoshuai' console.log(str2);Copy the code
ES6 Deconstruct assignment and three-point extended operation notation
Deconstruction assignment
Assign values from the array to variables
Let arr = [1, 2, 3] let a = arr[0] let b = arr[1] let c = arr[2]Copy the code
Use destruct assignment
// Let arr = [1, 2, 3] let [a, b, c] = arr console.log(a); // 1 console.log(b); // 2 console.log(c); / / 3 / / object used in the let obj = {' name ':' haoran ', 'age: 18,' sex ': //let {name, age, sex} = obj let {age, name, sex} = {'name': 'haoran', 'age': 18, 'sex': 'male'} console.log(name); console.log(age); console.log(sex);Copy the code
Note: The left and right sides must have the same structure
The variable name of the array can be arbitrary and can receive less than the actual number
Object variable names must be consistent with subscripts, regardless of order,
Three-point operator
How to combine two arrays?
Let arr1 = [1, 2, 3, 4] Let arr2 = [...arr1, 4, 5, 6] console.log(arr2); // [1, 2, 3, 4, 4, 5, 6]Copy the code
Three-point operators can also be used in functions
Let arr3 = [1, 2, 3] function test (a, b, c) {console.log(a); console.log(b); console.log(c); } test(... Function test2 (... arr4) { console.log(arr4); // [1, 2, 3, 4, 5] } test2(1, 2, 3, 4, 5)Copy the code
Class class
Class Person {// The constructor automatically performs constructor(name, age, Sex) {this.name = name this.age = age this.sex = sex} +() say () {console.log(' I am ${this.name} '); Const p1 = new Person('haoran', 18, 'male ') console.log(p1); // Const p1 = new Person('haoran', 18,' male ') console.log(p1); // Person {name: "haoran", age: 18, sex: } p1.say() extends extends (); Class Student extends Person {constructor(name, age, sex, school) {// Super (name, sex, school); Age, sex) this.school = school} say () {console.log('hello, my name is xiaohong'); }} const s1 = new Student('xioahong', 16, 'female ', 'fyjs') // Console. log(s1); // Student {name: "xioahong", age: 16, sex: "female ", school: "fyjs"} s1.say() // Hello, my name is xiaohongCopy the code
JSON object new application
Json shorthand
//const obj = {name:'haoran',age:18,sex:' male '} const obj = {name,age: age1, sex: 'male ', say () {console.log(this.name); }} console.log(obj);}} console.log(obj); // Serialize the JSON object to a string let STR = json.stringify (obj) console.log(STR); Parse (STR) console.log(JSON);Copy the code