ES6之函数优化(默认参数、剩余参数、 箭头函数)
默认参数
在ES6之前,我们无法给一个参数设置默认值,我们只能采取变通的写法:
function add(a , b) {
// 判断b是否为空,为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
现在es6可以这么写:
function add(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add(10));
剩余参数
ES6中,当参数个数无法确定时,可以使用剩余参数(rest parameter)来表示,剩余参数就相当于一个容器,调用函数时传入几个参数值,这个容器就装载几个参数值。剩余参数能够将多个独立的参数合并到一个数组中去,剩余参数表示为...keys
,有三个点加上一个具名参数标识符组成。
function fn(...keys){
console.log(keys)
}
fn(11,22,'aa'); // [11, 22, "aa"]
箭头函数
箭头函数相当于匿名函数,并且简化了函数定义。
一个参数时: ()
可以省略
// es5写法:
var print = function (obj) {
console.log(obj);
}
// es6简写为:
var print = obj => console.log(obj);
多个参数: ()
不可省略
// es5两个参数的情况:
var sum = function (a , b) {
return a + b;
}
// es6简写为:
var sum2 = (a,b) => a+b;
没有参数: ()
不可省略
// es5写法:
var sayHello = function () {
console.log("hello!");
}
// 没有参数时,需要通过()进行占位,代表参数部分
var sayHello = () => console.log("hello!");
this指向:
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:
箭头函数内部的this是词法作用域,由上下文确定
var age = 18;
var obj = {
name: '张三',
age: 20,
getAge1() {
var fn = function () {
return this.age // 匿名函数的this指向window
}
return fn()
},
getAge2() {
var fn = () => this.age; // 箭头函数的this总是指向词法作用域,也就是外层调用者obj
return fn()
}
}
alert(obj.getAge1()); // 18
alert(obj.getAge2()); // 20
对象的函数属性的简写
let person = {
name: "jack",
// es5写法:
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// es6箭头函数版:
eat2: food => console.log(person.name + "在吃" + food), // 这里拿不到this
// es6简写版:
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499187.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步