Quelles sont les utilisations des fonctions de tableau ?

Plusieurs fois, vous pouvez être confus, vous devriez utiliser reduce plus ou vous ne devriez pas utiliser filter, mais map ou for, pourquoi ne pas utiliser ? N'est-ce pas trop déroutant ? forEach

En fait ? Les tableaux et les fonctions itératives sur les tableaux peuvent être déroutants pour les débutants, je vais donc essayer de simplifier le problème pour chacun, et la dernière question est : que voulez-vous retourner ?

Introduction

• Renvoyer une chose pour chaque chose existante :

  map()

• Renvoyer uniquement certaines choses existantes Choses :

  filter()

• Renvoie une seule chose :

  reduce()

• Ne renvoie rien, mais pour chaque Quelque chose existant faire quelque chose :

  forEach()

Ensuite, nous présenterons ces fonctions liées aux tableaux une par une, et utiliserons un exemple de fonction non-flèche et un exemple de fonction fléchée en même temps.

Renvoyer un nouvel élément pour chaque élément existant :

map()

Si vous avez un tableau et que vous souhaitez effectuer une opération sur chaque élément du tableau, renvoyez un tableau avec de nouvelles valeurs, alors utiliser

est le plus approprié. Voici une fonction simple qui prend un tableau et double chaque élément : map()

const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) {    return item * 2;
});
console.log(newArray); // -> [2, 4, 6]

Utilisation des fonctions fléchées d'ES6 :

const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]

Remarque : Avec la nouvelle fonction flèche syntaxe, nous n'avons pas besoin d'utiliser les mots-clés , function ou les accolades return. En effet, les fonctions fléchées fournissent des retours implicites pour des fonctions {} comme celle-ci. Vous pouvez en savoir plus sur les fonctions fléchées auprès de Wes Bos. simple()

Renvoie un nouveau tableau contenant uniquement quelques éléments de tableau existants qui répondent aux critères :

filter()

est probablement la fonction de tableau la plus simple à comprendre car elle porte si bien son nom. filter() Accepte une plage de valeurs, exécute une fonction ou une comparaison sur chaque valeur et renvoie un nouveau tableau. Ces valeurs passent son test (nous les appelons valeurs filter()véridiques).

Voici un exemple de prise d'un nombre supérieur à

dans un tableau, puis de renvoi d'un nouveau tableau qui remplit les conditions : 5

const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) {    return item > 5;
});
console.log(newArray); // -> [9, 42]

Utilisation des fonctions fléchées ES6 :

const newArray = originalArray.filter(item => item > 5);

Renvoyer une seule nouvelle chose :

reduce()

Parfois, vous avez une série de valeurs, mais vous souhaitez simplement en renvoyer une nouvelle chose. La fonction

dans un tableau exécute une fonction ou une comparaison sur chaque élément du tableau, puis effectue certaines opérations sur ce qu'on appelle un reduce()accumulateur. Il s'agit d'une fonction plus facile à décrire avec un exemple car la terminologie qu'elle décrit est tout aussi déroutante que la fonction elle-même.

Supposons que vous ayez un tableau de noms et que vous souhaitiez compter le nombre de fois où le nom

apparaît : Bob

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);
console.log(numberOfBobs); // -> 3

Utilisez les fonctions fléchées d'ES6 :

const numberOfBobs = originalArray.reduce((accumulator, item) => {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);

Comme vous pouvez le voir, cette fonction flèche ne nous fait pas gagner de temps car nous devons fournir deux arguments à la fonction puis avoir une logique avant de revenir, nous avons donc toujours besoin des accolades

. {}

Le

à la fin de la fonction reduce() est la valeur de départ de notre accumulateur, si la valeur que nous rencontrons est 0 alors on ajoute Bob, sinon on renvoie l'accumulateur actuel. Si vous ne renvoyez rien, 1 sera renvoyé la prochaine fois que vous exécuterez la fonction. undefined

Fait quelque chose avec chaque valeur du tableau, mais ne renvoie rien :

forEach()

Parfois, vous avez une série de valeurs que vous souhaitez traiter, mais que vous n'avez pas besoin de conserver piste de chaque fonction La valeur de retour de l'appel. C'est ce que

signifie. forEach()

const originalArray = [1, 2, 3];
originalArray.forEach(function(item) {
    doSomething(item);
});

Utilisation des fonctions fléchées d'ES6 :

originalArray.forEach( item => doSomething(item); );

Résumé

Simple et doux. Ce sont les exemples les plus simples que nous fournissons pour chaque fonction afin de la garder aussi simple que possible, principalement pour qu'il soit plus facile de comprendre quand vous devez les utiliser. Vous pouvez faire beaucoup de travail avec ces fonctions, et chaque fonction a un formulaire avancé qui fournit également l'index actuel :

arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})

Recommandations associées :

implémentation des fonctions php Array édition de table d'association

Les fonctions de tableau JS les plus pratiques organisées

Quelles sont les fonctions de tableau couramment utilisées

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!