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

ES6的新增

新增的声明关键字：let和const
- let和const
  1. 没有提升
  2. 不允许重复声明
  3. 块级作用域
  4. 暂时性死区
  5. 全局变量，不会绑定window
- const
  1. 不允许修改地址，可以改变值
    - 作为常量使用
    - 注意：复杂数据和一般数据的区别
箭头函数
- 基础语法
```
var sayHello = (name)=>"hello"+name;
sayHello("张三");
```
- 特点
  0. 类似于无名函数，只能作为值使用
  1. 没有自己的this
  2. 有且只有一个参数时，可以省略小括号
  3. 有且直接返回数据时，可以省略花括号和return
  4. 当，有且直接返回对象时，并，省略花括号和return时，需要将对象使用小括号括起来
  5. 语义化不好，伤害了代码的可读性
  6. 不能new
  7. 小范围的作为返回值，参数，值使用，比较方便
函数的默认参数
- 在函数定义时的小括号中，可以给形参赋值，赋的这个值，就是当前参数的默认值
```
function fn(a="456"){
    // a = a || "123";
    console.log(a);
}
fn();
fn("hello");
```
解构赋值
- 解开结构，单独赋值
- 数组
  - 数组是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是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";
```
模板字符串
- 回顾单双引号字符串的特点
  - 不允许换行，如果要换行，必须每行都是完整的字符串，还得用+连接
- 字符串的新的表达方式：反引号：`
  - 允许换行
  - 可以不用+号拼接，在反引号内，使用${}包裹变量
  - 也可以使用+号拼接，只是没必要了
- 如：
```
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;
```

展开运算符

展开运算符必须在能够接收多个数据的位置使用

展开数组，要在能够接收多个数据时使用

传参，合并数组

// 快速实现数组合并
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);

对象的简单写法
- 当对象的value是变量，且key和这个变量重名时，可以缩写
- 当对象的value是函数时，可以直接：函数名(){}
```
var name = "admin";
var age = 18;
var obj = {
    name,
    age,
    fn(){
        console.log(this.name)
    }
}
console.log(obj)
obj.fn()
```