# ES6之函数的扩展
# 一. 函数参数的默认值 (常用)
在 ES6 之前,不能为函数的参数指定默认值,通常采用如下方法实现。
function print(x, y) {
let a = y || 'World';
console.log(x, y);
}
print('Hello') // Hello World
print('Hello', 'China') // Hello China
print('Hello', '') // Hello World
// 缺点在于,当参数y为布尔值false、数值0,则赋值不起作用
// 于是又会加上以下判断
if (typeof y === 'undefined') {
y = 'World';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
ES6 允许为函数的参数设置默认值,直接写在参数定义的后面。
// 示例1
function print(x, y = 'World') {
console.log(x, y);
}
print('Hello') // Hello World
print('Hello', 'China') // Hello China
print('Hello', '') // Hello
// 示例2
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
注意点
- 参数变量是默认声明的,所以不能用let或const再次声明
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
1
2
3
4
2
3
4
- 使用参数默认值时,函数不能有同名参数。
// 不报错;后一个覆盖前一个
function foo(x, x, y) {
// ...
}
// 直接报错
function foo(x, x, y = 1) {
// ...
}
// SyntaxError: Duplicate parameter name not allowed in this context
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 参数默认值是惰性求值的,每次都重新计算默认值表达式的值。
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101
// 参数p的默认值是x + 1。这时,每次调用函数foo(),
// 都会重新计算x + 1,而不是默认p等于 100
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 参数默认值的位置,应该是函数的尾参数
function f(x = 1, y) {
return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]
/*
* 示例中有默认值的参数不是尾参数。
* 这时,无法只省略该参数,而不省略它后面的参数,
* 除非显式输入undefined
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 指定参数默认值后,函数的 length 属性失真,会返回没有指定默认值的参数个数
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
// 如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
1
2
3
4
5
6
7
2
3
4
5
6
7
- 与解构赋值默认值结合使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
/*
* foo 函数只是使用了对象的解构赋值默认值,没有使用函数参数的默认值
* 所以函数foo()调用时没提供参数,变量x和y就不会生成,从而报错
* 应该为函数参数提供默认值
*/
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
// 如上所示,函数参数的默认值生效以后,参数解构赋值依然会进行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 二. rest 参数 (常用)
ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
// 利用 rest 参数,可以向该函数传入任意数目的参数。
function add(...values) {
console.log(Array.isArray(values)) // true
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
add(2, 5, 3, 8, 10) // 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用rest 参数代替arguments变量的示例
// arguments对象不是数组,而是一个类似数组的对象
// arguments变量的写法;
function sortNumbers() {
// 先将arguments转为数组
return Array.from(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
注意
- rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 报错
function f(a, ...b, c) {
// ...
}
1
2
3
4
2
3
4
- 函数的length属性,不包括 rest 参数。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
1
2
3
2
3
# 三. 箭头函数 (常用)
ES6 允许使用“箭头”(=>)定义函数。
语法 (参数)=> { statements }
- 没有参数时
let f = ()=> 5;
// 等同于
let f = function () {
return 5;
};
f(); // 5
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 一个参数时
let f = (num)=> num + 5;
// 简写,省去()
let f = num => num + 5;
f(10); // 15
1
2
3
4
5
2
3
4
5
- 多个参数,圆括号代表参数部分,不可省略。
let f = (a,b) => a + b;
f(1,2); // 3
1
2
3
2
3
- 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
// 没有大括号,默认返回表达式结果
let f1 = (a,b) => a + b
f1(1,2) // 3
// 有大括号,无return语句,没有返回值
let f2 = (a,b) => {a + b}
f2(1,2) // undefined
// 有大括号,有return语句,返回结果
let f3 = (a,b) => {return a + b}
f3(1,2) // 3
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
// 报错
let getPerson = id => { id: id, name: "浪子快跑" };
// 不报错
let getPerson = id => ({ id: id, name: "朴荟圈圈" });
1
2
3
4
5
2
3
4
5
使用箭头函数可以简化代码
// 普通函数写法
let list = values.sort(function (a, b) {
return a - b;
});
// 箭头函数写法
let list = values.sort((a, b) => a - b);
// 箭头函数可以与变量解构结合使用
let full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
// rest 参数与箭头函数结合
let numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
let headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 箭头函数注意事项
- 箭头函数没有自己的this对象,内部的this就是定义时上层作用域中的this
function f() {
setTimeout(() => {
console.log('name:', this.name);
}, 100);
}
var name = '李四;
f.call({ name: '张三'});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
setTimeout()如果是普通函数,this将指向window,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{name: '张三'}),所以打印出来的是 张三
- 不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,会抛错。
let Person = ()=>{};
// 报错 TypeError: Person is not a constructor
let person = new Person ();
1
2
3
4
2
3
4
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
let f = ()=>console.log(arguments);
//报错
f(); // arguments is not defined
// 使用rest参数
let f = (...args)=>console.log(args)
f(1,2,3,4,5) // [1,2,3,4,5]
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
(function() {
return [
(() => this.x).bind({ x: 'inner' })()
];
}).call({ x: 'outer' });
// ['outer']
// 箭头函数没有自己的this,所以bind方法无效,内部的this指向外部的this。
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
# 四. 严格模式
ES5 开始,函数内部可以设定为严格模式。
function doSomething(a, b) {
'use strict';
// code
}
1
2
3
4
2
3
4
ES2016 规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
// 报错
function doSomething(a, b = a) {
'use strict';
// code
}
// 报错
const doSomething = function ({a, b}) {
'use strict';
// code
};
// 报错
const doSomething = (...a) => {
'use strict';
// code
};
const obj = {
// 报错
doSomething({a, b}) {
'use strict';
// code
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 五. name 属性
函数的name属性,返回该函数的函数名。
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
1
2
3
4
5
6
7
2
3
4
5
6
7
# 六. 函数参数的尾逗号
ES2017 允许函数的最后一个参数有尾逗号
function f(
param1,
param2,
) { /* code */ }
// 以前param2后面加','会报错;现在允许了
1
2
3
4
5
6
7
2
3
4
5
6
7
# 七. catch 命令的参数省略
JavaScript 语言的try...catch结构,以前明确要求catch命令后面必须跟参数,接受try代码块抛出的错误对象。
try {
// ...
} catch (err) {
// 处理错误
}
// catch命令后面带有参数err,以前必须写,ES6允许省略
// 省略参数err
try {
// ...
} catch {
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14