前言：本篇主要学习es6的箭头函数、函数参数默认值设置、rest参数、扩展运算符。
一、箭头函数及其声明特点
1.1声明一个函数
//老方法去声明函数
let fn =function(){
}
//用箭头函数去声明函数
let fn(a,b) => {
//变量可以放在小括号里面
return a+b;
}
//调用函数
let result = fn(1,2);
console.log(result);
1.2箭头函数的特点
（1）this是静态的，this始终指向函数声明时所在作用域在的this的值。
function name(){
console.log(this.name); //普通函数
}
let name1 = () =>{
console.log(this.name); //箭头函数
}
//设置window对象的name属性
window.name = '小仙女';
const cute = {
name:'大可爱';
}
//直接调用
name(); //输出小仙女
name1(); //输出小仙女
//call方法调用
name.call(cute); //输出大可爱
name1.call(cute); //输出小仙女
（2）不能作为构造实例化对象
即箭头函数不能定义为构造函数。只要是函数就能当做构造函数，加箭头除外。
let Book = (name,price) => {
this.name =name;
this.price = prince;
}
let mine = new Book('newbook','20'); //构造函数
console.log(mine);
像上面那样书写会报错。
（3）不能使用arguments变量
在函数里面是可以使用arguments变量来保存实参的，但是在箭头函数里面不能使用，会报错。
（可以使用rest参数）
let fn = () =>{
console.log(arguments);
}
fn(1,2,3); //报错
1.3箭头函数的简写
（1）省略小括号，当形参有且只有一个的时候
let add = n =>{
return n+n;
}
（2）省略花括号，当代码只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
let pow = n => n*n;
console.log(pow(9));
1.4箭头函数的一些个小例子
(1) 点击盒子2s后颜色变成绿色
<body>
<div id='box'></div>
<script>
let box = document.getElementById('box');
box.addEvenListener("click",function(){
setTimeout(()=>{
this,background = 'green';
//因为箭头函数的this是静态的，这里指向的是全局
},2000);
})
</script>
</body>
<style>
#box{
width:200px;
height:200px;
background:red;
}
</style>
（2）从数组中返回偶数元素
const arr = [1,2,3,6,7,8,9];
//老方法
const result = arr.filter(function(item){
if(item%2===0)
return true;
else
return false;
});
//箭头函数方法
const result = arr.filter(item => item%2===0);
总结：
- 箭头函数适合与this无关的回调。定时器，数组方法的回调。
- 箭头函数不适合与this 有关的回调。事件回调，对象的方法。
二、函数参数的默认值设置
es6允许给函数参数赋初始值
1、形参初始值，具有默认值的参数，一般位置要靠后（潜规则）
function add(a,b,c=9){
return a+b+c;
}
let result = add(1,2) //这里会使用c的默认值，结果为12
2、与解构赋值结合
function book({
name='我们仨',price,height,width}){
console.log(name);
console.log(price);
console.log(height);
console.log(width);
}
book({
price:'78',
height:'90',
width:'90'
})
如果后来不赋值，就使用初始值；赋值则优先使用后来的赋值的内容。
三、rest参数
es6引入rest参数，用于获取函数的实参，用来代替arguments
在前面加三个点再写入实参变量
function name(...args){
console.log(args);
}
name('小明'，'小花','熊二'); //形式是以数组的形式出现，故可以使用数组的一些特性，如filter，some，every，map等
//rest 参数必须要放到最后
function fn(a,b,...args){
console.log(a);
console.log(b);
consoloe.log(args);
}
fn(1,2,3,4,5,6);
四、扩展运算符
【…】扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组
const name = ['小明','小花','小王'];
//声明一个函数
function people(){
console.log(arguments);
}
people(...name);
扩展运算符应用
1、数组的合并
const name = ['王源','王俊凯'];
const team = ['tfboys'];
const zueh = [...name,...team];
console.log(zuhe);
2、数组的克隆
const zimu = ['A','B','C'];
const zuhe = [...zimu]; //['A','B','C'];
console.log(zuhe);
3、将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);