如何循环遍历对象数组并根据 JavaScript 中的条件添加新的对象键？

Question

我有以下对象数组：

[{"id":0,"name":"Katy","age":22},
{"id":2,"name":"Lucy","age":12},
{"id":1,"name":"Jenna","age":45},
{"id":3,"name":"Ellie","age":34}]

我需要在对象 (PaymentCategory) 中添加另一个键，在其中添加具有最低 ID 的对象的键具有值“现金”、具有最高 ID 的键“卡”以及介于“支票”之间的所有对象;该数组还必须按 ID 排序。

因此需要的输出是：

[{"PaymentCategory":"Cash","id":0,"name":"Katy","age":22},
{"Payment Category":"Cheque","id":1,"name":"Jenna","age":45},
{"Payment Category":"Cheque","id":2,"name":"Lucy","age":12},
{"Payment Category":"Card","id":3,"name":"Ellie","age":34}]

我们怎样才能以最有效的方式实现这一结果，即最少的迭代次数，最高的性能？

这是我尝试过的：

const min = array.reduce((prev,curr)=> prev.id<curr.id?prev:curr)
  const max = array.reduce((prev,curr)=> prev.id>curr.id?prev:curr)
  min.PaymentCategory = "Cash"
  max.PaymentCategory = "Credit"
  const result =[min, max]

这个问题是：

1. 我循环了两次，一次用于max，一次用于min。
2. 如何获得“中间”值？

Answer 1

以下提供的方法很简单，首先将sort 的浅数组副本 ([...sampleData]) 的项目按 id 值的升序 (.sort((a, b) => a.id - b.id)) 进行处理。

最后的任务以创建浅表副本 ({ ...item }) 的方式执行 map 每个（排序的）项目，此外还创建一个 'Payment Category' 条目，其中第一个项目 (idx === 0) 被分配了 @ 987654333@ 值，最后一项 ( (idx === arr.length - 1) ) 被分配 'Card' 值，所有其他项被分配 'Cheque' 值。

整个方法不会改变最初提供的数据...

const sampleData = [
  { id: 0, name: "Katy", age: 22 },
  { id: 2, name: "Lucy", age: 12 },
  { id: 1, name: "Jenna", age: 45 },
  { id: 3, name: "Ellie", age: 34 },
];

console.log(
  'mapped `sampleData` items ...',

  [...sampleData]
    .sort((a, b) => a.id - b.id)
    .map((item, idx, arr) => ({
      ...item,
      'Payment Category': ((idx === 0)
        && 'Cash') || ((idx === arr.length - 1)
        && 'Card') || 'Cheque',
    }))
);
console.log('unmutated `sampleData` ...', sampleData);

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

上述方法以一种更具可读性的方式...

const copyItemAndAugmentPaymentCategory = (item, idx, arr) => ({
  ...item,
  'Payment Category': ((idx === 0)
    && 'Cash') || ((idx === arr.length - 1)
    && 'Card') || 'Cheque',
});
const compareItemIdPrecedenceAscending = (a, b) => a.id - b.id;

console.log(
  [
    { id: 0, name: "Katy", age: 22 },
    { id: 2, name: "Lucy", age: 12 },
    { id: 1, name: "Jenna", age: 45 },
    { id: 3, name: "Ellie", age: 34 },
  ]
  .sort(compareItemIdPrecedenceAscending)
  .map(copyItemAndAugmentPaymentCategory)
);

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

Answer 2

你可以这样做

const array =[{"id":0,"name":"Katy","age":22},
{"id":2,"name":"Lucy","age":12},
{"id":1,"name":"Jenna","age":45},
{"id":3,"name":"Ellie","age":34}]

const arrayLength= array.length
  
const newA=array.map( (element,index) =>  { if (index===0) return {"PaymentCategory":"Cash", ...element}
else if ( index===arrayLength-1 )return {"PaymentCategory":"Card", ...element}
else return {"PaymentCategory":"Cheque", ...element}})

查看数组中的 map 方法以了解更多信息：https://learnjsx.com/category/2/posts/es6-mapFunction