js verwendet API-Beispiele, die Arrays zum Teilen durchlaufen können

Es gibt viele APIs in js, die Arrays durchqueren können. Warum nicht sie während der normalen Entwicklung verwenden? Reduzieren, und sie ähneln gewöhnlichen APIs. Die for-Anweisung wird zum Vergleich verwendet. In diesem Artikel werden hauptsächlich API-Beispiele für die Verwendung durchquerbarer Arrays in js vorgestellt. Ich hoffe, er kann Ihnen helfen.

Wir verwenden ein Objektarray als Testdaten:

const testArr = [
    { id: 1, name: '张三', age: 18 }, 
    { id: 2, name: '李四', age: 24 }, 
    { id: 3, name: '王小二', age: 22 }
];

forEach

gibt die IDs aller Objekte aus. Die for-Anweisung wird wie folgt geschrieben:

for (let i = 0, len = testArr.length; i < len; i++) {
    console.log(testArr[i].id); // 1, 2, 3
}

Einfach und leicht zu verstehen, werfen wir einen Blick darauf, wie man forEach schreibt:

testArr.forEach(item => console.log(item.id)); // 1, 2, 3

Die Ergebnisse der beiden sind die gleichen. Die for-Anweisung ist ein imperativer Programmierstil forEach ist ein deklarativer Programmierstil; ersterer sagt der Maschine, wie es zu tun ist, während sich letzterer nur darauf konzentriert, was zu tun ist. Wir empfehlen die letztere Schreibweise und sollten versuchen, forEach zu verwenden, damit wir keine lange Reihe von Ausdrücken in for() schreiben müssen. Warum also nicht? (ps: Wenn Sie wählerisch sind, was die Leistung angeht, verwenden Sie einfach for!)

map

Jetzt wollen wir die Namen aller Objekte abrufen und ein neues Array bilden. Die for-Anweisung wird geschrieben als folgt:

let names = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    names.push(testArr[i].name);
}

console.log(names); // [ &#39;张三&#39;, &#39;李四&#39;, &#39;王小二&#39; ]

Für dieses Problem, bestimmte Operationen für jedes Element des ursprünglichen Arrays auszuführen und schließlich das neue Array zurückzugeben, ist Map die perfekte Lösung:

testArr.map(item => item.name); // [ '张三', '李四', '王小二' ]

Im Vergleich zur for-Anweisung ist die Karte wie elegant!

Bezüglich der Karte gibt es etwas zu beachten:

[1, 2, 3].map(parseInt); // [ 1, NaN, NaN ]

Einige Schüler hier sind möglicherweise etwas verwirrt. Warum ist das Ergebnis nicht [1, 2, 3]?

Tatsächlich ist es sehr einfach, dass map drei Parameter (das aktuell durchlaufene Element, den aktuellen Elementindex und das ursprüngliche Array selbst) an parseInt übergibt, und parseInt kann zwei Parameter haben.

Zu diesem Zeitpunkt entspricht es der Ausführung des folgenden Codes:

parseInt(1, 0); // 1
parseInt(2, 1); // NaN
parseInt(3, 2); // NaN

Das Ergebnis ist also [1, NaN, NaN], nicht [1, 2, 3].

Filter

Manchmal müssen wir Elemente herausfiltern, die bestimmte Bedingungen erfüllen, z. B. Objekte, deren Alter älter als 18 Jahre ist. For wird wie folgt geschrieben:

let newArr = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newArr.push(testArr[i]);
    }
}

console.log(newArr); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

Wie Sie sehen können, ist die Schreibmethode sehr ausführlich, aber es ist zu diesem Zeitpunkt sehr praktisch, Filter zu verwenden:

testArr.filter(item => item.age > 18); // [ { id: 2, name: '李四', age: 24 }, { id: 3, name: '王小二', age: 22 } ]

Filter kann auch zum Entfernen von Duplikaten aus Arrays verwendet werden. Der Code lautet wie folgt:

const arr2 = [1, 2, 4, 1, 3, 2, 6];

arr2.filter((item, idx, arr) => {
    return arr.indexOf(item) === idx;
}); // [ 1, 2, 4, 3, 6 ]

Karte + Filter

Um ein bestimmtes Attribut aller Objekte zu erhalten, müssen Sie im Voraus feststellen, ob das Objekt dieses Attribut hat. Es ist etwas hässlich zu schreiben:

function getAllOfSomeProps (array, props) {
    let arr = [];

    array.forEach((item) => {           
        if (item[props]) {
            arr.push(item[props]); // => item[props] && arr.push(item[props])
        }
    })

    return arr;
}

getAllOfSomeProps(testArr, 'sex'); // []
getAllOfSomeProps(testArr, 'id'); // [ 1, 2, 3 ]
getAllOfSomeProps(testArr, 'name'); // [ '张三', '李四', '王小二' ]

Die Kombination aus Karte + Filter ist viel eleganter:

return array.map(item => item[props]).filter(item => item);

Nehmen wir ein weiteres gängiges Beispiel: Wir müssen zum Beispiel die Namen aller Objekte im Array ermitteln, deren Alter ist größer als 18. Die for-Anweisung lautet wie folgt:

let newNames = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newNames.push(testArr[i].name);
    }
}

console.log(newNames); // [ '李四', '王小二' ]

Schauen wir uns an, wie man Karte + Filter schreibt:

testArr.filter(item => item.age > 18).map(item => item.name); // [ '李四', '王小二' ]

Immer noch sehr elegant.

einige

Manchmal müssen wir neue Objekte hinzufügen, aber einige Attribute können nicht wiederholt werden. Die Schreibweise von for lautet wie folgt:

function isRepeat (array, props, value) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (array[i][props] === value) {
            return true;
        }
    }

    return false;
}

Einige Methoden testen bestimmte Elemente in Ob das Array den Test der angegebenen Funktion besteht, wird wie folgt umgeschrieben:

function isRepeat (array, props, value) {
    return array.some(item => item[props] === value);
}

isRepeat(testArr, 'name', '张三'); // true
isRepeat(testArr, 'name', '李白'); // false

jedes

Wir müssen erkennen, ob jedes Objekt in einem Array ein bestimmtes Attribut hat for lautet wie folgt:

function hasSomeProps (array, props) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (!array[i][props]) {
            return false;
        }
    }

    return true;
}

Die every-Methode testet, ob alle Elemente des Arrays den Test der angegebenen Funktion bestehen. Schreiben Sie wie folgt um:

function hasSomeProps (array, props) {
    return array.every(item => item[props]);
}

hasSomeProps(testArr, 'name'); // true

Brechen Sie aus der Schleife aus

Manchmal ist es notwendig, die Schleife zu beenden, wenn bestimmte Bedingungen erfüllt sind, z. B. das Drucken von Objektinformationen, bis der Name Li Si lautet:

für die Verwendung von break:

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].name === &#39;李四&#39;) {
        break;
    }
    console.log(testArr[i]); // { id: 1, name: &#39;张三&#39;, age: 18 }
}

some, wenn die Bedingung wahr ist, geben true zurück, um aus der Schleife zu springen:

testArr.some((item) => {
    if (item.name === '李四') {
        return true;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

every, wenn die Bedingung erfüllt ist wahr ist, geben Sie false zurück, um aus der Schleife zu springen:

testArr.every((item) => {
    if (item.name === '李四') {
        return false;
    }
    console.log(item); // { id: 1, name: '张三', age: 18 }
})

Da forEach keine Pause hat, können wir hier stattdessen some und every verwenden.

Reduzieren

Berechnen Sie die Summe von [343, 34, 232, 4, 343, 335, 353535], denn wird wie folgt geschrieben:

const arr = [343, 34, 232, 4, 343, 335, 353535];

let sum = 0;
for (let i = 0, len = arr.length; i < len; i++) {
    sum += arr[i];
}
console.log(sum); // 354826

Verwenden Sie Reduzieren Um dies zu tun, ist dieser Akkumulationsvorgang sehr praktisch:

arr.reduce((prev, curr) => prev + curr) // 354826

Tatsächlich ist die praktische Anwendung weitaus mehr als das. Die Schüler können sie langsam in ihrem täglichen Studium oder ihrer Arbeit ansammeln.

Zusammenfassung: Sie sollten versuchen, diese APIs beim Durchlaufen von Arrays zu verwenden. Diese Art der Verwendung von Funktionen und Kettenaufrufen kommt der funktionalen Programmierung sehr nahe und kann den Code verbessern Qualität.

Verwandte Empfehlungen:

Zusammenfassung der JavaScript-Methoden zum Durchlaufen von Arrays

JQuery-Zusammenfassung verschiedener Beispielcodes zum Durchlaufen von Arrays und JSON-Objekten

Eine Zusammenfassung verschiedener Verwendungen von PHP beim Durchlaufen von Arrays

Das obige ist der detaillierte Inhalt vonjs verwendet API-Beispiele, die Arrays zum Teilen durchlaufen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!