ES6|扩展运算符/Rest参数——“...“
程序员文章站
2022-03-08 22:20:58
...
扩展运算符和Rest参数都用符号"…"来表示,但是表达的确实相反的意思。扩展运算符是将固定的数组内容“打散”到参数里去,而Rest参数是将不定的参数“收敛”到数组中。
扩展运算符
应用一:扩展运算符拆分数组
function sum(x = 1, y = 2, z = 3) {
return x + y + z
}
console.log(sum(...[4])) // 9
console.log(sum(...[4, 5])) // 12
console.log(sum(...[4, 5, 6])) // 15
扩展运算符用来解决已知参数集合应用到固定参数的函数上,如果没有扩展运算符,可能需要这样做:
function sum(x = 1, y = 2, z = 3) {
return x + y + z
}
console.log(sum.apply(null, [4])) // 9
console.log(sum.apply(null, [4, 5])) // 12
console.log(sum.apply(null, [4, 5, 6])) // 15
应用二:扩展运算符合并数组
let arr1=[1,2,3]
let arr2=[4,5,6]
Array.prototype.push.apply(arr1,arr2)//ES5数组连接法
arr1.push(...arr2)//ES6数组连接法
console.log(arr1)
应用三:扩展运算符拆分字符串
let str='java'
var arr=[...str]
console.log(arr)//[j,a,v,a]
Rest参数
Rest参数通常应用在函数参数不确定个数的场景下,比如求和运算:
function sum(...nums) {
let num = 0
nums.forEach(function(item) {
num += item * 1
})
return num
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10
如果没有这种语法,可能需要写成这样:
function sum() {
let num = 0
Array.prototype.forEach.call(arguments, function(item) {
num += item * 1
})
return num
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10
注意:arguments 不是数组,所以不能直接使用数组的原生 API 如 forEach,而 Rest Parameter 是数组,可以直接使用数组的原生 API。
再看两个例子:
function foo(x,...args){
console.log(x)
console.log(args)
}
foo(1,2,3)//1 [2,3]
foo(1,2,3,4,5)//1 [2,3,4,5]
let [x,...y]=[1,2,3,4,5]
console.log(x)//1
console.log(y)//[2,3,4,5]
由此可见,可以将Rest参数理解为“剩下的所有参数”。
上一篇: ES6|数组遍历方式