ES六、ES七、ES8語法總結

ES6

1. var let const

    let,const具備塊級做用域，不具備變量提高

    const 用於不能被從新賦值的變量

2. 箭頭函數

    咱們常常要給回調函數給一個父級的this

    經常使用辦法就是 var self = this 定義一個變量接住他

    使用 箭頭函數，this 將不會受到影響,能夠直接用this調用父級的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.解構

    結構數組：

        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. includes

 

    代碼:

        let array = ['1','2','3']

        if(array.includes('2')){

            console.log('有')

        }

2. 指數操做符

    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)

        })

原文連接：https://www.jianshu.com/p/f8145c799456