ES6新特性小结

ES6新特性

1.let 和 const

     /* 
        1.let var const 变量
        const一般在require一个模块的时候用或者定义一些全局常量。
        let 变量，块作用域，不能重复声明覆盖
        var 变量，函数作用域，能重复声明覆盖
      */
     aaa2(){
   
        this.bb();
       const a=2;
       a=3;
       console.log(a,"11111");
       /* 
         TypeError: Assignment to constant variable.
       */
     },
      bb(){
   
        var a=[1,2];
        for(let i=0;i<a.length;i++){
   
           console.log(i,"111");
        }
        console.log(i, "222");
        for (var i = 0; i < a.length; i++) {
   
          console.log(i, "333");
        }
        console.log(i, "444");
        /* 
          0 "111"
          1 "111"
          undefined "222"
          0 "333"
          1 "333"
          2 "444"
        */
      },

2.变量的解构赋值

1.数组的解构赋值

 b1(){
   
            // 1.前后模式匹配
            var [a,b,c]=[1,3,6];
            console.log(a,b,c);  // 1 3 6
            var [a,[b,[[c]]]]=[1,[2,[[4]]]];
            console.log(a, b, c); // 1 2 4

            // 2.前多后少
            var [a,b,c]=[2,3];
            console.log(a, b, c); // 2 3 undefined
            var [[a,[b]],c]=[[1,[]],4];
            console.log(a, b, c);  // 1 undefined 4

            // 3.前少后多
            var [a,b] = [2,3,1];
            console.log(a, b); // 2 3
            var [,,c]=[2,3,1];
            console.log(c); // 1
            var [...a]=[2,3,1];
            console.log(a);  //  [2, 3, 1]

            // *** 解构时，如果等号右边是不可遍历的，则会报错 *****
            // var [a, b] = 1;
            // var [a, b] = null;
            // var [a, b] = {};
            // var [a,b]=true;
            // var [a,b]=NaN;
            // var [a, b] = undefined;
            // console.log(a); // TypeError: X is not iterable

            // 4.带默认值 
            // 先结构赋值，没有值的话再使用默认值
            var [a=3,b,c]=[1,2,3];
            console.log(a,b,c); // 1 2 3
            var [a = 3, b, c] = [, 2, 3];
            console.log(a,b,c);  // 3 2 3
          },

2.对象的解构赋值

 b2(){
   
            var {
   a,b}={
   b:1};
            console.log(a, b, "2222222222");  // undefined 1 "2222222222"
            var {
    a: name, b: value } = {
    a: 1, b: 2 };
            console.log(name, value)      // 1 2
            var {
   a:name,b:value}=[1,2];
            console.log(name, value, "111111111")   // undefined undefined "111111111"
            var {
   0:name,1:value} = [1,2]; // 数组是一个特殊的对象  [1,2] 效果等同于 {0:1,1:2}
            console.log(name, value);          // 1 2
            // 通过解构，我们可以很容易的把对象的方法复制给变量。
            const {
   log} = console;
            log("aaaaa");      // aaaaa
            const {
   log:name1} = console;
            name1("name");      // name
          },

3.字符串的解构赋值

 // 因为字符串具有length这个属性，因此我们还可以对该属性进行解构赋值：
          b3(){
   
            const [a,b,c,d,e,f]="future";
            console.log(a, b, c, d, e, f);    // f u t u r e
            let {
   length:aa}="future";
            console.log(aa)                   // 6
          },

4.数字以及布尔值的解构赋值

 // 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象，
          // 但是等号右边为undefined 和 null时无法转为对象，所以对他们进行解构赋值时，都会报错
          b4(){
   
            let {
   toString:s}=123;
            console.log(s);        // ƒ toString() { [native code] }
            // let { prop: x } = null;
            // console.log(x);       // TypeError: Cannot destructure property 'prop' of 'null' as it is null.
          }, 

5.函数参数的解构赋值

 b5(){
   
            function aa([a,b,c]) {
   
              return a+b-c;
            };
            console.log(aa([2,3,1]),"434");

            function bb([a, b, c]=[2,3,0]) {
   
              return a + b - c;
            };
            console.log(bb([5, 4, 2]));     // 7
            console.log(bb([5, 4]));        // NaN
            console.log(bb([]));            // NaN
            console.log(bb());              // 5

            function cc({
   x,y}={
   x:3,y:5}) {
   
              return x+y;
            }
            console.log(cc({
    x: 4, y: 6 })); // 10
            console.log(cc({
    x: 4 }));      // NaN
            console.log(cc({
   }));            // NaN 
            console.log(cc());              // 8

            function dd({
    x=3,y=6 }) {
   
              return x + y;
            }
            console.log(dd({
    x: 4, y: 7 })); // 11
            console.log(dd({
    x: 4 }));      // 10
            console.log(dd({
   }));            // 9 
            // console.log(dd());              // TypeError: Cannot read property 'x' of undefined
          },

6.解构的用途

b6(){
   
            // 1.交换变量的值
            function aa(x,y) {
   
              [x,y]=[y,x];
              console.log(x,y);
            };
            aa(5, 7);    // 7 5

            // 2.函数只能返回一个值，如果想返回多个值，需要将它们放在数组或对象里返回
            function bb() {
   
              return {
   a:1,b:2}
            }
            let {
   a,b}=bb();
            console.log(a,b);

            // 3.函数参数的定义
            //参数是一组有次序的值
            function cc([x, y, z]) {
   
              return x + y + z;
            }
            cc([2,3,5])
            console.log(cc([2,3,5])); // 10
            //参数是一组无次序的值
            function