ES6+语法二之spread/rest 默认参数值

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

---

ES6引入了一个新的运算符...，通常称为spread/rest(展开或收集)运算符，取决于它在哪（如何使用）。

function foo(x,y,z){
    console.log(x,y,z)
}
foo(...[1,2,3]) // 1,2,3

当...用在数组之前时，它会把这个变量“展开”为各个独立的值。 在ES6之前 我们常常这样写

foo.apply(null, [1,2,3])

其他上下文中用来展开/扩展一个值

var a = [2,3,4]
var b = [1, ...a, 5]
b// [1,2,3,4,5]

这种用法基本代替了concat(..), 与把一个值展开不同，...还能把一系列值收集到一起成为一个数组

function foo(x,y,...z){
    console.log(x,y,z)
}
foo(1,2,3,4,5) // 1 2 [3,4,5]

这段代码中,...z把剩下的参数收集到一起组成一个名为z的数组 。当然如果没有命名参数的话，...会收集所有的参数。

function foo(...args){
    console.log(args)
}
foo(1,2,3,4,5) // [1,2,3,4,5]

foo(..)函数声明中的...args成为“rest函数”。因为这里在收集其余的参数。可以很好的替代arguments类似数组的对象。

function foo (...args){
    args.shift()
    console.log(...args)
}

函数foo(..)声明的...args收集参数，console.log(..)调用中...args将其展开。

很好的展示了运算符...对称而又相反的用法。

默认参数值 设定函数默认参数值通常是这样的

function foo(x, y){
    x = x || 11
    y = y || 32
    console.log(x + y)
}

这个有时是危险的，如果传入一个falsy的值

foo(0,42) // 53 并非 42

下面要修正这个问题

function foo(x, y){
    x = (x !== undefined) ? x : 11
    y = (y !== undefined) ? y : 32
}

还可以通过判断它是否存在与数组arguments之中来确定是否被省略。

function foo(x, y){
    x = (0 in arguments) ? x : 11
    y = (1 in arguments) ? y : 11
    console.log(x + y)
}
foo(5) // 36
foo(5, undefined) // NaN

如果不能传递任何值来表明我省略了这个参数，那么如何省略第一个参数x?

foo(,5) // 不合法的语法
foo.apply(null , [,5]) //可以实现

ES6的缺失参数默认值

function foo(x = 11, y = 31){
    console.log(x + y)
}
foo(5) // 36
foo(5, undefined) // 36  <-- 丢了undefined
foo(5 , null) // 5 <-- null强转为0 

ES6 默认值 和(x !== undefined)等效。

---

结语 关于spread/rest函数默认值就到这里了。