Wie überspringt man ein Element in .map()?

Question

Wie kann ich ein Array-Element in .map überspringen?

Mein Code:

var sources = images.map(function (img) {
    if(img.src.split('.').pop() === "json"){ // wenn die Erweiterung .json ist
        return null; // überspringen
    }
    else{
        return img.src;
    }
});

Dies wird zurückgeben:

["img.png", null, "img.png"]

Answer 1

const arr = [0, 1, '', undefined, false, 2, undefined, null, , 3, NaN];
const filtered = arr.filter(Boolean);
console.log(filtered);

/*
    Output: [ 1, 2, 3 ]
*/

Answer 2

If it null or undefined in one line ES5/ES6

//wird ein Array von src zurückgeben 
images.filter(p=>!p.src).map(p=>p.src);//p = Property

//in Ihrer Bedingung
images.filter(p=>p.src.split('.').pop() !== "json").map(p=>p.src);

Answer 3

Ich verwende .forEach zum Iterieren und Ergebnisse in das Array results zu pushen und es dann zu verwenden. Mit dieser Lösung durchlaufe ich das Array nicht zweimal

Answer 4

Sie können es nach Ihrer Methode map() verwenden. Die Methode filter() zum Beispiel in Ihrem Fall:

var sources = images.map(function (img) {
  if(img.src.split('.').pop() === "json"){ // wenn die Erweiterung .json ist
    return null; // überspringen
  }
  else {
    return img.src;
  }
});

Die Methode filter:

const sourceFiltered = sources.filter(item => item)

Dann sind nur die vorhandenen Elemente im neuen Array sourceFiltered.

Answer 5

Hier ist eine aktualisierte Version des Codes, bereitgestellt von @theprtk. Es wurde ein wenig aufgeräumt, um die verallgemeinerte Version anzuzeigen, während ein Beispiel vorhanden ist.

Hinweis: Ich würde das gerne als Kommentar zu seinem Beitrag hinzufügen, aber ich habe noch nicht genug Reputation

/**
 * @siehe http://clojure.com/blog/2012/05/15/anatomy-of-reducer.html
 * @Beschreibung Funktionen, die reduzierende Funktionen transformieren
 */
const transduce = {
  /** ein generisches map(), das eine reducing() entgegennehmen kann und eine andere reducing() zurückgibt */
  map: changeInput => reducing => (acc, input) =>
    reducing(acc, changeInput(input)),
  /** ein generisches filter(), das eine reducing() entgegennehmen kann und zurückgibt */
  filter: predicate => reducing => (acc, input) =>
    predicate(input) ? reducing(acc, input) : acc,
  /**
   * ein composing() der eine unendlich lange Anzahl von Transducern entgegennehmen kann
   * reduzierende Funktionen, um einen berechneten Akkumulator zu komponieren, ohne jemals
   * das Zwischenarray zu erstellen
   */
  compose: (...args) => x => {
    const fns = args;
    var i = fns.length;
    while (i--) x = fns[i].call(this, x);
    return x;
  },
};

const example = {
  data: [{ src: 'file.html' }, { src: 'file.txt' }, { src: 'file.json' }],
  /** Hinweis: `[1,2,3].reduce(concat, [])` -> `[1,2,3]` */
  concat: (acc, input) => acc.concat([input]),
  getSrc: x => x.src,
  filterJson: x => x.src.split('.').pop() !== 'json',
};

/** Schritt 1: Erstellen einer reduzierenden Funktion, die an `reduce` übergeben werden kann */
const reduceFn = example.concat;
/** Schritt 2: Transformieren Ihrer reduzierenden Funktion durch Mapping */
const mapFn = transduce.map(example.getSrc);
/** Schritt 3: Erstellen Sie Ihre filter() Funktion, die auf einer Eingabe operiert */
const filterFn = transduce.filter(example.filterJson);
/** Schritt 4: Aggregieren Sie Ihre Transformationen */
const composeFn = transduce.compose(
  filterFn,
  mapFn,
  transduce.map(x => x.toUpperCase() + '!'), // neue Zuordnung()
);

/**
 * Erwarteter Beispieloutput
 *  Hinweis: jedes ist in `example.data.reduce(x, [])` eingewickelt
 *  1: ['file.html', 'file.txt', 'file.json']
 *  2:  ['file.html', 'file.txt']
 *  3: ['FILE.HTML!', 'FILE.TXT!']
 */
const exampleFns = {
  transducers: [
    mapFn(reduceFn),
    filterFn(mapFn(reduceFn)),
    composeFn(reduceFn),
  ],
  raw: [
    (acc, x) => acc.concat([x.src]),
    (acc, x) => acc.concat(x.src.split('.').pop() !== 'json' ? [x.src] : []),
    (acc, x) => acc.concat(x.src.split('.').pop() !== 'json' ? [x.src.toUpperCase() + '!'] : []),
  ],
};
const execExample = (currentValue, index) =>
  console.log('Beispiel ' + index, example.data.reduce(currentValue, []));

exampleFns.raw.forEach(execExample);
exampleFns.transducers.forEach(execExample);