文章目录
- 默认参数
- 剩余参数
- 箭头函数
- 对象的函数属性的简写
默认参数
在ES6之前,我们无法给一个参数设置默认值,我们只能采取变通的写法:
function add(a ,) {
// 判断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 ,) {
return a + b;
}
// es6简写为:
var sum2 = (a,b) => a+b;
没有参数:
()
不可省略
// es5写法:
var sayHello = function () {
console.log("hello!");
}
// 没有参数时,需要通过()进行占位,代表参数部分
var sayHello = () => console.log("hello!");
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);
}
}