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

Warum nicht einfach eine forEach-Schleife verwenden?

let arr = ['a', 'b', 'c', 'd', 'e'];
let filtered = [];

arr.forEach(x => {
  if (!x.includes('b')) filtered.push(x);
});

console.log(filtered)   // filtered === ['a','c','d','e'];

Oder noch einfacher mit filter:

const arr = ['a', 'b', 'c', 'd', 'e'];
const filtered = arr.filter(x => !x.includes('b')); // ['a','c','d','e'];

Answer 2

Antwort ohne überflüssige Randfälle:

const thingsWithoutNulls = things.reduce((acc, thing) => {
  if (thing !== null) {
    acc.push(thing);
  }
  return acc;
}, [])

Answer 3

var sources = images.map(function (img) {
    if(img.src.split('.').pop() === "json"){ // if extension is .json
        return null; // überspringen
    }
    else{
        return img.src;
    }
}).filter(Boolean);

Der .filter(Boolean) filtert alle falschen Werte in einem gegebenen Array aus, was in Ihrem Fall das null ist.

Answer 4

Um auf den Kommentar von Felix Kling einzugehen, können Sie .filter() wie folgt verwenden:

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

Dadurch werden falsche Werte aus dem Array entfernt, das von .map() zurückgegeben wird.

Sie könnten es weiter vereinfachen, wie folgt:

var sources = images.map(function (img) {
  if(img.src.split('.').pop() !== "json") { // wenn die Erweiterung nicht .json ist
    return img.src;
  }
}).filter(Boolean);

Oder sogar als Einzeiler mit einem Pfeilfunktion, Objektzerstörung und dem && Operator:

var sources = images.map(({ src }) => src.split('.').pop() !== "json" && src).filter(Boolean);

Answer 5

Hier ist eine Hilfsmethode (kompatibel mit ES5), die nur nicht-nulle Werte abbildet (versteckt den Aufruf von reduce):

function mapNonNull(arr, cb) {
    return arr.reduce(function (accumulator, value, index, arr) {
        var result = cb.call(null, value, index, arr);
        if (result != null) {
            accumulator.push(result);
        }

        return accumulator;
    }, []);
}

var result = mapNonNull(["a", "b", "c"], function (value) {
    return value === "b" ? null : value; // "b" ausschließen
});

console.log(result); // ["a", "c"]