ES6

ES6引入了块级作用域（花括号之间就是一个块，比如if/else语句，或者单单的一个{}）

1、变量声明：let const

let不存在预解析，只能先声明再使用
let声明的变量不允许重复（在同一个作用域内）

const用来声明常量---》声明的时候必须初始化，并且值不能再被修改
const也不存在预解析，const的变量名大写

2、变量的解构赋值

    同时声明多个变量

    let [a, b, c] = [1,2,3]; --->数组的解构赋值
    console.log(a, b, c);   // --->1 2 3
      可有默认值：let [a = 4, b, c] = [1,2,3]; 

    let {name, age} = {name: 'hq', age: 21}; --->对象的解构赋值
    console.log(name, age); // --->hq 21
      可有默认值：let {name = 'jialing', age} = {name: 'hq', age: 21};

    let [i, ii, iii] = 'jia';  --->字符串的解构赋值
    console.log(i, ii, iii);// --->j i a
      可有默认值：let [i , ii, iii = 'cc'] = 'ji';  

3、字符串的扩展

  （1）相关方法
    includes();
    startsWith();
    endsWith();

    includes();--> 判断某字符串中是否包含指定的字符串                
    let str1 = 'hello';
    let str2 = 'llo';
    console.log(str1.includes(str2));

    startsWith();--> 判断某字符串是否以指定的字符串开头
    console.log(str1.startsWith(str2));

    endsWith();--> 判断某字符串是否以指定的字符串结尾
    console.log(str1.endsWith(str2));

    （2）模板字符串
    let obj = {
        name: 'heqing',
        age: 21,
        sex: 'male'
    }
    将对象中的内容拼接到html格式的字符串中
    以前做法
    let h = '<div><span>'+obj.name+'</span><span>'+obj.age+'</span><span>'+obj.sex+'</span></div>'
    console.log(h);//输出：<div><span>heqing</span><span>21</span><span>male</span></div>

    使用模板字符串--->使用 `` 来包含内容，通过 ${} 来填充数据，里面也可以进行运算，甚至是函数调用（相当于在全局作用域中）
    let h2 = `
        <div>
            <span>${obj.name}</span>
            <span>${obj.age}</span>
            <span>${obj.sex}</span>
        </div>
    `;
    console.log(h2);

下面输出的是上头的 模板字符串 方式拼接的字符串(因为把这个放到上面引起格式不对，就放这里了)
// 输出：------>有一定的格式
<div>
  <span>heqing</span>
  <span>21</span>
  <span>male</span>
</div>

4、函数扩展

--------------1、参数默认值
ES5
function fn(a) {
    a = a || '我是默认值';
    console.log(a);
}
fn(0);如果没有传入参数或者传入0的话，结果就变成了'我是默认值'，不是我们指定的值

ES6
function fn(a = '我是默认值') {
    console.log(a);
}
fn();   //-> 我是默认值
fn(0); // -> 0
fn(11); // -> 11


--------------2、参数解构赋值 
function fn({name, age} = {name: 'hq', age: '33'}) {
    console.log(name, age);
} 


---------------3、rest参数(剩余参数)
function fn(a, b, ...param) {
    console.log(a, b, param);
}
fn(2,3,4,5,2);  // 2 3 [4, 5, 2]
把剩余的参数放在 param形成数组

 ----------------4、扩展运算符 ... 
与剩余运算符相反，他是把数组中的元素展开
function fn(a, b, c, d) {
    console.log(a+b+c+d);
}
var arr = [2,4,1,4];
fn(...arr); // --->输出 11

例子演示，合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1, ...arr2];  //相当于把 arr1 和 arr2 中的元素展开然后放进去
console.log(arr); // [1, 2, 3,  4, 5, 6]

------------------5、箭头函数
第一个
function fn(a) {
    console.log(a);
}
------>等价于
let fn = (a) => {console.log(a);}

第二个 关于返回值
(1). let fun1 = ()=>1+2 //执行后结果 3 
(2). let fun2 = () => {1+2} //执行后结果 undefined 
(3). let fun3 = () => {return 1+2 } // 执行后结果 3 
总结：如果箭头后有{ }，则{}内有return 则返回return后的值，没有 则返回undefined 
如果箭头后没有{ }如第一种简写写法，其实是return 1+2

第三
（1）箭头函数不可以new
（2）箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替，如：
  let fn = (...param) => {
    console.log(param);  //打印参数列表
  }
  fn(1,2,3,4); // [1, 2, 3, 4]
（3）箭头函数中的this取决于函数的定义，不是调用
（箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this）
注意：通过 call 或 apply 调用箭头函数，第一个参数并不起作用

5、一个新增的数据类型(Symbol)

Symbol：表示独一无二的值（具体值是多少，我们无法知道，但就是独一无二的值，不可能和其他值相同），他是一种类似于字符串的数据类型
var x = Symbol('我是独一无二的x');// -->里面可以写参数，但没有什么作用
var y = Symbol();
console.log(x, y, typeof x, x === y, x instanceof Symbol); //Symbol(我是独一无二的x) Symbol() "symbol" false false

// 作用：如果我们定义一个对象，并且不想让其他人按照常规的方式（对象名.属性名）修改这个对象某个属性，就可以使用Symbol类型的变量作为属性值
var student = {
    name: 'hq',
    age: '21',
    [x]: '永远最帅', //--->这里使用了上头定义的变量 x 作为属性名，x的值是独一无二的(所以如果把变量名作为属性名需要用 '[]' 引起来)
    sex: 'male'
}
console.log(student[x]); //--->访问的时候student 和 [x]之间没有点
// 修改[x]属性的值
student[x] = '庆哥是无比的帅啊';
console.log(student[x]);    
// 注意：并不是说使用Symbol类型的变量作为属性，属性值就不能修改了，而是我们不能通过常规的方式来修改。
// 常规情况下我们给对象添加属性：student.x = '好帅',而修改属性名为Symbol变量：student[height] = '确实很帅'，所以我们对象的某个属性不想被修改就可以使用Symbol类型的变量，这样别人就知道这个属性是不想被修改的