js-es6(变量的声明方式以及解构赋值、箭头函数、模板字符串、展开运算符)

ES6的新增

1. 新增的声明关键字：let和const

   • let和const
     1. 没有提升
     2. 不允许重复声明
     3. 块级作用域
     4. 暂时性死区
     5. 全局变量，不会绑定window
   • const
     1. 不允许修改地址，可以改变值
        • 作为常量使用
        • 注意：复杂数据和一般数据的区别

2. 箭头函数

   • 基础语法

     var sayHello = (name)=>"hello"+name;
     sayHello("张三");
     

   • 特点
     0. 类似于无名函数，只能作为值使用
     1. 没有自己的this
     2. 有且只有一个参数时，可以省略小括号
     3. 有且直接返回数据时，可以省略花括号和return
     4. 当，有且直接返回对象时，并，省略花括号和return时，需要将对象使用小括号括起来
     5. 语义化不好，伤害了代码的可读性
     6. 不能new
     7. 小范围的作为返回值，参数，值使用，比较方便

3. 函数的默认参数

   • 在函数定义时的小括号中，可以给形参赋值，赋的这个值，就是当前参数的默认值

   function fn(a="456"){
       // a = a || "123";
       console.log(a);
   }
   fn();
   fn("hello");
   

4. 解构赋值

   • 解开结构，单独赋值
   • 数组
     • 数组是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined

     var [a,b,c] = ["hello","world",123];
     

   • 对象
     • 对象是数据的无序集合，所以在解构赋值时，变量之间没有顺序，找到对象中的key 了，就赋值，没有找到就是undefined

     var {name,sex,age} = {name:"张三",age:18,sex:1}
     

   • 字符，因为字符类似于数组
     • 字符也算是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined

     var [a,b,c] = "hello";
     

5. 模板字符串

   • 回顾单双引号字符串的特点

     • 不允许换行，如果要换行，必须每行都是完整的字符串，还得用+连接

   • 字符串的新的表达方式：反引号：`

     • 允许换行
     • 可以不用+号拼接，在反引号内，使用${}包裹变量
     • 也可以使用+号拼接，只是没必要了

   • 如：

     var str = `<ul>
                 <li>"${name}"</li>
                 <li>'${name}'</li>
                 <li>${name}</li>
                 <li>${1+1}</li>
                 <li>${fn()}</li>
                 <li>${false ? "hello" : "wrold"}</li>
             </ul>`;
     console.log(str);
     var obox = document.getElementById("box");
     obox.innerHTML = str;
     

6. 展开运算符

   • ...
   • 展开运算符必须在能够接收多个数据的位置使用
     • 展开数组，要在能够接收多个数据时使用
       • 传参，合并数组

       // 快速实现数组合并
       var arr2 = [2,3,4,arr];
       var arr2 = [2,3,4,...arr];
       console.log(arr2);
       // 函数的参数
       function fn(a,b,c){
           console.log(a,b,c)
       }
       fn(...[3,4,5]);
       

     • 展开对象，要在能够接收多个键值对时使用
       • 合并对象

       var obj = {
           name:"admin",
           age:18
       }
       var obj2 = {
           sex:"男",
           ...obj
       }
       console.log(obj2);
       

7. 对象的简单写法

   • 当对象的value是变量，且key和这个变量重名时，可以缩写
   • 当对象的value是函数时，可以直接：函数名(){}

   var name = "admin";
   var age = 18;
   var obj = {
       name,
       age,
       fn(){
           console.log(this.name)
       }
   }
   console.log(obj)
   obj.fn()