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)); //
 
         //5.函数体有多条语句
         let fun4 = (x, y) => {
             console.log(x, y);
             return x + y;
         };
         console.log(fun4(34, 48)); //

特殊点在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