ES6 的新增语法：解构赋值（包括数组解构和对象解构）、剩余参数、箭头函数

1、解构赋值

ES6 中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

1.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

// 如果解构不成功，变量的值为undefined
console.log(d); // undefined
console.log(e); // undefined

1.2 对象解构

（1）解构赋值

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。

（2）对象解构

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

// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {
    name: 'lisi',
    age: 30,
    sex: '男'
};
let { name, age, sex } = person;
console.log(name);  // lisi
console.log(age);   // 30
console.log(sex);   // 男

let { name: myName, age: myAge } = person;  // myName myAge 属于别名
console.log(myName);  // lisi
console.log(myAge);  // 30

2、剩余参数

• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

• … 表示剩余参数

// 1. 剩余参数语法允许我们将一个不定数量的参数表示为一个数组
// ...表示剩余参数
const sum = (...args) => {
    let total = 0;
    args.forEach(item => total += item);
    return total;
};
console.log(sum(10, 20));  // 30
console.log(sum(10, 20, 30));  // 60

• 剩余参数和解构配合使用

// 2. 剩余参数和解构配合使用
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1;  // 数组解构
console.log(s1);   // 张三
console.log(s2);   // ["李四", "王五"]

3、箭头函数

ES6 中新增的定义函数的方式。

• 箭头函数是用来简化函数定义语法的

// () => {}
// 1. 箭头函数是用来简化函数定义语法的
const fn = () => {
    console.log(123);
}
fn();

• 在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体大括号可以省略

// 2. 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
// const sum = (n1, n2) => {
//     return n1 + n2;
// }
const sum = (n1, n2) => n1 + n2;
const result = sum(10, 20);
console.log(result);  // 30

• 在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略的

// 3. 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
const fn1 = v => alert(v);
fn1(40);

• 箭头函数不绑定 this 关键字，箭头函数中的 this，指向的是函数定义位置的上下文 this

// 4. 箭头函数不绑定this 箭头函数没有自己的this关键字 
// 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的上下文this
function fn2() {
    console.log(this);
    return () => {
        console.log(this);
    }
};
const obj = { name: 'zhangsan' };
// const resFn = fn2.call();  // this指向 window
// resFn();  // this指向 window
const resFn = fn2.call(obj);   // this指向obj  { name: 'zhangsan' }
resFn();  // this指向obj { name: 'zhangsan' }

// 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
var age = 100;
var obj = {
    age: 20,
    say: () => {
        alert(this.age);  // 此时的this指向的是window
    }
}
obj.say();  // 100