如何遍歷物件陣列并根據JavaScript中的條件添加新的物件鍵？

我有以下物件陣列。

[{"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 值為準，其值為 Cash，最高值為 Card，所有中間值為 Cheque，按 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. 我回圈了兩次，一次是最大值，一次是最小值。
2. 我如何獲得中間值？

uj5u.com熱心網友回復：

你可以這樣做

    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}})

檢查陣列中的映射方法以了解更多資訊：https : //learnjsx.com/category/2/posts/es6-mapFunction

uj5u.com熱心網友回復：

以防萬一 id 值從 0 開始不連續

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}];

let min,max,minIndex = -1, maxIndex = -1;
array.forEach((item, index) => {
    item.PaymentCategory = 'Cheque';
    if (minIndex === -1 || min > item.id) {
        minIndex = index;
        min = item.id;
    }
    if (maxIndex === -1 || max < item.id) {
        maxIndex = index;
        max = item.id
    }
});
array[minIndex].PaymentCategory = 'Cash';
array[maxIndex].PaymentCategory = 'Card';

uj5u.com熱心網友回復：

我認為如果您Array.prototype.sort使用排序謂詞函式簡單地對陣列進行就地排序，可能會獲得最高的性能，該函式除了決定排序順序外，還添加了“默認”“PaymentCategory”鍵，然后為“分配正確的值” PaymentCategory" 在排序陣列中的第一個和最后一個物件上：

array.sort((a, b) => {
    a.PaymentCategory = b.PaymentCategory = "Cheque";
    return a.id < b.id;
});
array[0].PaymentCategory = "Cash";
array.at(-1).PaymentCategory = "Credit";

上面在排序期間分配了“默認”付款類別，因為分配可以說比分配前的測驗便宜。但是在排序之后，由于陣列現在已按“id”排序，因此第一個元素應該是具有最小“id”的元素和具有最大“id”的最后一個元素，代碼段為其分配了正確的類別。的替代版本array.at(-1)是array[array.length - 1].

由于您需要對“id”進行排序，因此無論如何您都需要對陣列進行實際排序——例如，使用前面提到的sort（這可能比實作自己的要快得多），并給出堆排序演算法，例如，具有最差的時間復雜度 $O(nlog(n))$，除了實際排序的成本之外，您幾乎不會支付任何溢價——當然比運行reduce兩次時您甚至沒有得到之后排序陣列。這意味著你必須排序，所以排序，但支付類別的分配幾乎是“免費”完成的，因為它是在sort對陣列進行排序時運行的恒定成本操作。

PS 有可能——我沒有測驗過這個，它可能取決于所使用的排序演算法——在呼叫排序謂詞函式期間，為其中一個 a 或 兩個分配“PaymentCategory”b就足夠了，而不是為這兩個分配。

uj5u.com熱心網友回復：

下面提供的方法很簡單，首先按值的升序 ( ) sort執行淺層陣列副本 ( [...sampleData])的專案。.sort((a, b) => a.id - b.id)id

最后的任務map以創建淺拷貝 ( { ...item })的方式執行每個（排序的）專案，此外還創建一個'Payment Category'條目，其中第一項 ( idx === 0) 被分配'Cash'值，最后一項 ( (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; }

標籤：javascript ecmascript-6

上一篇：如何創建一個在反應時切換打開模式的按鈕

下一篇：jQuery重新索引陣列