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相同,使用大括号{}
    console.log(age,name,xxx); //39 "kobe" undefined

（2）数组的解构赋值

    let arr = ['abc', 23, true]; 
    let [, b, c, d] = arr;  //使用中括号[],可以使用占位空的，还是按顺序获得数组下标对应的值
    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