首页 > 解决方案 > ES6 解构和扩展运算符无法正常工作

问题描述

在解构仅以数字为键的对象并使用扩展运算符收集所有其他对象时,我有一个奇怪的行为。这个问题发生在我的 ReactJS 应用程序中,其中 babel 设置为 es2017 和插件“transform-object-rest-spread”。我正在使用 normalizr 来展平我的对象,这就是我使用数字键获取对象的原因。

    const tmpContainer = {
        24: { v: 1 }, 36: { v: 5 }, 42: { v: 3 }
    }
    const action = { id: 24 }
    const { [action.id]:elem, ...rest } = tmpContainer
    console.log(elem)
    console.log(rest)

elem 的输出:24 : {v: 1}

休息的输出是: 24 : {v: 1} 36 : {v: 5} 42 : {v: 3}

正确获得了带有键 24 的元素,但它没有从传播中删除。在https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax尝试相同的代码可以正常工作。

将动作更改为

const action = { id: "24" }

传播的结果是正确的。

我真的很困惑为什么会发生这种情况或导致问题的原因是什么?

标签: javascriptreactjs

解决方案


推荐阅读