ES6学习笔记——函数扩展
箭头函数
传统写法：
function fn1(a, b) {
return a + b;
}
console.log(fn1(1, 2)); //输出结果：3
箭头函数：
var fn2 = (a, b) => {
console.log('haha');
return a + b;
};
console.log(fn2(1, 2)); //输出结果：3
从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体
- 如果有且仅有1个参数，则()可以省略
- 如果方法体内有且仅有1条语句，则{}可以省略，但前提是，这条语句必须是 return
例如var fn2 = (a, b) => a + b;
箭头函数this指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1{
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
var d1 = document.querySelector("#d1");
d1.onclick = function(){
//传统，this指向windows，无法改变颜色
setInterval(function(){
console.log(this);
this.style.backgroundColor = `rgb(${
parseInt(Math.random()*255)},${
parseInt(Math.random()*255)},${
parseInt(Math.random()*255)})`;
},1000)
//箭头函数，this指向div#d1，正常改变颜色
setInterval(()=>{
console.log(this);
this.style.backgroundColor = `rgb(${
parseInt(Math.random()*255)},${
parseInt(Math.random()*255)},${
parseInt(Math.random()*255)})`
},1000)
}
</script>
</body>
</html>
ES5 中，this指向的是函数被调用的对象
而 ES6 的箭头函数中，this指向的是函数被定义时；
简单来说，箭头函数中的this，是不会变的，是永远绑定在当前的环境下
参数默认值
传统写法：
function fn(param) {
let p = param || 'hello';
console.log(p);
}
ES6 写法：
function fn(param = 'hello') {
console.log(param);
}
在 ES6 中定义方法时，我们可以给方法里的参数加一个默认值（缺省值）：
- 方法被调用时，如果没有给参数赋值，那就是用默认值
- 方法被调用时，如果给参数赋值了新的值，那就用新的值
var add = (a,b=2) => {
return a+b;
}
console.log(add(1));//输出3:1+2
console.log(add(2,5));//输出6:2+5
注意1：
默认值的后面，不能再有没有默认值的变量。比如(a,b,c)这三个参数，如果我给b设置了默认值，那么就一定要给c设置默认值
var add = (a,b=2,c) => {
return a+b+c;
}
console.log(add(1));//输出NaN
console.log(add(2,5));//输出NaN
注意2：
{
let x = 'vue';
function fn(x, y = x) {
console.log(x, y);
}
fn('js');//输出 js js
}
{
let x = 'vue';
function fn(z, y = x) {
console.log(z, y);
}
fn('js');//输出 js vue
}
扩展运算符
扩展运算符的格式为 …
ES6中，当我们在定义一个方法，但是不确定其参数的个数时，我们就可以用扩展运算符作为参数
例如：
function fn(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}
fn(1, 2, 3);
上方代码中，因为方法的参数是三个，但使用时是用到了四个参数，所以会报错
扩展运算符：
扩展运算符的格式为…
案例一：
function fn(...arr) {
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr);
}
fn(1, 2, 3);
方法中定义了四个参数，但只引用了三个参数，ES6 中并不会报错
上方代码中注意，arg参数之后，不能再加别的参数，否则编译报错
案例二：
var a1 = [1,'前端',true];
var a2 = [...a1];
console.log(a2);
可以用作复制函数
如果直接使用
let arr2 = arr1;
则 arr1 改变时，arr2 的值也会改变；
因为上述代码只是让 arr2 指向 arr1 的内存地址
而使用扩展运算符得到的新数组则不会因为所复制的数组改变而改变
rest 运算符
function fn(first, second, ...arg) {
console.log(arg.length);
}
fn(0, 1, 2, 3, 4, 5, 6); //调用函数后，输出结果为 5
上方代码的输出结果为 5。
调用fn()时，里面有七个参数，而arg指的是剩下的部分（因为除去了first和second）
从上方例子中可以看出，rest运算符适用于：
知道前面的一部分参数的数量，但对于后面剩余的参数数量未知的情况