Question

对于含糊不清的标题，我只是想不出更清楚的事情：）

问题在于对象扩展和计算属性语法。请考虑以下示例：

const state = { foo: 'bar' };
const id = 3;

const newState = {
  [id]: 'three', // A
  ...state
}

const {
  [id]: omit, // B
  ...nextState
} = newState;

使用object rest spread syntax从对象中不可移动地删除属性（在Redux reducers中很有用），我不能使用与在A行中设置此属性相同的变量。

在此，我希望nextState为{ foo: 'bar' }，但我得到{ '3': 'three', foo: 'bar' }。

但是，如果我手动转换为B行中的字符串属性，我会得到预期的结果。

const {
  [id.toString()]: omit,
  ...nextState
} = newState;

现在nextState是{ '3': 'three', foo: 'bar' }。

这里发生了什么？它是ES7或Babel bug中的预期行为吗？

以下是一个示例：http://www.es6fiddle.net/im23ggzk/

Answer 1

这是实验性babel插件中的一个错误。您可以看到已编译的代码：

function _objectWithoutProperties(obj, keys) {
    var target = {};
    for (var i in obj) {
        if (keys.indexOf(i) >= 0) continue;
        if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
        target[i] = obj[i];
    }
    return target;
}

var nextState = _objectWithoutProperties(newState, [id]);

indexOf测试使用区分不同类型的Strict Equality Comparison，因此找不到您的号码。修复方法是_objectWithoutProperties(newState, [id].map(_ToPropertyKey))。

如果由数字变量设置，则无法接收计算属性名称

1 个答案: