从对象中过滤数据

Question

我正在尝试对象解构以使用新数组过滤数据，但是它给了我相同的数据。

我想过滤掉对象属性，以便在新数组中包含仅具有以下 3 个属性的对象：name、occupation、gender

试图获得任何建议。

const employee = [
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M',
    email: 'sam.camp@around.com',
    salary: 40000,
    location: 'Canada'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M',
    email: 'sara.cap@around.com',
    salary: 30000,
    location: 'USA'
  },
];

function filterData(arr) {
  arr.map(( name, occupation, gender ) => ({ name, occupation, gender }));

  return arr
}

console.log(filterData(employee));

Answer 1

因此，您似乎想为每个项目“提取”键值对。

const employeeRecords = [{
  name: 'sam',
  occupation: 'designer',
  gender: 'M',
  email: 'sam.doe@somewhere.com',
  salary: 40000,
}, {
  name: 'sara',
  occupation: 'developer',
  gender: 'M',
  email: 'sara.eyre@somewhere.com',
  salary: 10000,
}];

const pluckData = (arr) =>
  arr.map(({ name, occupation, gender }) => ({ name, occupation, gender }));

console.log(pluckData(employeeRecords));

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

或者，您可以传入一个键数组来采摘：

const employeeRecords = [{
  name: 'sam',
  occupation: 'designer',
  gender: 'M',
  email: 'sam.doe@somewhere.com',
  salary: 40000,
}, {
  name: 'sara',
  occupation: 'developer',
  gender: 'M',
  email: 'sara.eyre@somewhere.com',
  salary: 10000,
}];

const pluckData = (arr, ...keys) =>
  arr.map(item =>
    keys.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {}));

console.log(pluckData(employeeRecords, 'name', 'occupation', 'gender'));

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

Answer 2

您的 IDE 无法推断要传递给函数的数组的类型，因此它可以是任何类型。

您可以使用 JSDocs 为数组定义类型。

// @ts-check

// Typedefinitions

/**
 * @typedef EmployeeRecord
 *
 * @property {string} name
 * @property {string} occupation
 * @property {string} email
 * @property {string} gender
 * @property {number} salary
 */

/** @type {Array<EmployeeRecord>} */
const employeeRecords = [
  {
    name: "sam",
    occupation: "designer",
    gender: "M",
    email: "sam.doe@somewhere.com",
    salary: 40000,
  },
  {
    name: "sara",
    occupation: "developer",
    gender: "M",
    email: "sara.eyre@somewhere.com",
    salary: 10000,
  },
];

/**
 *
 * @param {Array<EmployeeRecord>} arr Array of employee records
 * @returns
 */
function filterData(arr) {
  const [{ name, occupation, gender }] = arr;

  return arr;
}

console.log(filterData(employeeRecords));

Answer 3

尝试以下方法：

可能有一种更优雅的方式，但它确实有效。

const employee = [
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M',
    email: 'sam.camp@around.com',
    salary: 40000,
    location: 'Canada'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M',
    email: 'sara.cap@around.com',
    salary: 30000,
    location: 'USA'
  },
];

function filterData(arr) {
  let arrFiltered = arr.map(item => {
    let container = {};
    container.name = item.name;
    container.occupation = item.occupation;
    container.gender = item.gender;
    return container
  })
  return arrFiltered
};

console.log(filterData(employee));

输出：

[
  {
    name: 'sam',
    occupation: 'designer',
    gender: 'M'
  },
  {
    name: 'sara',
    occupation: 'developer',
    gender: 'M'
  }
]

顺便说一句：我将location: 的属性值更正为字符串

location: canada 到 location: "Canada" 和 location: USA 到 location: "USA"

另外，您的代码中的变量存在问题：

我把console.log(filterData(employeeRecords))改成了console.log(filterData(employee))

我希望我正确理解了您的问题，并且这会有所帮助。

我刚刚从上面的 cmets 中看到 @Andreas 的 非常优雅 解决方案： （让我看起来很傻，哈哈哈）

function filterData(arr) {
  return arr.map(({ name, occupation, gender }) => ({ name, occupation, gender }))
};

恭喜@Andreas - 我测试了它，它就像一个魅力:-)