JS的ES6的基礎語法

JS的ES6

1.let

 let age = 12; 

（1）. 作用:

• 與var類似, 用於聲明一個變量

（2）. 特點:

• 在塊作用域內有效

• 不能重復聲明

• 不會預處理, 不存在提升

（3）. 應用:

• 循環遍歷加監聽

• 使用let取代var是趨勢

2.const

 const sex = '男'; 

（1）. 作用:

• 定義一個常量

（2）. 特點:

• 不能修改

• 其它特點同let

（3）. 應用:

• 保存不用改變的數據

3.解構賦值

（1）對象的解構賦值：從對象的屬性中取到想要的屬性值 

    let obj = {name : 'kobe', age : 39};
    //對象的解構賦值
    let {name,age,xxx} = obj;  //定義的變量要與屬性key相同,使用大括號{} 4     console.log(age,name,xxx); //39 "kobe" undefined

（2）數組的解構賦值

    let arr = ['abc', 23, true]; 
    let [, b, c, d] = arr;  //使用中括號[],可以使用占位空的，還是按順序獲得數組下標對應的值 3     console.log(b, c, d); //23 true undefined

用處：簡化傳參

    let obj = {name : 'kobe', age : 39};
    
    function person1({name, age}) {
     console.log(name, age);
    }
    person1(obj);

4.模版字符串

模板字符串必須用 `` 包含，變量用${xxx}

    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年齡是：' + obj.age); //我叫:anverson, 我的年齡是：41

    console.log(`我叫:${obj.name}, 我的年齡是：${obj.age}`); //我叫:anverson, 我的年齡是：41

 5.簡寫的對象寫法：

• 省略同名的屬性

• 省略方法function以及前面的：

    let x = 3;
    let y = 5;
    //普通額寫法
//    let obj = {
//        x : x,
//        y : y,
//        getPoint : function () {
//            return this.x + this.y
//        }
//    };
    //簡化的寫法
    let obj = {
        x,  //為外部的x
        y,  //為外部的y
        getPoint(){  //省略：function
            return this.x
        }
    };
    console.log(obj, obj.getPoint());  //Object 3

6.三點運算符

又稱：rest參數

作用：用來取代arguments 但比arguments靈活

限制：

• 只能是最后部分形參參數。

• 只能遍歷數組，不能遍歷對象。

    //作為形參，是真實的數組可以遍歷
    function fun(...values) {
        console.log(arguments);
//        arguments.forEach(function (item, index) {
//            console.log(item, index);  //報錯，arguments是偽數組不能遍歷
//        });
        console.log(values);
        values.forEach(function (item, index) {
            console.log(item, index);
        })
    }
    fun(1,2,3);

    //將一個數組插入到另一個數組
    let arr = [2,3,4,5,6];
    let arr1 = ['abc',...arr, 'fg'];
    console.log(arr1); //'abc' 2 3 4 5 6 'fg'

7.形參的默認值

作用：當不傳入參數的時候默認使用形參里的默認值

    //定義一個點的坐標
    function Point(x=12, y=12) {
        this.x = x;
        this.y = y;
    }
    let point = new Point(25, 36);
    console.log(point);  //25 36
    let point2 = new Point(); 
    console.log(point2);  // 12 12

8.箭頭函數

又稱：lambda表達式[和Java的差不多,但符號是=>]

        //1.普通寫法
        let fun = function () {
            console.log('fun()');
        };
        fun();
        //2.沒有形參，並且函數體只有一條語句
        let fun1 = () => console.log('fun1()');
        fun1();
        console.log(fun1());
        //3.一個形參，並且函數體只有一條語句
        let fun2 = x => x;
        console.log(fun2(5));
        //4.形參是一個以上
        let fun3 = (x, y) => x + y;
        console.log(fun3(25, 39)); //64

        //5.函數體有多條語句
        let fun4 = (x, y) => {
            console.log(x, y);
            return x + y;
        };
        console.log(fun4(34, 48)); //82

特殊點在this:

箭頭函數的this看外層的是否有函數，

• 如果有，外層函數的this就是內部箭頭函數的this.

• 如果沒有，則this是window。

箭頭函數在定義時就確定了！！！使用call，apply，bind都不能綁定this。

一般函數得看誰調用他，this就是誰，可以使用call，apply，bind。

    <button id="btn">測試箭頭函數this_1</button>
    <button id="btn2">測試箭頭函數this_2</button>

        setTimeout(() => {
            console.log(this); //window
        }, 1000)

        let btn = document.getElementById('btn');
        //沒有箭頭函數
        btn.onclick = function () {
            console.log(this); //btn
        };
        //箭頭函數
        let btn2 = document.getElementById('btn2');

        let obj = {
            name: 'kobe',
            age: 39,
            getName: () => {
                btn2.onclick = () => {
                    console.log(this); 
                };
            }
        };
        obj.getName(); //window


        function Person() {
            this.obj = {
                showThis: () => {
                    console.log(this); 
                }
            }
        }
        let fun5 = new Person();
        fun5.obj.showThis(); //Person

        var name = "windowname";
        var oo = {
            name:"outname",
            ll :{
                inname : "inname",
                f : () => console.log(this),
                ff(){
                    console.log(this);
                }
            }
        }

        var obj4 = {
            name : "name"
        }

        oo.ll.f(); //window
        oo.ll.ff(); //調用它的ll ==> Object {inname: "inname"}
        oo.ll.ff.call(obj4); //obj4 ==>Object {name: "name"}
        oo.ll.f.call(obj4); //綁定不了還是window