Использование фильтра для возврата только определенного свойства ключа

Question

У меня есть объект массива, и внутри этого объекта массива мне нужно отфильтровать и создать массив на основе свойства isVerfied.

Если свойство isVerfied имеет значение true, мне просто нужно передать свойство 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

Вы можете использовать reduce

const users = [{name: 'Varun',age: '18',isVerfied: 'true'},{name: 'Rahul',age: '12',},]

const verfiedUserNameNew = users.reduce((op,{name,isVerfied}) => {
  if (isVerfied) op.push(name)
  return op
}, [])

console.log(verfiedUserNameNew)

Answer 2

Ни filter, ни map сами по себе не могут этого сделать.

У вас есть несколько вариантов:

1. filter, а затем map. Это просто и понятно и подходит для массивов до сотен или менее тысяч записей (по крайней мере), так как он делает два прохода через данные (ну, один проход через все данные и второй проход через отфильтрованный результат) , Если вы не имеете дело с действительно массивным массивом, не должно быть никаких проблем с производительностью.
2. Используйте простой цикл и добавьте массив, созданный до цикла.
3. Используйте reduce, что обычно делают люди, хотя, честно говоря, это просто дополнительное осложнение поверх # 2.

Вот # 1:

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

Live Copy:

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);

Я также исправил две другие проблемы:

1. Исправлено написание isVerified
2. Используется логическое значение, а не строка, для isVerified

Вот # 2:

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

Live Copy:

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = [];
for (const {isVerified, name} of users) {
  if (isVerified) {
    verfiedUserNameNew.push(name);
  }
}

console.log(verfiedUserNameNew);

Вот # 3, но, опять же, это просто более сложная, сложная для чтения и отладки версия # 2:

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

Live Copy:

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = users.reduce((verified, {isVerified, name}) => {
  if (isVerified) {
    verified.push(name);
  }
  return verified;
}, []);

console.log(verfiedUserNameNew);

Вы увидите, как люди делают это:

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

или аналогичный, чтобы он выглядел так, как будто это проще, чем оно есть, но, хорошо ...: -)