在ES6中,对函数的操作进行优化,使我们在操作函数时变得更加便捷。
1、函数参数默认值
在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:
function add(a, b) {
// 判断b是否为空,b为空就设置默认值
// 第一种设置默认值方法
// b = b || 1;
// 第二种设置默认值方法
if(!b) {
b = 1;
}
return a + b;
}
console.log("输出结果:",add(10, 5)); //输出结果: 15
//传递一个参数
console.log("输出结果:",add(10)); //输出结果: 11
现在可以这么写:
function add(a, b = 1) {
return a + b;
}
console.log("输出结果:",add(10, 5)); //输出结果: 15
//传递一个参数
console.log("输出结果:",add(10)); //输出结果: 11
2、箭头函数
ES6中定义函数的简写方式:
1、一个参数时
function print(obj) {
console.log(obj);
}
print("123"); // 123
// 简写为:
let print1 = obj => console.log(obj);
print1("456"); // 456
2、多个参数时
function sum(a, b) {
console.log(a + b);
}
sum(1, 3); // 4
// 简写为:
let sum1 = (a,b) => console.log(a + b);
sum1(2, 4); // 6
// 有return的语句
let sum2 = (a,b) => {
return a + b;
}
console.log(sum2(10, 8)); // 18
3、没有参数时
//没有参数时,需要通过()进行占位,代表参数部分
let sayHello = function () {
console.log("hello");
}
sayHello(); // hello
// 简写为:
let sayHello1 = () => console.log("hello ES6");
sayHello1(); // hello ES6
4、代码不只一行时,可以用{}
括起来。
let say = () => {
console.log("hello");
console.log("ES6");
}
say();
// hello
// ES6
3、对象的函数属性简写
比如一个Person对象,里面有eat方法:
let Person = {
name: "jack",
// 以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版
eat1: food => console.log(this.name + "在吃" + food), //这里拿不到this
eat2: food => console.log(Person.name + "在吃" + food),
// 简写版
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
Person.eat("西瓜"); //jack在吃西瓜
Person.eat1("葡萄"); //在吃葡萄
Person.eat2("哈密瓜"); //jack在吃哈密瓜
Person.eat3("香蕉"); //jack在吃香蕉
如果箭头函数被非箭头函数包含,则this绑定指向的是最近一层非箭头函数的this;否则,this的值会被设置为全局对象。
4、箭头函数结合解构表达式
比如有一个函数:
const person = {
name: "jack",
age: 20,
language: ["Java","C++","C#"]
}
function hello(person) {
console.log("hello ",person.name);
}
hello(person); // hello jack
如果用箭头函数和解构表达式:
const hello1 = ({name}) => console.log("hello ",name);
hello1(person); // hello jack