ES6
1. var let const
? ? let,const具有塊級作用域推盛，不具有變量提升
? ? const 用于不能被重新賦值的變量
2. 箭頭函數(shù)
? ? 我們經(jīng)常要給回調(diào)函數(shù)給一個(gè)父級的this
? ? 常用辦法就是 var self = this 定義一個(gè)變量接住他
? ? 使用 箭頭函數(shù)，this 將不會受到影響,可以直接用this調(diào)用父級的this
3. 字符串
? ? includes:
? ? ? ? const string = 'food';
? ? ? ? const substring = 'foo';
? ? ? ? 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.解構(gòu)
? ? 結(jié)構(gòu)數(shù)組：
? ? ? ? let [a, b, c, d] = [1, 2, 3, 4];
? ? ? ? console.log(a);
? ? ? ? console.log(b);
? ? 結(jié)構(gòu)對象：
? ? ? ? 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.參數(shù)
? ? es6支持設(shè)置默認(rèn)值：
? ? function addTwoNumbers(x=0, y=0) {
? ? ? ? return x + y;
? ? }
8.rest參數(shù)
? ? 處理不定數(shù)目參數(shù)：
? ? ? ? function logArguments(...args) {
? ? ? ? ? ? for (let arg of args) {
? ? ? ? ? ? ? ? console.log(arg);
? ? ? ? ? ? }
? ? ? ? }
9.展開操作
? ? 可以展示數(shù)組：
? ? ? ? Math.max(...[-1, 100, 9001, -32]);
? ? ? ? let cities = ['San Francisco', 'Los Angeles'];
? ? ? ? let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']
10.類
? ? 創(chuàng)造類:
? ? ? ? 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
? ? 遠(yuǎn)離回調(diào)地獄姆坚，可以轉(zhuǎn)換成垂直代碼
? ? ? ? func1(value1)
? ? ? ? .then(func2)
? ? ? ? .then(func3)
? ? ? ? .then(func4)
? ? ? ? .then(func5, value5 => {
? ? ? ? });
13.Generators
? ? 用同步的代碼風(fēng)格來寫異步代碼
? ? function* genFunc() {
? ? ? ? // (A)
? ? ? ? console.log('First');
? ? ? ? yield; //(B)
? ? ? ? console.log('Second'); //(C)
? ? }
ES7
1. includes
? ? 代碼:
? ? ? ? let array = ['1','2','3']
? ? ? ? if(array.includes('2')){
? ? ? ? ? ? console.log('有')
? ? ? ? }
2. 指數(shù)操作符
? ? 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)
? ? ? ? })
