根据数组索引更新对象值

Question

我在数组中有2个对象

dataV[1] = {
            "resolution": "4"
        };

datas[1] = {
     {qty_approved: "1", resolution: "5", status: "", order: "1332"}
}

如果两个索引相同，那么我想用第一个索引中的值进行更新。我希望将分辨率值从5更新为4。基于dataV中新数组值的即将到来的值

预期输出如下：

datas[1] = {
     {qty_auth: "1", resolution: "4", status: "", order: "1332"}
}

Answer 1

无论您在哪里更新dataV的值，都可以执行如下操作来更新datas

datas = datas.map((data, i) => {
  return { ...data, resolution: dataV[i].resolution };
});

如果你使用的是react，你可以在useEffect中用dataV作为依赖来做同样的事情。因此，只要dataV发生变化，datas就会自动发生变化。

Answer 2

let array1 = [
    {
        resolution: '4',
    },
];

let array2 = [
    { qty_approved: '1', resolution: '5', status: '', order: '1332' },
];

let array3 = array1.map((element, index) => {
    if (typeof array2[index] != 'undefined') {
        return { ...array2[index], ...element};
    }
    return element;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 3

下面的方法将对datas的每一项执行map。然而，映射函数将是一个实数函数(而不是箭头函数)，因此它知道map's second thisArg参数，对于OP的用例，该参数将是希望从中读取resolution值的dataV数组。

这种方法的优点是，可以使用与外部数组引用无关的可重用映射器函数，因为它确实处理数组，而相关/相应的数组作为映射器函数this context提供。

映射功能本身并不试图通过创建整个项的浅层副本来松散地解耦引用，从而不会改变原始项引用。在顶部，通过this[idx].resolution从相应数组读取的resolution值被分配给刚刚创建的浅拷贝。

​

const datas = [
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "4",
}, {
  "resolution": "7",
}, {
  "resolution": "1",
}];

// mapping approach.

function copyItemAndAssignSameIndexResolutionFromTargetArray(item, idx) {
  // - this merge pattern is agnostic about an `item`'s structure.
  // - `item` could feature more keys but just `resolution` gets reassigned.
  return Object.assign({}, item, { resolution: this[idx].resolution });
}
console.log(
  'mapped version of changed `dataV` items ...',
  datas.map(copyItemAndAssignSameIndexResolutionFromTargetArray, dataV)
);
console.log('still unmutated `datas` ...', { datas });

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

​

如果OP想要改变datas数组的每一项，为了被上下文感知的forEach利用，上面介绍的映射器函数略有变化。

​

const datas = [
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "4",
}, {
  "resolution": "7",
}, {
  "resolution": "1",
}];

// mapping approach.

function assignSameIndexResolutionFromTargetArray(item, idx) {
  item.resolution = this[idx].resolution;
  // Object.assign(item, { resolution: this[idx].resolution });
}
datas.forEach(assignSameIndexResolutionFromTargetArray, dataV);

console.log('mutated `datas` array ...', { datas });

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

​

或者(不顾一切地猜测) OP是否在寻找必须由显式提供的dataV项来更新/改变datas项的解决方案？像这样吗？..

​

const datas = [
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "1",
}, {
  "resolution": "4",
}, {
  "resolution": "7",
}, ];

function updateResolution(targetArray, sourceArray, resolutionItem) {
  const updateIndex =
    sourceArray.findIndex(item =>
      item.resolution === resolutionItem.resolution
    );
  targetArray[updateIndex].resolution = resolutionItem.resolution;

  return targetArray[updateIndex];
}

console.log(
  'updateResolution(datas, dataV, { resolution: "4"}) ...',
  updateResolution(datas, dataV, { resolution: "4"})
);
console.log('mutated `datas` array ...', { datas });

console.log(
  'updateResolution(datas, dataV, { resolution: "7"}) ...',
  updateResolution(datas, dataV, { resolution: "7"})
);
console.log('mutated `datas` array ...', { datas });

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

​