Карту и фильтровать массив одновременно в Javascript

Question

У меня есть массив объектов, которые я хочу перебрать для создания нового фильтрованного массива. Но также, мне нужно отфильтровать некоторые из объектов из нового массива в зависимости от параметра. Я пробовал это:

function renderOptions(options) { 
    return options.map(function (option) { 
     if (!option.assigned) { 
      return (someNewObject); 
     } 
    }); 
} 

Это хороший подход? Есть ли лучший метод? Я открыт для использования любой библиотеки, такой как lodash.

Answer 1

Вы должны использовать Array.reduce для этого.

var options = [ 
 
    { name: 'One', assigned: true }, 
 
    { name: 'Two', assigned: false }, 
 
    { name: 'Three', assigned: true }, 
 
]; 
 

 
var reduced = options.reduce(function(filtered, option) { 
 
    if (option.assigned) { 
 
    var someNewValue = { name: option.name, newProperty: 'Foo' } 
 
    filtered.push(someNewValue); 
 
    } 
 
    return filtered; 
 
}, []); 
 

 
document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1> 
 
<pre id="output"> </pre>

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 2

Используйте Array.prototy.filter сам

function renderOptions(options) { 
    return options.filter(function(option){ 
     return !option.assigned; 
    }).map(function (option) { 
     return (someNewObject); 
    }); 
} 

Answer 3

Использование уменьшить, Люк!

function renderOptions(options) { 
    return options.reduce(function (res, option) { 
     if (!option.assigned) { 
      res.push(someNewObject); 
     } 
     return res; 
    }, []); 
} 

Answer 4

Используя сокращение, вы можете сделать это в одной функции Array.prototype. Это позволит получить все четные числа из массива.

var arr = [1,2,3,4,5,6,7,8]; 
 

 
var brr = arr.reduce(function(c,n){ 
 
    if(n%2!=0){ 
 
     return c; 
 
    } 
 
    c.push(n); 
 
    return c; 
 

 
},[]); 
 

 
document.getElementById('mypre').innerHTML = brr.toString();

<h1>Get all even numbers</h1> 
 
<pre id="mypre"> </pre>

Вы можете использовать тот же метод и обобщать его для ваших объектов, как это.

var arr = options.reduce(function(c,n){ 
    if(somecondition){return c;} 
    c.push(n); return c; 
},[]); 

arr теперь будет содержать отфильтрованные объекты.

Answer 5

С ES6 вы можете сделать это очень коротко:

options.filter(opt => !opt.assigned).map(opt => someNewObject)

Answer 6

В какой-то момент, не проще (или же просто) использовать forEach

var options = [ 
 
    { name: 'One', assigned: true }, 
 
    { name: 'Two', assigned: false }, 
 
    { name: 'Three', assigned: true }, 
 
]; 
 

 
var reduced = [] 
 
options.forEach(function(option) { 
 
    if (option.assigned) { 
 
    var someNewValue = { name: option.name, newProperty: 'Foo' } 
 
    reduced.push(someNewValue); 
 
    } 
 
}); 
 

 
document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1> 
 
<pre id="output"> </pre>

Однако было бы неплохо, если бы был malter() или fap(), который объединяет функции map и filter. Он будет работать как фильтр, но вместо того, чтобы возвращать true или false, он возвращает любой объект или null/undefined.

Answer 7

Я оптимизировал ответы со следующими точками:

1. переписывания if (cond) { stmt; } в cond && stmt;
2. Использовать обычные ES6 Arrow Functions

Я представлю два решения, один с помощью forEach, другой с помощью reduce :

Solut иона 1: Использование Foreach

var options = [ 
 
    { name: 'One', assigned: true }, 
 
    { name: 'Two', assigned: false }, 
 
    { name: 'Three', assigned: true }, 
 
]; 
 
var reduced = [] 
 
options.forEach(o => { 
 
    o.assigned && reduced.push({ name: o.name, newProperty: 'Foo' }); 
 
}); 
 
console.log(reduced);

Решение 2: Использование уменьшить

var options = [ 
 
    { name: 'One', assigned: true }, 
 
    { name: 'Two', assigned: false }, 
 
    { name: 'Three', assigned: true }, 
 
]; 
 
var reduced = options.reduce((a, o) => { 
 
    o.assigned && a.push({ name: o.name, newProperty: 'Foo' }); 
 
    return a; 
 
}, [ ]); 
 
console.log(reduced);

Я оставляю это до вас, чтобы решить, какое решение пойдите для.