当前位置：首页 > 编程日记 > 正文

ES6 函数的扩展

编程日记 2024-05-31 07:50:00

ES6 函数的扩展

1. 函数参数的默认值
- 1.1 基本用法
- 1.2 与解构赋值默认值结合使用
- 1.3 参数默认值的位置
- 1.4 函数的length属性
2. rest参数
- 2.1 rest参数
- 2.2 arguments对象
3. 函数的name属性
4. 箭头函数

1. 函数参数的默认值

1.1 基本用法

ES6之前，不能直接为函数的参数指定默认值，通常需要先判断一下参数是否被赋值，如果没有，则为其设置默认值。

if (typeof 参数 === 'undefined') {// 为参数设置默认值语句
}

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function func(param1 = 'defaultValue1', param2 = 默认值) {...... 
}

注：只有当参数值严格等于undefined时，其默认值才会生效。

1.2 与解构赋值默认值结合使用

函数的参数如果是一个对象，在进行解构赋值时，参数中的变量与实参对象的属性名进行匹配，如果两者相同，则进行正常赋值操作，如果参数中的变量未匹配到同名的实参对象属性，则其值为undefined。

function foo({x, y = 5}) {console.log(x, y);
}foo({}) // undefined 5
foo() // 报错

上面代码中只使用了对象的解构赋值默认值，没有使用函数参数默认值，如果在调用函数时没有提供默认值，则会报错。

function foo({x, y = 5} = {}) {console.log(x, y);
}foo() // undefined 5

上面代码中，如果在调用函数时没有提供参数，函数foo的参数默认为一个空对象。

1.3 参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。如果非尾部的参数设置了默认值，实际上这个参数是没法省略的。如果非要使用非尾部参数的默认值，则需要显示传入undefined来触发默认值。

1.4 函数的length属性

函数指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。准确地说，函数的length属性会依次计算没有指定默认值的参数个数，遇到第一个指定了默认值的参数时就停止计数，然后返回这个数值。

(function (a = 0, b, c) {}).length  // 0
(function (a, b = 1, c) {}).length  // 1

2. rest参数

2.1 rest参数

ES6引入了 rest参数 (形式为 ...变量名)，用于获取函数的多余参数。这样就不需要使用arguments对象了。

rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中，即 ...数组名，表示获取该数组中的全部元素。这种用法可以将多个数组的元素拼接到一个数组中。

数组a = [1,2,3] , 数组b = [4,5,6] 
数组c = [...a,...b],  则数组c = [1,2,3,4,5,6]

注意点：

rest参数只能是最后一个参数，如果后面再加其它参数，则会报错。
函数的length属性，不包括rest参数。

2.2 arguments对象

arguments对象不是数组，而是一个类似数组的对象，里面存放函数的实参。

将arguments对象转换成数组的方法：Array.from(arguments)或者Array.prototype.slice.call(arguments)。

3. 函数的name属性

函数的name属性，返回该函数的函数名。

对于一个匿名函数赋值给一个变量，ES 5和 ES6 在这个属性上有不同的返回值，ES5的name属性会返回空字符串，ES6的name属性会返回实际的函数名。

如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

4. 箭头函数

ES6 允许使用“箭头”（=>）定义函数。

var f = function(params) {// 函数体
}
// 等同于
var f = (params) => {// 函数体
}

如果箭头函数不需要参数或者需要多个参数，则使用一个圆括号代表参数部分。

如果箭头函数的代码块部分多于一条语句，就要使用花括号把他们括起来，并且使用return语句返回。

var f = () => { ... };
var f = (p1, p2) => { ... };

由于大括号被解释为代码块，如果箭头函数直接返回一个对象，必须在对象的外面加上圆括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;// 等同于
function full(person) {return person.first + ' ' + person.last;
}

箭头函数可以和rest参数结合使用。

const numbers = (...nums) => nums;numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

注意点：

箭头函数没有自己的this对象。箭头函数的this指向定义时所在的作用域，普通函数的this指向运行时所在的作用域(即全局对象window)。
不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

参考文档：ECMAScript 6入门-函数的扩展

https://www.dkcj.cn/info/8627.html

ES6 函数的扩展

1. 函数参数的默认值

1.1 基本用法

1.2 与解构赋值默认值结合使用

1.3 参数默认值的位置

1.4 函数的length属性

2. rest参数

2.1 rest参数

2.2 arguments对象

3. 函数的name属性

4. 箭头函数

相关文章：