ES6 函数的扩展

3 篇文章 0 订阅


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入门-函数的扩展


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值