Question

老实说，我不知道如何解释这个问题。我试图用一个例子来解释这个问题。假设我有两个这样的数组

const columns = [
  {name: 'total_sent', title: 'Total Sent'},
  {name: 'date', title: 'Date'},
  {name: 'total_post', title: 'Total Post'},
];

const tableData = [
  {id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200},
  {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250},
  {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110},
  {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20},
  {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260},
];

现在我想要一个像 tableData 这样的新数组，但对象应该只有 total_sent、total_post 和 date 属性。这些选定的属性来自 columns 数组。

预期的输出必须是这样的

const newArr = [
  { total_post: 101, date: new Date(), total_sent: 200 },
  { total_post: 401, date: new Date(), total_sent: 250 },
  { total_post: 151, date: new Date(), total_sent: 110 },
  { total_post: 361, date: new Date(), total_sent: 20 },
  { total_post: 231, date: new Date(), total_sent: 260 },
];

地图和过滤方法更可取。

Answer 1

兄弟你可以试试这个。谢谢。

const columns = [
  {name: 'total_sent', title: 'Total Sent'},
  {name: 'date', title: 'Date'},
  {name: 'total_post', title: 'Total Post'},
];
const tableData = [
  {id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200},
  {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250},
  {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110},
  {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20},
  {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260},
];

const newArr = tableData.map(el => {
  const newEl = {};
  columns.forEach(column => newEl[column.name] = el[column.name])
  
  return newEl;
});

console.log(newArr);

Answer 2

使用 map 和 every：

const columns = [{name: 'total_sent', title: 'Total Sent'}, {name: 'date', title: 'Date'}, {name: 'total_post', title: 'Total Post'}];
const tableData = [{id: 1, total_post: 101, action: 'deleted', date: new Date(), total_sent: 200}, {id: 2, total_post: 401, action: 'deleted', date: new Date(), total_sent: 250}, {id: 3, total_post: 151, action: 'edited', date: new Date(), total_sent: 110}, {id: 4, total_post: 361, action: 'deleted', date: new Date(), total_sent: 20}, {id: 5, total_post: 231, action: 'edited', date: new Date(), total_sent: 260}];
const filterProps = columns.map(col => col.name);
const newArr = tableData.map(el => {
  const e = {...el};
  for (const prop in e) if (filterProps.every(filterProp => prop !== filterProp)) delete e[prop];
  return e;  
})

console.log(newArr);

Answer 3

你可以试试这个。

2021-2014

请注意，这使用了 LODASH 7 函数，它添加了额外的依赖项。

从javascript中的对象数组过滤对象属性

3 个答案: