ES6新语法

1. let关键字
   let关键字就是用来声明变量的
   特性：
   使用let关键字声明的变量具有块级作用域( 块级作用域：一对大括号使用let关键字声明的变量才具有块级作用域)
   使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具有块级作用域
   可防止循环变量变成全局变量

// -------------------
if(true){
    let a = 10;
    var b = 11;
}
console.log(a); // a is not defined
console.log(b); // 10

let关键字声明的变量没有变量的提升：必须先声明，再使用
let关键字声明的变量具有暂时性死区特性

var num = '123';
if(true){
    console.log(num);  // num is not defined.
    var num = 'abc';
}

2. const 关键字
   声明常量，常量就是值（内存地址）不可以变化的量
   var let 变量 = 可以变化的
   const 常量 = 不可以变化的
   特性：
   具有块级作用域
   声明常量时必须赋值
   常量赋值后，值不能修改
   规范：const声明的常量名应该用大写的，多个单词之间用_连接：const BASE_URL = “…”;

3. 解构赋值
   ES6中允许从数组中提取值，按照对应的位置，对变量赋值。对象也可以实现解构。
   （解构赋值：解除结构，重新赋值）
   3.1 数组解构
   数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量
   解构不成功，变量的值为undefined

let ary = [1,2,3];
let [a,b,c,d,e] = ary;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined
console.log(e); // undefined

3.2 对象解构
对象解构允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋值给变量

let person = {name:'zhangsan',age:'20'};
let {name,age} = person;
console.log(name); // 'zhangsan'
consoloe.log(age); // 20


let {name:myName,age:myAge} = person;  // myName myAge 属于别名
console.log(myName); // 'zhangsan'
consoloe.log(myAge); // 20

4. 箭头函数
   ES6中新增的定义函数的方式
   4.1 箭头函数基础语法
   作用：简化函数定义语法的
   语法：

() => {}
const fn = () => {}

特点：
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

// 原始写法：
function sum(n1,n2){
    return n1 + n2;
}
// 箭头函数：
const sum = (n1,n2) => n1 + n2;

如果形参只有一个，小括号可以省略
// 原始写法：
function fn(v){
    return v;
}
// 箭头函数：
const fn = v => v;

// 例：调用ajax请求的时候回调函数时可以使用箭头函数
$.post('http://www.baidu.com',{},function(res){...})
// 箭头函数
$.post('http://www.baidu.com',{},res => {...})

4.2 this指向
箭头函数不绑定this，箭头函数没有自己的this关键字，如果再箭头函数中使用this，this关键字将指向箭头函数定义位置的上下文this

function fn(){
    console.log(this); // {name:'zhangsan'}
    return () => {
        console.log(this) // {name:'zhangsan'}
    }
}
const obj = {name:'zhangsan'};
const resFn = fn.call(obj);
resFn();

// 因为箭头函数不绑定this，指向的是箭头函数定义位置的this，
//  而此时是定义在fn里面，fn的this指向obj，所以箭头函数这里的this也是指向obj

5. 剩余参数
   …（三个点）：接受剩余所有参数
   剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

const sum = (...args) => {
    let total = 0;
    args.forEach(item => total += item);
    return total;
}
console.log(su,(10,20)); // 30
console.log(sum(10,20,30))  // 50

补：foreach 循环数组

数组名.forEach(function(item,index){
    console.log('值：'+ item + '索引' + index);
})

// 箭头函数

数组名.forEach((item,index) => {
})

6. 扩展运算符
   扩展运算符（展开运算符）可以将数组或者对象拆分成以逗号分割的参数序列

let ary = ["a","b","c"];
console.log(...ary);  // 相当于console.log("a","b","c");  
// 输出 a b c

可用于数组合并

// 1. 方法一
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...lay2];
console.log(ary3)  // [1,2,3,4,5,6]
// 2. 方法二
ary1.push(...ary2);

将伪数组转换成真正的数组

let oDivs = document.getEelementsByTagName('div');  // 得到伪数组
var ary = [...oDivs];
console.log(ary);  // 真数组

7. 模板字符串
   ES6新增的创建字符串的方式，使用反引号定义

let name = `zhangsan `;

特性：
模板字符串可以解析变量

<script type="text/javascript">
    let name = `张三`;
    let sayHello = `Hello,我的名字叫${name}`;
    console.log(sayHello); // Hello,我的名字叫张三
</script>

模板字符串可以换行

let result = {
    name:'张三',
    age:20,
    sex:'男'
}
let html = `<div>
    <span>${result.name}</span>
    <span>${result.age}</span>
    <span>${result.sex}</span>
</div>`

在模板字符串中可以调用函数

const fn = () => {
    return '我是fn函数'
}
let html = `我是模板字符串 ${fn()}}`;
console.log(html);

8. 参数默认值

function add(num1,num2){
    return num1 + num2;
}
add(1,0);  // 用户觉着0没有意义

// -----------------------
function add(num1,num2 = 0){  
 // 相当于 var num = 0
 // num = 1;  // 如果传进来参数，那就是传进来的参数，如果没有传，那就用默认值0
    return num1 + num2;
}
add(1);