將更大長度的鍵/值物件陣列映射到其他陣列

您好開發人員我試圖將我在物件陣列中的鍵值映射到其他較小長度的陣列中，但是由于我已提交的任務必須以這種方式進行。

假設我有一個長度為 2 的物件陣列，其結構如下：

const array1=[
  { status: "ok", actual: true }, 
  { status: "not ok" }, 
]

我假裝添加到這個陣列的陣列長度更大，如下所示：

const iconsStepper = [
        { icon: 'x' },
        { icon: 'xx' },
        { icon: 'xxx' }
];

那么預期的結果，記住我需要將第二個陣列耦合到第一個陣列中：

[
  { status: "ok", actual: true ,icon:x}, 
  { status: "not ok",icon:xx }, 
  {icon:xxx }, 
]

我有一個將第二個陣列映射到第一個陣列的函式：

array1.map((object, index) => ({
      ...object,
      icon: iconsStepper[index].icon,
    }));

按照這個邏輯，拋出的結果是：

[
  { status: "ok", actual: true ,icon:x}, 
  { status: "not ok",icon:xx }, 
]

省略 iconSteeper 陣列的最后一個物件會導致它應該映射到的陣列的長度很小

如何在不精確反轉陣列以映射的情況下解決此問題。謝謝

uj5u.com熱心網友回復：

您可以通過減少陣列來計算陣列，并在同一位置獲取相同索引的所有屬性。

const
    array1 = [{ status: "ok", actual: true }, { status: "not ok" }],
    array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }],
    result = [array1, array2].reduce((r, a) => {
        for (let i = 0; i < a.length; i  ) Object.assign(r[i] ??= {}, a[i]);
        return r;
    }, []);

console.log(result);

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

映射陣列的方法略有不同。

const
    array1 = [{ status: "ok", actual: true }, { status: "not ok" }],
    array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }],
    result = [array1, array2].reduce((r, a) => Object.assign(
        r,
        a.map((o, i) => ({...r[i], ...o }))
   ), []);

console.log(result);

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

uj5u.com熱心網友回復：

const array1 = [
  { status: "ok", actual: true },
  { status: "not ok" },
];

const iconsStepper = [
  { icon: 'x' },
  { icon: 'xx' },
  { icon: 'xxx' },
];

const output = array1.length > iconsStepper.length ? array1.map((object, index) => {
  const returnObj = {
    ...object,
  }
  if (iconsStepper[index]) {
    returnObj['icon'] = iconsStepper[index].icon
  }
  return returnObj;
}) : iconsStepper.map((object, index) => ({
  ...array1[index],
  icon: iconsStepper[index].icon,
}));

console.log(output)

uj5u.com熱心網友回復：

您可以像使用指標一樣使用變數

const array1=[
  { status: "ok", actual: true }, 
  { status: "not ok" }
]


const iconsStepper = [
        { icon: 'x' },
        { icon: 'xx' },
        { icon: 'xxx' }
];

const mergeArrays = (one,two) => {
  const bigger = (one.length > two.length) ? one : two;
  const smaller = (bigger == one)? two : one;
  
  return bigger.map(  (item,pos) => Object.assign({},smaller[pos],item) );

}


console.log("order1",mergeArrays(array1,iconsStepper));
console.log("order2",mergeArrays(iconsStepper,array1));

uj5u.com熱心網友回復：

您可以通過使用Array.map()和Object.assign()來實作它

const array1 = [
  { status: "ok", actual: true }, 
  { status: "not ok" }
];

const iconsStepper = [
  { icon: 'x' },
  { icon: 'xx' },
  { icon: 'xxx' }
];

const res = iconsStepper.map((obj, index) => Object.assign(obj, array1[index]));

console.log(res);

uj5u.com熱心網友回復：

您可以組合Array#reduce()和Array#map()如下：

const arr1 = [{status: "ok", actual: true },{ status:"not ok" }];

const arr2 = [{ icon: 'x' },{ icon: 'xx' },{ icon: 'xxx' }];

const result = [arr1, arr2].reduce(
    (acc,cur) => !acc.length ? cur : cur.map((e,i) => ({...acc[i],...e})), []
);

console.log( result );

標籤：javascript 数组 有角度的 字典

上一篇：將dict值與其他dict進行比較

下一篇：ReactJS：通過在lodash中使用groupby進行映射