Bir diziyi aynı anda eşleyin ve filtreleyin

Yeni bir filtrelenmiş dizi oluşturmak için yinelemek istediğim bir dizi nesnem var. Ama ayrıca, bir parametreye bağlı olarak bazı nesneleri yeni diziden filtrelemem gerekiyor. Bunu deniyorum:

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

Bu iyi bir yaklaşım mı? Daha iyi bir yöntem var mı? Lodash gibi herhangi bir kütüphaneyi kullanmaya açığım.

Bunun Array.reduceiçin kullanmalısınız .

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>

Alternatif olarak, indirgeyici bunun gibi saf bir işlev olabilir

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

Azalt, Luke!

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

2019'dan beri Array.prototype.flatMap iyi bir seçenektir.

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

Yukarıda bağlantısı verilen MDN sayfasından:

flatMapbir harita sırasında öğe eklemek ve kaldırmak (öğe sayısını değiştirmek) için bir yol olarak kullanılabilir. Başka bir deyişle, her zaman bire bir yerine birçok öğeyi (her bir girdi öğesini ayrı ayrı ele alarak) birçok öğeyle eşlemenize olanak tanır. Bu anlamda filtrenin tersi gibi çalışır. Öğeyi korumak için 1 öğeli bir dizi, öğe eklemek için çok öğeli bir dizi veya öğeyi kaldırmak için 0 öğeli bir dizi döndürmeniz yeterlidir.

ES6 ile bunu çok kısa sürede yapabilirsiniz:

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

reduceES6 fantezi yayılma sözdizimine sahip bir satır burada!

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

Bir yorum yapardım ama gerekli itibara sahip değilim. Maxim Kuzmin'in daha verimli hale getirmek için başka türlü çok iyi cevabında küçük bir gelişme:

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

Açıklama

Her bir yineleme için tüm sonucu tekrar tekrar yaymak yerine, yalnızca diziye ekleriz ve yalnızca gerçekten eklenecek bir değer olduğunda.

Bir noktada, bir 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>

Bununla birlikte , ve işlevlerini birleştiren bir malter()veya fap()işlev olsaydı iyi olurdu . Doğru veya yanlış döndürmek yerine bir filtre gibi çalışır, herhangi bir nesneyi veya boş / tanımsız döndürür.mapfilter

Cevapları aşağıdaki noktalarla optimize ettim:

1. yeniden Yazma if (cond) { stmt; }olarakcond && stmt;
2. ES6 Ok İşlevlerini Kullanın

Biri forEach'i , diğeri düşürmeyi kullanan iki çözüm sunacağım :

1.Çözüm: forEach'i kullanma

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.Çözüm: Azaltmayı kullanma

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

Hangi çözüme gideceğinize karar vermeyi size bırakıyorum.

Array.prototy.filter'ın kendisini kullanın

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

Azalt'ı kullanarak bunu bir Array.prototype işlevinde yapabilirsiniz. Bu, bir dizideki tüm çift sayıları alır.

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>

Aynı yöntemi kullanabilir ve nesneleriniz için genelleştirebilirsiniz, bunun gibi.

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

arr şimdi filtrelenmiş nesneleri içerecek.

Doğrudan kullanımının .reduceokunması zor olabilir, bu nedenle sizin için redüktörü oluşturan bir işlev oluşturmanızı tavsiye ederim:

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

Bunu şu şekilde kullanın:

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