使用过滤器仅返回键的特定属性

Question

我有一个数组对象，在该数组对象中，我需要根据isVerfied属性过滤并创建一个数组。

如果isVerfied属性为真，我只需要推送对象的 name 属性而不是将整个对象推送到数组中

我试过这个，但它似乎没有工作，因为它正在推动整个对象。

const users = [
   {
         name: 'Varun', 
         age: '18', 
         isVerfied: 'true'
   }, 
   {
         name: 'Rahul', 
         age: '12', 
   }
]
 
const verfiedUserNameNew = users.filter(user => {
     if (user.isVerfied) return user.name
})

console.log(verfiedUserNameNew) 

我也试过地图

const users = [
  {
        name: 'Varun', 
        age: '18', 
        isVerfied: 'true'
  }, 
  {
        name: 'Rahul', 
        age: '12', 
  },
]
         
const verfiedUserNameNew = users.map(user => {
  if (user.isVerfied) return user.name
})

console.log(verfiedUserNameNew)

但随后它返回 varun 和 undefined。我知道另一种解决方案是创建一个数组并运行一个 for.Each 循环，在该循环中放置一个 if 条件，然后将元素推入一个数组中

const users = [
  {
        name: 'Varun', 
        age: '18', 
        isVerfied: 'true'
  }, 
  {
        name: 'Rahul', 
        age: '12', 
  },
]
     
const newArray = []
users.forEach(element => {
  if (element.isVerfied) {
        newArray.push(element.name) 
  } 
}) 
     
console.log(newArray)

但是我在想我们是否可以使用过滤方法来实现这一点？

Answer 1

无论是filter还是map 对自己能做到这一点。

您有多种选择：

1. filter然后map。这简单明了，适用于多达数百或数千个条目的数组（至少），因为它对数据进行了两次传递（好吧，一次传递所有数据，第二次传递过滤后的结果） . 除非您处理的是真正庞大的阵列，否则不应该有任何性能问题。
2. 使用一个简单的循环并推送到您在循环之前创建的数组。
3. 使用reduce，人们通常会这样做，尽管坦率地说，这只是 #2 之上的额外复杂性。

这是#1：

const verfiedUserNameNew = users
  .filter(user => user.isVerified)
  .map(({name}) => name);

实时复制：

const verfiedUserNameNew = users
  .filter(user => user.isVerified)
  .map(({name}) => name);

我还在那里修复了另外两个东西：

1. 修正了拼写 isVerified
2. 使用布尔值，而不是字符串，用于 isVerified

这是#2：

const verfiedUserNameNew = [];
for (const {isVerified, name} of users) {
  if (isVerified) {
    verfiedUserNameNew.push(name);
  }
}

实时复制：

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = users
  .filter(user => user.isVerified)
  .map(({name}) => name);

console.log(verfiedUserNameNew);

这是#3，但同样，这只是#2 的一个更复杂、更难阅读和调试的版本：

const verfiedUserNameNew = users.reduce((verified, {isVerified, name}) => {
  if (isVerified) {
    verified.push(name);
  }
  return verified;
}, []);

实时复制：

const verfiedUserNameNew = [];
for (const {isVerified, name} of users) {
  if (isVerified) {
    verfiedUserNameNew.push(name);
  }
}

你会看到人们这样做：

const verfiedUserNameNew = users.reduce((v, {isVerified, name}) => ((isVerified ? v.push(name) : undefined), v), []);

或类似的使它看起来比它更简单，但是，嗯...... :-)