在Javascript中更新对象数组中的键的最有效方法是啥？ [复制]

Posted 2023-03-11

【中文标题】在Javascript中更新对象数组中的键的最有效方法是啥？ [复制]

【英文标题】：What is the most efficient way to update a key inside of an array of objects in Javascript? [duplicate]在Javascript中更新对象数组中的键的最有效方法是什么？ [复制]

【发布时间】：2021-11-26 05:45:12

【问题描述】：

如果我有一个包含 10 个对象的 javascript 数组，语法如下：

const myArray = [Age: 10, Name: Justin, Age: 15, Name: Bob, ..., Age: 20, Name: Jon];

将 Name 键更新为 DisplayName 的最有效方法是什么。这是我目前的逻辑：

myArray = myArray.map(item=>return age:item.age, displayName:item.name ); 

【问题讨论】：

Array 是一个内置的全局变量。 不要将变量命名为Array。称它为myArray 或更具描述性，如let people = [ ... ]

您可以使用简单的 for、for in 和 for each 循环。最好的是每个数组。

【参考方案1】：

我认为你的逻辑很好，但可以缩短。

myArray = myArray.map(( age, name ) => ( age, displayName: name )); 

【参考方案2】：

可以通过浅拷贝和spread operator重命名对象的key

const arr = [Age: 10, Name: 'Justin', Age: 15, Name: 'Bob', Age: 20, Name: 'Jon'];

function renameKey(obj, oldName, newName) 
  const  [oldName]: val, ...rest  = obj
  return 
    ...rest,
    [newName]: obj[oldName]
  


const res = arr.map(i => 
  const tmp = renameKey(i, 'Name', 'displayName')
  return tmp
)

console.log('result ~> ', res)

或lodash

const arr = [Age: 10, Name: 'Justin', Age: 15, Name: 'Bob', Age: 20, Name: 'Jon'];
const res = _.map(arr, function(i) 
  return _.mapKeys(i, function(val, key) 
    return key === 'Name' ? 'displayName' : key
  )
)

console.log('res ~> ', res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

【参考方案3】：

如果您想更新原始数组，永远不要使用map。因为map 用于从现有数组创建一个新数组。

而是循环遍历 Array 中的节点。使用密钥displayName 创建新节点并删除密钥Name。

工作小提琴

const myArray = [Age: 10, Name: 'Justin', Age: 15, Name: 'Bob', Age: 20, Name: 'Jon'];
myArray.forEach((node) => 
  node.displayName = node.Name;
  delete node.Name;
);
console.log(myArray);

【讨论】：

为什么从不加粗？

@ksav 因为用户的目标是更新现有数组。所以他应该不为此使用map。其目的 id 是创建新数组而不是更新现有数组。