制作具有添加屬性的新物件串列

例如，我有以下兩個陣列：

Employees = [
  { id: 1, name: Ahmed, age: 22 },
  { id: 2, name: hassan, age: 43 },
  { id: 3, name: john, age: 44 },
  { id: 4, name: salem, age: 66 }
]

b = [{ emp_id: 1, name: Ahmed }, { emp_id: 4, name: salem }]

現在我想要一個與員工相同的新陣列，但添加了一個新屬性 isSelected。如果陣列 b 中的 emp_id 存在于員工陣列中，則添加一個屬性 isSelected : true else false 例如：

MyNewList = [
  { id: 1, name: Ahmed, age: 22, isSelected: true },
  { id: 2, name: hassan, age: 43, isSelected: false },
  { id: 3, name: john, age: 44, isSelected: false },
  { id: 4, name: salem, age: 66, isSelected: true }
]

uj5u.com熱心網友回復：

您可以簡單地map()覆寫第一個陣列并isSelected通過檢查some()元素是否b與當前迭代物件的 id 匹配來分配。

const employees = [
  { id: 1, name: 'Ahmed', age: 22 },
  { id: 2, name: 'hassan', age: 43 },
  { id: 3, name: 'john', age: 44 },
  { id: 4, name: 'salem', age: 66 }
];

const b = [{ emp_id: 1, name: 'Ahmed' }, { emp_id: 4, name: 'salem' }];

const newList = employees.map((e) => (
  {
    ...e,
    isSelected: b.some(({ emp_id }) => emp_id === e.id)
  }
));


console.log(newList);

或者，您可以通過檢查當前迭代的 s來創建Set of emp_idsb并分配。isSelectedSet.has()id

const employees = [{ id: 1, name: 'Ahmed', age: 22 }, { id: 2, name: 'hassan', age: 43 }, { id: 3, name: 'john', age: 44 }, { id: 4, name: 'salem', age: 66 }];
const b = [{ emp_id: 1, name: 'Ahmed' }, { emp_id: 4, name: 'salem' }];

const empIds = new Set(b.map(({ emp_id }) => emp_id));
const newList = employees.map((e) => (
  {
    ...e,
    isSelected: empIds.has(e.id)
  }
));


console.log(newList);

也可以看看：

• 解構賦值
• 傳播語法

uj5u.com熱心網友回復：

我鼓勵您查看有關物件傳播的檔案以及諸如查找、映射和過濾器之類的陣列方法。以后你會經常遇到這些。

要回答這個問題，這樣的事情可能會起作用：

MyNewList = Employees.map((employee) => ({
    ...employee,
    isSelected: b.find((selectedEmployee) => selectedEmployee.emp_id === employee.id) !== undefined,
}))

解釋：...employee是物件傳播。你會經常使用它，我建議你研究一下。它將原始物件的所有屬性放入新物件中。然后我們添加一個新isSelected屬性，我們用它b.find來查看這個員工是否在 list 中有一個 id b。我們使用!== undefined是因為如果查找未定義，則員工不在串列中。

uj5u.com熱心網友回復：

與 pilchard 的答案相同if- else?? 更改 ....

const Employees = [
  { id: 1, name: "Ahmed", age: 22 },
  { id: 2, name: "hassan", age: 43 },
  { id: 3, name: "john", age: 44 },
  { id: 4, name: "salem", age: 66 },
];

const b = [
  { emp_id: 1, name: "Ahmed" },
  { emp_id: 4, name: "salem" },
];

const newList = Employees.map((emp) => {
  if (b.some((x) => x.emp_id === emp.id)) {
    return {...emp, isSelected : true}
  } else {
    return {...emp, isSelected : false}
  }
});

console.log(newList);
console.log(Employees);

uj5u.com熱心網友回復：

試試這個：

const Employees=[
  {id :1 , name:'Ahmed',age:22},
  {id :2 , name:'hassan',age:43},
  {id :3 , name:'john',age: 44},
  {id :4, name:'salem',age:66} ]

const b=[{emp_id :1 , name:'Ahmed'},{emp_id :4, name:'salem'} ];

const selectedEmployee = Employees.map((employee) => {
  if(b.find(item => item.emp_id === employee.id)) {
    employee.selected = true;
  } 
  else employee.selected = false;
  return employee;
});

console.log(selectedEmployee);

正如@GuillaumeBrunerie 所指出的，上面的代碼將修改原始陣列。不變的解決方案是：

const Employees=[
  {id :1 , name:'Ahmed',age:22},
  {id :2 , name:'hassan',age:43},
  {id :3 , name:'john',age: 44},
  {id :4, name:'salem',age:66} ]

const b=[{emp_id :1 , name:'Ahmed'},{emp_id :4, name:'salem'} ];

const selectedEmployee = Employees.map((employee) => ({...employee, isSelected: !!b.find(item => item.emp_id === employee.id)}));

console.log(selectedEmployee);

標籤：javascript反应

上一篇：如何為迭代的多個陣列回傳jsx？

下一篇：我無法覆寫reactui庫中的組件樣式