ES6 learning

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