JS扩展运算符巧用

公众号：程序员波波

JavaScript中es6里面有一个扩展运算符...感觉十分方便。和Python中的*、**有点类型。

...的作用是展开一个对象或者数组中的数据，比如：

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

sum(...a) <=> sum(1, 2, 3)

let x = {a: 1, b: 2}
let y = {...x, c: 3, d: 4} // y = {a: 1, b: 2, c: 3, d: 4}

很方便的能进行合并数组或者对象。

 

实例：

这样在开发中，某个接口传入一个args，我想提取某个变量，而且剩余变量给其他接口处理：

let args = {x: 1, y: 2, z: 3, point: {}}

function test(args) {
    const { point, ...others } = args
    // const { point: the_point, ...others } = args 取出point的同时命名为the_point
    dealOthers(others)
}

或者在开发中，想把一些参数添加到args中，然后给其他接口调用：

let args = {x: 1, y: 2, z: 3, point: {}}

function test(a, b, args) {
    const others = {
        ...args,
        a, // 等价于a: a,
        the_b: b,
    }
    dealOthers(others)
}

甚至还有一些奇怪的定义变量的方式：

let [a, b, c] = [1, 2, 3] // a = 1, b = 2, c = 3
let [a, b, ...others] = [1, 2, 3, 4, 5, 6] // a = 1, b = 2, others = [3, 4, 5, 6]
let { a, b, c } = { a: 1, b: 2, c: 3 } // a = 1, b = 2, c = 3
let { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4 } // a = 1, b = 2, others = {c: 3, d: 4}