欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6|扩展运算符/Rest参数——“...“

程序员文章站 2022-03-08 22:20:58
...

扩展运算符/Rest参数...


扩展运算符和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参数理解为“剩下的所有参数”。

相关标签: ES es6