目录
一、解构赋值
解构指的是分解数据结构，赋值指的是一一为变量赋值
ES6中允许我们按照一一对应的规则从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
1.数组解构
let [a, b, c] = [1, 2, 3]; //等号左边的[]不代表数组，而是代表解构，[]中写的其实是变量的名字
//[]中的值和等号右边的变量是一一对应的关系，let关键字代表，[]中的变
//量是let声明的
console.log(a);
console.log(b);
console.log(c);在ES6之前，要使用arr[0],arr[1]...，要重复声明多次变量
<script type="text/javascript">
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); //1
console.log(b); //2
console.log(c); //3
</script>如果解构不成功（变量的数量和值的数量不一致），变量的值为undefined
let [foo] = []; // foo为undefined
let [bar, foo] = [1]; //bar是1 foo 是undefined<script type="text/javascript">
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
let arr = [1, 2, 3];
let [a, b, c, d, e] = arr;
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //undefined
console.log(e); //undefined
</script>2. 对象解构
{}里的是对象的名字，=右边的{}里写的是具体被解构的对象，对象解构实际上是属性匹配，变量的名字匹配属性中对象的名字，如果匹配成功就将属性的值赋值给变量
let person = { name: 'zhangsan', age: 20};
let { name, age} = person;
console.log(name); //'zhangsan'
console.log(age); //20在ES6之前，获取对象中属性的值要通过person.name、person.age。。。需要重复声明多次变量
<script type="text/javascript">
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = { name: 'lisi', age: 20, sex: '男' };
let { name, age, sex } = person;
console.log(name);
console.log(age);
console.log(sex);
</script> 
对象解构的另一种写法
这种写法支持变量名和属性名不一样
let {name:myName, age: myAge} = { name: 'lisi', age: 20, sex: '男' }; //myName myAge属于别名
console.log(myName); //zhangsan
console.log(myAge); //20另一种写法，=左边的{}里的内容写成和对象语法一样，用来匹配=右边的属性，：右边的才是变量（比如myName），如果匹配成功，就将属性值赋值给：右侧的变量
<script type="text/javascript">
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = { name: 'lisi', age: 20, sex: '男' };
let { name: myName, age: myAge } = person; //name只起到匹配的作用
console.log(myName); //lisi
console.log(myAge); //20
</script>二、箭头函数
ES6中新增的定义函数的方式，更简便的定义函数
() => {}
const fn = () => {}()是放形参的地方，{}是函数体，通常将箭头函数赋值给一个变量，通过这个变量调用函数
<script type="text/javascript">
const fn = () => {
console.log(123); //123
}
fn();
</script>- 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
普通的函数定义
function sum(num1, num2) {
return num1+ num2;
}
const sum = (num1, num2) => num1 + num2;<script type="text/javascript">
// const sum = (a, b) => {
// return a + b; //函数体中只有一句，而且执行结果就是函数的返回值，那么return可以省略，
//{}也可以省略
// }
//等同于以下代码
const sum = (a, b) => a + b;
const result = sum(10, 20);
console.log(result); // 30
</script>- 如果形参只有一个，可以省略小括号
function fn (v) {
return v;
}
const fn = v =>v; //这里由于只有一个参数所以省略()，又因为函数体中只有一句并且执行结果是函数的返回
//值所以省略{}<script type="text/javascript">
// const fn = (v) => {
// alert(v);
// }
// fn(20);
// 等价于以下语句
const fn = v => {
alert(v);
}
fn(20);
</script>
2.箭头函数的this关键字
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this，即箭头函数被定义在哪儿，这个this就指向哪儿
const obj = {name: '张三'};
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const resFn = fn.call(obj); //call()改变this的指向 指向obj对象
resFn();
分析：定义了一个常量obj，内容是对象，一个传统函数fn，返回一个匿名函数，是用箭头函数定义的，通过call()方法，改变fn函数中this的指向（一般是谁调用这个函数就指向谁），指向obj，于是fn()里的第一句输出 this就是指向obj。 然后再将fn函数的返回值，也就是那个匿名函数赋值给resFn，就可以通过resFn()调用匿名函数了。
然后，调用resFn()时，虽然相当于调用了window下的resFn()，按理来说当前的this应该指向window，但是因为这个匿名函数是用箭头函数定义的，箭头函数自身没有this，this指向的是当前函数定义的位置的this的指向，就是这个匿名函数被定义在了fn()里，这个this指向的和fn()的this的指向一样，都指向obj
3.箭头函数面试题
<script type="text/javascript">
var obj = {
age: 20,
say: () => {
alert(this.age);
}
};
obj.say();
</script>
分析：由于箭头函数不绑定this，所以这里的this指向函数存在的位置obj对象，而obj是一个对象，不能产生作用域，所以这个箭头函数实际上是被定义在了全局作用域下，this指向的是window，而window对象里没有age这个属性，所以undefined
如果在去全局作用域下定义一个age属性。。。。。。。
<script type="text/javascript">
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age);
}
};
obj.say();
</script>
注意：对象是不产生作用域的
三、剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
当实参的个数大于形参个数时，可以将剩余实参放到一个实参数组中
function sum(first,...args) {
console.log(first); //10
console.log(args); //[20,30]
}
sum(10,20,30);
<script type="text/javascript">
const sum = (...args) => { //...表示接收所有剩余的参数
let total = 0;
args.forEach(item => total += item) //参数item是每一次循环的当前项
return total;
}
console.log(sum(10, 20)); //30
console.log(sum(1, 2, 3, 4, 5)); //15
</script>2.剩余参数和解构一起使用
剩余参数和解构配合使用
let students = ['wangwu','zhangsan','lisi'];
let [s1,...s2] = students;
console.log(s1); //'wangwu'
console.log(s2); // ['zhangsan','lisi']