web-dev-qa-db-de.com

JavaScript - Array-Element, das eine Bedingung erfüllt

Ich lerne JavaScript mit W3C und habe keine Antwort auf diese Frage gefunden.

Ich versuche, einige Manipulationen an Array-Elementen vorzunehmen, die bestimmte Bedingungen erfüllen.

Gibt es eine andere Möglichkeit als die Array-Elemente in for-Schleife auszuführen? Vielleicht etwas (in anderen Sprachen):

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

eine andere Sache, manchmal möchte ich den Wert des Elements verwenden und manchmal möchte ich es als Referenz verwenden. Was ist der syntaktische Unterschied?

Ich freue mich auch über Empfehlungen zu weiterführenden Seiten, von denen Sie JavaScript von . Lernen können. Danke

29
Day_Dreamer

In den meisten Browsern (nicht IE <= 8) verfügen Arrays über eine filter -Methode, die nicht ganz das macht, was Sie wollen, aber Sie erstellt ein Array von Elementen des ursprünglichen Arrays, die eine bestimmte Bedingung erfüllen :

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

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

Mozilla Developer Network hat viele gute JavaScript-Ressourcen.

26
Tim Down

Hier ein kurzer Weg , um einen Filter zu schreiben . Aus einem Zahlenfeld liefert er alle Werte größer als 5.

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

Anwendungsbeispiel:

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

Und hier ein Filter für ein Array von Objekten , das eine Eigenschaft Bedingung prüft.

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

Anwendungsbeispiel:

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

Sie können for ... in in JavaScript verwenden:

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

Ab JavaScript 1.6 können Sie auch Folgendes verwenden:

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

Diese dienen hauptsächlich dazu, Objekteigenschaften zu durchqueren. Sie sollten in Betracht ziehen, einfach Ihre for-Schleife zu verwenden.

EDIT: Sie können ein JavaScript-Framework wie jQuery verwenden, um diese Cross-Browser-Probleme zu beheben. Versuche es. Seine $.each()- Methode erledigt den Job.

3
jwueller

Verwenden Sie ES6 Array.filter() und Pfeilfunktionen mit Ausdruckskörper:

myArray.filter(x => x > 5)

Etwas prägnanter als die Antwort von @ Beautys.

1
Andrey Moiseev

Über Arrays

Was Sie normalerweise für das Durchlaufen eines Arrays benötigen, ist die Methode forEach :

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

In Ihrem speziellen Fall, in dem Sie jedes Element eines Arrays inkrementieren, würde ich die Methode map empfehlen:

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

Es gibt auch Filter , Reduced und andere, die ebenfalls nützlich sind.

Aber wie bereits erwähnt, funktionieren diese nicht standardmäßig im IE. Sie können diese Methoden jedoch auch leicht für IE hinzufügen, wie in der MDC-Dokumentation gezeigt, oder Sie können sogar einfachere Versionen als die MDC-Dokumentation schreiben (ich weiß nicht, warum sie so un-JavaScript-y sind da drüben):

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);
    }
  };
}

Verwenden Sie jedoch nicht das for ... in-Konstrukt für Arrays - dies ist für Objekte gedacht.

Über Referenzen

Eine andere Sache, manchmal möchte ich den Wert des Elements verwenden und manchmal möchte ich es als Referenz verwenden. Was ist der syntaktische Unterschied?

In JavaScript ist jede Variable eine Referenz auf ein Objekt. Diese Referenzen werden jedoch wertmäßig weitergegeben. Lassen Sie mich erklären...

Sie können ein Objekt an eine Funktion übergeben, die das Objekt ändert, und die Änderungen werden außerhalb der Funktion angezeigt:

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

Hier ändern Sie den Wert, auf den die person-Referenz zeigt, und die Änderung wird somit außerhalb der Funktion angezeigt.

Aber so etwas scheitert:

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

Hier legen Sie ein völlig neues Objekt 11 an und weisen der Variablen height die Referenz zu. Die Variable h außerhalb der Funktion enthält jedoch immer noch die alte Referenz und bleibt daher auf 10 verweisen.

1
Rene Saarsoo

Schreiben Sie eine generische Funktion, die verschiedene Bedingungen akzeptiert

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

Beispiel: 

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

Verwendungszweck

return nur Elemente mit .log extension: 

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

['gogo.log']

return nur Elemente mit .png extension:

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

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

return nur Elemente NICHT mit .png extension:

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

['hallo', 'go_there', 'jetzt', 'go_here', 'gogo.log']

return Elemente, die set von Erweiterungen und Präfixen enthalten:

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

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

Sie können einfach MEHRERE BEDINGUNGEN

return alle PNG-Dateien mit weniger als 9 Zeichen:

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

['hoho.png']

0
Cybernetic

Sie können Array.prototype.find verwenden, das genau das tut, was Sie möchten, und gibt das erste Element zurück, das die Bedingung erfüllt. _: Beispiel:

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

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

Ich bin gerade auf das gleiche Problem gestoßen. Tim Down kam näher, er brauchte nur einen Wrapper für die Länge des gefilterten Arrays

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

Verwendungszweck:

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

Ich hoffe, das beantwortet diese langjährige Frage!

0
thor2k