ECMAScript6基础学习教程（四）函数
ES6在函数方面有很多扩展，其中最为大众所知的就是箭头函数。除此之外，还有很多其他新特性，比如，参数默认值，Rest参数和扩展运算符......下面将一一介绍。
1. 箭头函数
ES6运行用=>定义函数，格式如下：
//ES5
var foo = function (x) {
return x*x;
}
//ES6
var foo = (x) =>{
return x*x;
}
//可以简写为
var foo = (x)=>x*x;箭头函数用=>代替关键字function。如果函数代码块只有一条语句，那么，可以省略函数大括号{}和关键字return。
箭头函数最大特点，就是函数没有**this**对象，因此，箭头函数有如下特点：
- 箭头函数不能用作构造函数
- 箭头函数不能使用
call(), apply(), bind()方法 - 不可以使用
arguments对象 - 箭头函数中如果调用
this，那么this指向函数定义时所在对象的this变量。
var test = function(){
setTimeout(()=>{
console.log(this.id);
}, 100)
}
// 箭头函数定义在test方法中，而调用test的对象为{id:1}，因此test函数的this对象指向{id:1}
// 那么，箭头函数中的this，也同样指向{id:1}
test.call({id: 1}); // 12.函数参数默认值
类似解构赋值，函数参数也可以定义默认值，同样，用?===undefined来判断是否参数值为空。
function log(x="hello", y="world") {
console.log(x+ " " + y);
}
log(); // "hello world"
log("Hi"); // "Hi world"
// null不会被判断为空值
log(null, "javascript"); //"null javascript"在ECMAScript6基础学习教程（三）变量的解构赋值文章中，曾经提到在函数中应用解构赋值，这里再次温习一遍。
function test({a=1, b=2, c=3}) {
console.log(a+b+c);
}
test({c:4}); // 7
test({a:5, b:5}); //133. 函数的rest参数
函数的rest参数格式为function(...args)或，function(x, y, ...args)，args为数组，保存的是函数剩余变量（注意：rest参数必须是函数最后一个参数，这点和数组解构赋值里面的...用法类似）。
function add(factor, ...args) {
let total = 0;
args.forEach((item)=>{
total += item;
});
return total * factor;
}
add(2, 1, 2, 3, 4, 5); // 304. 扩展运算符
扩展运算符，格式也是...，它将一个数组转为用逗号分隔的参数序列。
最常见的使用场景，就是调用函数。
比如上面的add函数，我们可以如下调用：
var args = [2, 1, 2, 3, 4, 5];
add(...args); // 30与rest参数不同，扩展运算符可以不是最后一个参数。比如，还可以如下调用add函数：
var args = [1, 2, 3, 4];
add(1, ...args, 5); // 30还可以利用扩展运算符合并数组或者对象（是一种复制操作，为浅拷贝）：
// 合并数组
var array1= [1,2];
var array2= [3,4];
var array = [...array1, ...array2]; // [1,2,3,4]
// 合并对象
var obj1 ={a: 1, d: 5, f: {g: 6}};
var obj2 ={a:2, b:3, c:4};
// 后面参数对象的属性，可能会覆盖前面对象的属性，如下，属性a被覆盖
var obj = {...obj1, ...obj2}; // obj === { a: 2, d: 5, f: { g: 6 }, b: 3, c: 4 }
// 改变源对象的值
obj1.f.g = 10;
// 查看obj，发现值同步改变
console.log(obj); // { a: 2, d: 5, f: { g: 10 }, b: 3, c: 4 }小结
最容易混淆的就是函数"rest参数"和"扩展运算符"，两者功能正好相反：
- 前者将参数序列转为数组，后者将数组转为参数序列
function test(...args) {
return [1, 2, 3, ...args];
}
test(4, 5, 6, 7); // [1, 2, 3, 4, 5, 6, 7]本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录