如何更新 Javascript 中对象数组中每个对象的值？

Question

我正在尝试使用newData中的值更新数组（数据）中所有对象中的car值，我的代码是：

import "./styles.css";

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];


export default function App() {
  return (
    <div className="App">
      {data?.map((item) => {
        return <li key={item.id}>{item.car}</li>;
      })}
    </div>
  );
}

我不知道如何使用 newData 中的值更改数据中的汽车值，因此数据将如下所示：

const data = [
  { id: 1, car: "Audi", owner: "BM" },
  { id: 2, car: "Bentley", owner: "DK" },
  { id: 3, car: "BMW", owner: "JA" },
  { id: 4, car: "Buick", owner: "DS" }
];

代码沙盒

稍后在代码中，我通过数据进行映射，并且需要显示更新的汽车值，我不确定使用哪种方法。非常感谢任何帮助。

Answer 1

只需获取正在迭代的对象的索引，然后在newData数组中查找它？

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];

const newCars = data.map((obj, i) => ({ ...obj, car: newData[i] }));
console.log(newCars);