ES6
1. var let const
let,const具有块级作用域，不具有变量提升
const 用于不能被重新赋值的变量,声明复合类型常量入对象无法实现，需要使用Object.freeze()
2. 箭头函数
保留父级this指向,可以直接用this调用父级的this
3. 字符串
includes:(查重，类似es5 indexof,符合类型数据慎用，es支持string查重，es7支持array)
const string = 'word';
const substring = 'or';
console.log(string.includes(substring));
返回的是布尔值。
string.repeat(str,count)
如果 string.length < count 即插入str到count == string.length为止
4. 模板字符串
const name = 'Tiger';
const age = 13;
console.log(`My cat is named ${name} and is ${age} years old.`);
5.解构
结构数组：
let [a, b, c, d] = [1, 2, 3, 4];
console.log(a);
console.log(b);
结构对象：
var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation;
var father = luke.father;
let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;
console.log(occupation);
console.log(father);
6.模块
暴露对象：
function sumThree(a, b, c) {
return a + b + c;
}
export { sumThree };
引入：
import { sumThree } from 'math/addition';
7.参数
es6支持设置默认值：
function addTwoNumbers(x=0, y=0) {
return x + y;
}
8.rest参数
处理不定数目参数：
function logArguments(...args) {
for (let arg of args) {
console.log(arg);
}
}
9.展开操作
可以展示数组：
Math.max(...[-1, 100, 9001, -32]);
let cities = ['San Francisco', 'Los Angeles'];
let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']
10.类
创造类:
class Person {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
incrementAge() {
this.age += 1;
}
}
11.Maps
可以理解成键值对
let map = new Map();
map.set('name', 'david');
map.get('name');
map.has('name');
12.Promises
远离回调地狱，可以转换成垂直代码
func1(value1)
.then(func2)
.then(func3)
.then(func4)
.then(func5, value5 => {
});
13.Generators
用同步的代码风格来写异步代码
function* genFunc() {
// (A)
console.log('First');
yield; //(B)
console.log('Second'); //(C)
}
ES7
1. 指数操作符
2**3 == 8
ES8
1. object.entries()
代码:
let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>{
console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})
2.Async Await
异步看起来和同步写法一样
代码:
async fetchData(query) =>{
try {
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
}
catch (error) {
console.log(error)
}
}
fetchData(query).then(data => {
this.props.processfetchedData(data)
})