Memetakan dan memfilter array pada saat yang bersamaan

Saya memiliki array objek yang ingin saya iterate untuk menghasilkan array yang difilter baru. Tetapi juga, saya perlu menyaring beberapa objek dari array baru tergantung dari suatu parameter. Saya mencoba ini:

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

Apakah itu pendekatan yang baik? Apakah ada metode yang lebih baik? Saya terbuka untuk menggunakan perpustakaan apa pun seperti lodash.

Anda harus menggunakannya Array.reduceuntuk ini.

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>

Atau, peredam bisa menjadi fungsi murni, seperti ini

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

Gunakan pengurangan, Luke!

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

Sejak 2019, Array.prototype.flatMap adalah pilihan yang baik.

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

Dari halaman MDN yang ditautkan di atas:

flatMapdapat digunakan sebagai cara untuk menambah dan menghapus item (memodifikasi jumlah item) selama peta. Dengan kata lain, ini memungkinkan Anda untuk memetakan banyak item ke banyak item (dengan menangani setiap item input secara terpisah), daripada selalu satu-ke-satu. Dalam hal ini, ini berfungsi seperti kebalikan dari filter. Cukup kembalikan array 1 elemen untuk menyimpan item, array multi-elemen untuk menambahkan item, atau array 0-elemen untuk menghapus item.

Dengan ES6 Anda dapat melakukannya dengan sangat singkat:

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

Satu baris reducedengan sintaksis penyebaran mewah ES6 ada di sini!

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

Saya akan berkomentar, tetapi saya tidak memiliki reputasi yang diperlukan. Sebuah peningkatan kecil untuk jawaban Maxim Kuzmin yang sebaliknya sangat baik untuk membuatnya lebih efisien:

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

Penjelasan

Alih-alih menyebarkan seluruh hasil berulang untuk setiap iterasi, kami hanya menambahkan ke array, dan hanya ketika sebenarnya ada nilai untuk disisipkan.

Gunakan Array.prototy.filter itu sendiri

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

Pada titik tertentu, bukankah lebih mudah (atau semudah) menggunakan a 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>

Namun alangkah baiknya jika ada malter()atau fap()fungsi yang menggabungkan mapdan filterfungsinya. Ini akan berfungsi seperti filter, kecuali bukannya mengembalikan benar atau salah, itu akan mengembalikan objek apa pun atau null / tidak terdefinisi.

Saya mengoptimalkan jawaban dengan poin-poin berikut:

1. Menulis ulang if (cond) { stmt; }sebagaicond && stmt;
2. Gunakan Fungsi Panah ES6

Saya akan menyajikan dua solusi, satu menggunakan forEach , yang lainnya dengan mengurangi :

Solusi 1: Menggunakan 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);

Solusi 2: Menggunakan mengurangi

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

Saya serahkan kepada Anda untuk memutuskan solusi mana yang harus dicari.

Menggunakan pengurangan, Anda dapat melakukan ini dalam satu fungsi Array.prototype. Ini akan mengambil semua angka genap dari array.

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>

Anda dapat menggunakan metode yang sama dan menggeneralisasikannya untuk objek Anda, seperti ini.

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

arr sekarang akan berisi objek yang difilter.

Penggunaan langsung .reducebisa sulit dibaca, jadi saya sarankan membuat fungsi yang menghasilkan peredam untuk Anda:

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

Gunakan seperti ini:

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'];