js utilise des exemples d'API qui peuvent parcourir des tableaux à partager

Il existe de nombreuses API en js qui peuvent parcourir les tableaux. Puisqu'elles sont si bien encapsulées, pourquoi ne pas les utiliser lors du développement normal ? Cet article parle de l'utilisation d'API telles que forEach, map, filter, some, each et ? Réduire, et ils sont similaires aux API ordinaires. L'instruction for est utilisée à des fins de comparaison. Cet article partage principalement avec vous des exemples d'API d'utilisation de tableaux traversables en js. J'espère que cela pourra vous aider.

Nous utilisons un tableau d'objets comme données de test :

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

forEach

imprime les ID de tous les objets. L'instruction for est écrite comme suit :

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

Simple et facile à comprendre, voyons comment écrire forEach :

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

Les résultats des deux sont les mêmes. L'instruction for est un style de programmation impératif, tandis que. forEach est un style de programmation déclaratif ; le premier indique à la machine comment le faire, tandis que le second se concentre uniquement sur ce qu'il faut faire. Nous recommandons cette dernière façon d'écrire et devrions essayer d'utiliser forEach, afin de ne pas avoir besoin d'écrire une longue série d'expressions dans for(), alors pourquoi pas. (ps : si vous êtes pointilleux sur les performances, utilisez simplement for !)

map

Maintenant, nous voulons obtenir les noms de tous les objets et former un nouveau tableau. L'instruction for s'écrit comme suit. suit :

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

C'est un peu verbeux. Pour ce problème d'effectuer des opérations spécifiées sur chaque élément du tableau d'origine et enfin de renvoyer le nouveau tableau, map est la solution parfaite :

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

Comparée à la déclaration for, la carte est comme c'est élégant !

Concernant la carte, il y a quelque chose à noter :

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

Certains étudiants ici peuvent être un peu confus, pourquoi le résultat n'est-il pas [1, 2, 3] ?

En fait, c'est très simple. map transmettra trois paramètres (l'élément actuellement parcouru, l'index de l'élément actuel et le tableau d'origine lui-même) à parseInt, et parseInt peut avoir deux paramètres.

À ce stade, cela équivaut à exécuter le code suivant :

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

Le résultat est donc [1, NaN, NaN], et non [1, 2, 3].

filtrer

Parfois, nous devons filtrer des éléments qui répondent à des conditions spécifiées, comme des objets dont l'âge est supérieur à 18 ans. Car s'écrit comme suit :

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 } ]

Comme vous pouvez le voir, l'écriture est très verbeuse, mais il est très pratique d'utiliser le filtre en ce moment :

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

le filtre peut également être utilisé pour supprimer les doublons des tableaux. Le code est le suivant :

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

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

carte + filtre

Pour obtenir un certain attribut de tous les objets, vous devez déterminer à l'avance si l'objet a cet attribut, car c'est un peu moche à écrire :

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'); // [ '张三', '李四', '王小二' ]

La combinaison carte + filtre est beaucoup plus élégante :

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

Prenons un autre exemple courant. Par exemple, nous devons obtenir les noms de tous les objets du tableau dont l'âge est. supérieur à 18. L'instruction for est la suivante :

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); // [ '李四', '王小二' ]

Regardons comment s'écrit map + filter :

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

Toujours très élégant.

certains

Parfois nous devons ajouter de nouveaux objets mais certains attributs ne peuvent pas être répétés. L'écriture de for est la suivante :

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

    return false;
}

une méthode teste certains éléments dans. le tableau S'il réussit le test de la fonction spécifiée est réécrit comme suit :

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

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

chaque

Nous devons détecter si chaque objet d'un tableau a un certain attribut. for est le suivant :

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

    return true;
}

La méthode each teste si tous les éléments du tableau réussissent le test de la fonction spécifiée. Réécrivez comme suit :

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

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

Sortez de la boucle

Parfois, il est nécessaire de terminer la boucle lorsque certaines conditions sont remplies, comme l'impression des informations sur l'objet jusqu'à ce que le nom soit Li Si :

pour utiliser 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 }
}

certains, lorsque la condition est vraie, retournent vrai pour sortir de la boucle :

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

chaque fois, lorsque la condition est vrai, retournez false pour sortir de la boucle :

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

Parce que forEach n'a pas de pause, ici nous pouvons utiliser some and each à la place.

réduire

Calculer la somme de [343, 34, 232, 4, 343, 335, 353535], car s'écrit comme suit :

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

Utiliser réduire pour le faire Cette opération d'accumulation est très pratique :

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

En fait, l'application pratique est bien plus que cela. Les étudiants peuvent l'accumuler lentement dans leurs études ou leur travail quotidiens.

Résumé : vous devriez essayer d'utiliser ces API lors de la traversée de tableaux. Une utilisation flexible peut rendre le code plus élégant. Ce style d'utilisation des fonctions et des appels en chaîne autant que possible est très proche de la programmation fonctionnelle et peut améliorer le code. qualité.

Recommandations associées :

Résumé des méthodes JavaScript pour parcourir des tableaux

Résumé JQuery de divers exemples de codes pour parcourir des tableaux et des objets json

Un résumé de plusieurs utilisations des tableaux traversants php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!