在数组映射中转换某些属性名称的优雅方法答案

【问题标题】：Elegant way to transform certain property names in an array map在数组映射中转换某些属性名称的优雅方法
【发布时间】：2018-11-01 20:03:16
【问题描述】：

假设...

let A = [{ x:'x', y:'y' }, { x:'x', y:'y' }];

我知道我可以将此数组转换为一个新数组，并像这样重命名 y 属性...

A.map(o => ({ v: o.y }));
// [{ v:'y' }, { v:'y' }]

而且我可以使用扩展来获取所有现有属性以及一个新的、经过转换的属性...

A.map(o => ({ ...o, ...{ v: o.y } }));
// [{ x:'x', y:'y', v:'y' }, { x:'x', y:'y', v:'y' }]

但我想知道是否有一种优雅的方法可以简单地将y 属性重命名为v。所以这就是我想要的。

// [{ x:'x', v:'y' }, { x:'x', v:'y' }]

我知道我可以在我的胖箭头函数上使用一个函数块，添加一个v 属性，并删除y 属性，但这很麻烦。我正在寻找优雅的东西。

【问题讨论】：

如何量化“优雅”？
您使用 ecmascript-6 标记了问题。请注意，“传播属性”不是 ES6 的一部分。
优雅 = 一看就知道 ;)

标签： javascript arrays ecmascript-6

【解决方案1】：

您可以使用 Array.map() 和 Object destructing ：

let A = [{ x:'x', y:'y' }, { x:'x', y:'y' }];

let result = A.map(({y,...rest})=> ({...rest,v:y}));

console.log(result);

【讨论】：

绝对是我想要的。谢谢。
@JeremyFoster 很高兴为您提供帮助 :-)

【解决方案2】：

您可以重命名属性并使用对象的其余语法来获取所有其他属性。对于映射，取其余参数和新属性。

let A = [{ x: 'x', y: 'y' }, { x: 'x', y: 'y' }];

console.log(A.map(({ y: v, ...o }) => ({ ...o, v })));

【讨论】：

比起@amrender singh 的建议，我更喜欢这个

【解决方案3】：

我知道你说过你知道你可以delete，但如果你想改变原地的对象，这不一定是不雅的：

let A = [{ x:'x', y:'y' }, { x:'x', y:'y' }];

A.forEach(o => delete Object.assign(o, {v: o.y }).y)
console.log(A)

【讨论】：

顺便说一句，由于在大多数 JavaScript 引擎中删除触发字典模式，这将降低大型集的性能。在小型系列上，这显然不是问题。
这很有趣@TravisJ，谢谢——我不知道。
这让我很好奇@TravisJ，所以我找到了指向this jsperf test 的this old thread。在测试中delete 在 Safari 中的速度明显较慢，但在 Chrome 中的性能基本相同。我想知道最近对 V8 的更改是否使这一点变得不那么重要了。
那还是用delete，性能是一样的。请参阅第 16 版的 erfr jsperf.com/test-dictionary-mode/17 进行不删除的比较。速度提高了 32%。

【解决方案4】：

这种方法提供了一种较少硬编码的方式来将密钥转换为新密钥。另一方面，这个[mapping[k]] 被称为Computed property names。

同样，函数Array.prototype.reduce 正在根据mapping 和特定对象本身构建所需的对象。

重要提示：函数Array.prototype.map正在创建一个新的数组，基本上不是修改/改变原来的数组。

let A = [{ x:'x', y:'y' }, { x:'x', y:'y' }];
    mapping = {'y': 'v'},    
    result = A.map(o => Object.keys(o).reduce((a, k) => {
      if (k in mapping) return Object.assign(a, {[mapping[k]]: o[k]});
      return Object.assign(a, {[k]: o[k]});
    }, Object.create(null)));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：