Mapuj i filtruj tablicę w tym samym czasie

Mam tablicę obiektów, które chcę iterować, aby utworzyć nową filtrowaną tablicę. Ale także muszę odfiltrować niektóre obiekty z nowej tablicy w zależności od parametru. Próbuję tego:

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

Czy to dobre podejście? Czy jest lepsza metoda? Jestem otwarty na korzystanie z dowolnej biblioteki, takiej jak lodash.

Powinieneś użyć Array.reducedo tego.

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>

Alternatywnie, reduktor może być czystą funkcją, jak ta

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

Użyj redukcji, Luke!

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

Od 2019 roku Array.prototype.flatMap jest dobrą opcją.

options.flatMap(o => o.assigned ? [o.name] : []);

Z powyższej strony MDN:

flatMapmoże służyć jako sposób na dodawanie i usuwanie elementów (modyfikowanie liczby elementów) na mapie. Innymi słowy, umożliwia mapowanie wielu elementów do wielu elementów (poprzez obsługę każdego elementu wejściowego osobno) zamiast zawsze jeden do jednego. W tym sensie działa jak przeciwieństwo filtra. Po prostu zwróć tablicę 1-elementową, aby zachować element, tablicę wieloelementową, aby dodać elementy, lub tablicę 0-elementową, aby usunąć element.

Z ES6 możesz to zrobić bardzo krótko:

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

Jedna linia reducez fantazyjną składnią rozszerzania ES6 jest tutaj!

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

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);

Zrobiłbym komentarz, ale nie mam wymaganej reputacji. Małe ulepszenie w stosunku do bardzo dobrej odpowiedzi Maxima Kuzmina, aby uczynić ją bardziej wydajną:

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

const filtered = options
  .reduce((result, { name, assigned }) => assigned ? result.concat(name) : result, []);

console.log(filtered);

Wyjaśnienie

Zamiast rozprowadzać cały wynik w kółko dla każdej iteracji, dopisujemy tylko do tablicy i tylko wtedy, gdy faktycznie istnieje wartość do wstawienia.

Użyj samego Array.prototy.filter

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

W pewnym momencie, czy nie jest łatwiej (lub równie łatwo) używać pliku 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>

Byłoby jednak miło, gdyby istniała funkcja malter()lub fap()łącząca funkcje mapi filter. Działałby jak filtr, z tą różnicą, że zamiast zwracać wartość true lub false, zwróciłby dowolny obiekt lub wartość null / undefined.

Zoptymalizowałem odpowiedzi, uwzględniając następujące punkty:

1. Przepisując if (cond) { stmt; }jakocond && stmt;
2. Użyj funkcji strzałek ES6

Przedstawię dwa rozwiązania, jedno wykorzystujące forEach , drugie wykorzystujące redukuj :

Rozwiązanie 1: Korzystanie z 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);

Rozwiązanie 2: Korzystanie z programu Redukcja

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

Decyzja o wyborze rozwiązania pozostawiam Tobie.

Używając redukuj, możesz to zrobić w jednej funkcji Array.prototype. Spowoduje to pobranie wszystkich liczb parzystych z tablicy.

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

var brr = arr.reduce((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>

Możesz użyć tej samej metody i uogólnić ją dla swoich obiektów, w ten sposób.

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

arr będzie teraz zawierać przefiltrowane obiekty.

Bezpośrednie użycie .reducemoże być trudne do odczytania, dlatego polecam utworzenie funkcji, która generuje reduktor:

function mapfilter(mapper) {
  return (acc, val) => {
    const mapped = mapper(val);
    if (mapped !== false)
      acc.push(mapped);
    return acc;
  };
}

Użyj go w ten sposób:

const words = "Map and filter an array #javascript #arrays";
const tags = words.split(' ')
  .reduce(mapfilter(word => word.startsWith('#') && word.slice(1)), []);
console.log(tags);  // ['javascript', 'arrays'];