web-dev-qa-db-fra.com

JavaScript - Obtenir un élément de tableau remplissant une condition

J'apprends le JavaScript avec W3C et je n'ai pas trouvé de réponse à cette question.

J'essaie de faire des manipulations sur des éléments de tableau qui remplissent certaines conditions.

Existe-t-il un moyen de le faire autre que d’exécuter sur les éléments du tableau dans une boucle for??. Peut-être quelque chose comme (dans d’autres langues):

foreach (object t in tArray)
   if (t follows some condition...) t++;

autre chose, parfois je veux utiliser la valeur de l'élément et parfois je veux l'utiliser comme référence. Quelle est la différence syntaxique?

De plus, je serai heureux de recevoir des recommandations sur des sites plus étendus pour apprendre le JavaScript à partir de . Merci.

javascriptarrayscondition
29
Day_Dreamer

Dans la plupart des navigateurs (non IE <= 8), les tableaux ont une méthode filter , qui ne fait pas tout à fait ce que vous voulez, mais vous crée un tableau d'éléments du tableau d'origine qui remplit certaines conditions. :

function isGreaterThanFive(x) {
     return x > 5;
}

[1, 10, 4, 6].filter(isGreaterThanFive); // Returns [10, 6]

Mozilla Developer Network a beaucoup de bonnes ressources JavaScript.

26
Tim Down

Voici un chemin court pour écrire un filtre . À partir d'un tableau de nombres, toutes les valeurs supérieures à 5 sont renvoyées.

myArray.filter((x) => { return x > 5; })

Exemple d'utilisation:

var filterResult = [1, 10, 4, 6].filter((x) => { return x > 5; });
console.log(filterResult); // returns [ 10, 6 ]

Et voici un filtre pour un tableau de objets , qui vérifie une propriété condition.

myArray.filter((x) => { return x.myNumber > 5; })

Exemple d'utilisation:

var myArray = [{myNumber: 1, name: 'one'}, {myNumber: 3, name: 'tree'}, {myNumber: 6, name: 'six'}, {myNumber: 8, name: 'eight'}];
var result = myArray.filter((x) => { return x.myNumber > 5; });
console.log(result); // returns [ { myNumber: 6, name: 'six' }, { myNumber: 8, name: 'eight' } ]
5
Beauty

Vous pouvez utiliser for ... in en JavaScript:

for (var key in array) {
    if (/* some condition */) {
        // ...
    }
}

A partir de JavaScript 1.6, vous pouvez également utiliser ceci:

for each (var element in array) {
    // ...
}

Celles-ci sont principalement destinées à traverser les propriétés des objets. Vous devriez envisager d'utiliser simplement votre for- loop.

EDIT: Vous pouvez utiliser un framework JavaScript tel que jQuery pour éliminer ces problèmes de navigateur. Essaie. Sa $.each()- method fait le travail.

3
jwueller

Utilisez ES6 Array.filter() et fonctions de flèche avec un corps d'expression:

myArray.filter(x => x > 5)

Un peu plus concis que la réponse de @ Beauty.

1
Andrey Moiseev

À propos des tableaux

Ce que vous voulez généralement pour itérer sur tableau est la méthode forEach :

arr.forEach(function(el) {
  alert(el);
});

Dans votre cas spécifique d’incrémentation de chaque élément d’un tableau, je vous recommande la méthode map :

arr = arr.map(function(t){ return t+1; });

Il y a aussi filter , réduire , et d'autres qui sont également utiles.

Mais, comme Tim Down l'a déjà mentionné, cela ne fonctionnera pas par défaut dans IE. Mais vous pouvez aussi facilement ajouter ces méthodes pour IE, comme indiqué dans la documentation de MDC, ou en fait, vous pouvez même écrire des versions plus simples que celles de la documentation de MDC (je ne sais pas pourquoi elles sont si non-JavaScript-y là bas):

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(func, scope) {
    for (var i = 0, len = this.length; i < len; i++) {
      func.call(scope, this[i], i, this);
    }
  };
}

Mais n'utilisez pas la construction for ... in pour les tableaux - cela est destiné aux objets.

À propos des références

Autre chose, parfois je veux utiliser la valeur de l'élément et parfois je veux l'utiliser comme référence. Quelle est la différence syntaxique?

En JavaScript, chaque variable est en fait une référence à un objet. Mais ces références sont transmises par valeur. Laisse-moi expliquer...

Vous pouvez passer un objet à une fonction qui le modifie et les modifications seront visibles en dehors de la fonction:

function incrementHeight(person) {
  person.height = person.height + 1;
}
var p = {height: 10);
alert(p.height); // outputs: 10
incrementHeight(p);
alert(p.height); // outputs: 11

Ici, vous modifiez la valeur sur laquelle pointe la référence person et ainsi le changement sera reflété en dehors de la fonction.

Mais quelque chose comme ça échoue:

function incrementHeight(height) {
  height = height + 1;
}
var h = 10;
alert(h); // outputs: 10
incrementHeight(h);
alert(h); // outputs: 10

Ici, vous créez un nouvel objet 11 et assignez sa référence à la variable height. Mais la variable h en dehors de la fonction contient toujours l'ancienne référence et reste donc à pointer sur 10.

1
Rene Saarsoo

Ecrivez une fonction générique qui accepte diverses conditions : 

function array_only(arr, condition) {
    hold_test=[]
    arr.map(function(e, i) {if(eval(condition)){hold_test.Push(e)}})
    return(hold_test)
    }

Exemple: 

use_array = ['hello', 'go_there', 'now', 'go_here', 'hello.png', 'gogo.log', 'hoho.png']

Utilisation : 

renvoie uniquement les éléments contenant .log extension: 

array_only(use_array, "e.includes('.log')")

['gogo.log']

renvoie uniquement les éléments contenant .png extension:

array_only(use_array, "e.includes('.png')")

['hello.png', 'hoho.png']

retourne uniquement éléments NON contenant .png extension:

array_only(use_array, "!e.includes('.png')")

['salut', 'go_there', 'maintenant', 'go_here', 'gogo.log']

return éléments contenant set des extensions et préfixes:

array_only(use_array, "['go_', '.png', '.log'].some(el => e.includes(el))")

['go_there', 'go_here', 'bonjour.png', 'gogo.log', 'hoho.png']

Vous pouvez facilement passer CONDITIONS MULTIPLES

return tous les fichiers png de moins de 9 caractères:

array_only(use_array, "e.includes('.png') && e.length<9")

['hoho.png']

0
Cybernetic

Vous pouvez utiliser Array.prototype.find , qui fait exactement ce que vous voulez, renvoie le premier élément remplissant la condition .

> ([4, {a:7}, 7, {a:5, k:'r'}, 8]).find(o => o.a == 5)

{a:5, k:'r'}
0
Nicolas NZ

Je viens de rencontrer le même problème. Tim Down est venu près, il avait juste besoin d'un wrapper à la longueur du tableau filtré:

// count elements fulfilling a condition
Array.prototype.count = function (f) {
  return this.filter(f).length;  
};

Usage:

// get the answer weight from the question's values array
var w = Math.pow(q.values.count(function(v) { return v !== -1; }), -1);

J'espère que cela répond à cette longue question!

0
thor2k