ES6
-
Change variables
let const
2. Add the string method
let str = 'react';
str.includes('re') // true
str.repeat(3) // reactreactreact
str.startsWith ( 're') // true, to find the location of the parameter 2
str.endsWith ( 'p', 4) // true, the parameter is a string looking 2
3. key-value pairs the same name shorthand
function people(name, age) {
return {
name,
age
};
}
4. The object literal shorthand
getName () {// omit the colon (:) and function keywords
the console.log (this.name)
}
The objects are merged
Object.assign({}, obj1, ob2);
6. rest parameter data and deconstruction
const people = {
name: 'cs',
age: 25
}
const { name, age } = people; // 'cs', 25
// array deconstruction
const ARR = [. 1,. 3,. 4];
const [A, B, C] = ARR; //. 1,. 3,. 4
// rest parameters, returns an object
const {obj = A: 2, B:. 3, C:. 4, D:. 5};
const {A, ...} REST = obj; B // 2 {:. 3 , c: 4, d: 5 }
7. Expand Data
// expand the object (above Object.assign (), just as object consolidation)
const {obj = A: 2, B:}. 3
the console.log (obj {..., C:. 5}); // {A 2, B:. 3, C:. 5}
// expand the array
const ARR = [. 1,. 3,. 4]
the console.log ([... ARR,. 5]); // [. 1,. 3,. 4,. 5]
8. Promise
// resolve、reject的使用
function getNum() {
const randomNum = Math.ceil(Math.random() * 10);
return new Promise((resolve, reject) => {
if (randomNum > 5) {
resolve('大于5');
} else {
reject('小于5');
}
})
}
getNum().then((result) => {
console.log('success', result);
}).catch((err) => {
console.log('err', err);
});
9. Set
// add Set commonly used methods and properties instance, Delete, Clear, has, size
const new new the Set S = ([ 'A', 'B', 'C']);
the console.log (S); {// the Set 'A', 'B', 'C'}
the console.log (s.has ( 'A')) // to true, BOOL value of
the console.log (s.size). 3 //
the console.log (s.clear ( )) {} // the Set
the console.log (s.delete ( 'A')) // to true, BOOL value
const a =[1, 2, 3]
const b = [2, 3, 4];
// 并集
const s = Array.from(new Set([...a, ...b])); // [ 1, 2, 3, 4 ]
// 交集、差集
const bSet = new Set(b);
const interestSet = a.filter(v => bSet.has(v)); // [ 2, 3 ]
const interestSet = a.filter(v => !bSet.has(v)); // [ 1 ]
ES7
1. exponentiation operator (**)
Math.pow(3, 2) === 3 ** 2 // 9
2. Array.prototype.includes()
[1, 2, 3] .indexOf (3)> -1 // true
is equivalent to:
[. 1, 2,. 3] .includes (. 3) to true //
SS8
1. async, await an asynchronous solution
There are two proposed scenarios: JS is single-threaded, optimized writing callback hell.
the this. http.jsonp $ ( '/ Login', (RES) => {
the this. http.jsonp $ ( '/ getInfo', (info) => {
// do something
})
})
In order to solve the callback ES6 writing mode, then the function is introduced Promise, business logic lot of time, then a plurality of functions required chain, become very clear semantics.
new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })
Generator function emerged, it is just a segment tasks by next state pointers distribution tasks, but less convenient process management (not clear when to execute each stage), so it is only an intermediate product.
Gen function * = const () {
const F1 = the yield () this.login
const F2 = the yield this.getInfo ()
};
in ES8 the async and await more convenient, it is actually a syntactic sugar Generator. async / await a new way to write asynchronous code, the previous method callback function and Promise. Compared to Promise, it is more concise, and error handling, conditional statements, obtaining an intermediate value is more convenient.
asyncFunc function async (the params) {
const = RESULT1 the await this.login ()
const = result2 the await this.getInfo ()
}
If you want to know the specific time async can see Ruan Yifeng's blog es6.ruanyifeng.com/#docs/ async
2. Object.entries()
It can be enumerated attribute value of an object which will be returned in a two-dimensional array. (If the target object is an array, the array index will be returned as the key)
Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
Object.extries([1, 3]) //[['0', 1], ['1', 3]]
3. Object.values()
It works and Object.entries () method like, but it only returns the value of the key, the result is a one-dimensional array
Object.values({one: 1, two: 2}) // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a']
Object.extries([1, 3]) //[1, 3]
4. String filled padStart (), padEnd ()
ES8 filling provides a new string, the method may be such that the string reaches a fixed length. It has two parameters, the string length, and the target filling contents.
'react'.padStart(10, 'm') //'mmmmmreact'
'react'.padEnd(10, 'm') //' reactmmmmm'
'react'.padStart(3, 'm') // 'react'