web-dev-qa-db-ja.com

JavaScript-条件を満たす配列要素を取得する

W3Cを使用してJavaScriptを学習していますが、この質問に対する答えが見つかりませんでした。

私はいくつかの条件を満たす配列要素を操作しようとしています。

Forループの配列要素で実行する以外にそれを行う方法はありますか？たぶん（他の言語で）のようなもの：

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

もう1つは、要素の値を使用したい場合と、参照として使用したい場合があります。構文上の違いは何ですか？

同様に、JavaScriptを学ぶためのより広範なサイトに関する推奨事項も喜んで受け取ります。ありがとう

javascriptarraysconditional-statements
32
Day_Dreamer

ほとんどのブラウザ（IE <= 8）ではありません）では、配列に filter メソッドがあります。特定の条件を満たす元の配列の要素の配列：

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

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

Mozilla Developer Network には多くの優れたJavaScriptリソースがあります。

30
Tim Down

ES6 Array.filter() および arrow functions を式の本体で使用します：

myArray.filter(x => x > 5)

@Beautyの答えよりも少し簡潔です。

8
Andrey Moiseev

ここでは、フィルターを作成するためのshort wayです。数値の配列から、5より大きいすべての値を返します。

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

使用例：

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

そして、ここではobjectsの配列のフィルターで、これはproperty条件をチェックします。

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

使用例：

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' } ]
6
Beauty

JavaScriptで_for ... in_を使用できます。

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

JavaScript 1.6以降、これも使用できます。

_for each (var element in array) {
    // ...
}
_

これらは主にオブジェクトのプロパティをトラバースするためのものです。単にfor- loopを使用することを検討する必要があります。

EDIT：jQuery のようなJavaScriptフレームワークを使用して、これらのクロスブラウザの問題を排除できます。試してみる。その $.each()- method は仕事をします。

3
jwueller

配列について

通常、配列の繰り返し処理に必要なのは、 forEach メソッドです。

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

配列の各要素をインクリメントする特定のケースでは、 map メソッドをお勧めします。

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

filter 、 reduce などもあり、これらも便利です。

しかし、既に述べたTim Downのように、これらはIEではデフォルトでは機能しません。ただし、MDCドキュメントに示されているように、IEにもこれらのメソッドを簡単に追加できます。実際には、MDCドキュメントにあるものよりも簡単なバージョンを書くこともできます（なぜそうなのかわかりません） un-JavaScript-yあそこ）：

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

ただし、配列にはfor ... in構造を使用しないでください-これはオブジェクト用です。

参照について

また、要素の値を使用したい場合や、参照として使用したい場合もあります。構文上の違いは何ですか？

JavaScriptでは、実際、すべての変数は何らかのオブジェクトへの参照です。ただし、これらの参照は値によって渡されます。説明させてください...

オブジェクトを変更する関数にオブジェクトを渡すことができ、その変更は関数の外側に表示されます。

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

ここで、person参照が指す値を変更すると、変更が関数の外部に反映されます。

しかし、このようなものは失敗します：

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

ここで、完全に新しいオブジェクト11を作成し、その参照を変数heightに割り当てます。ただし、関数外の変数hには古い参照が含まれているため、10を指すようになります。

1
Rene Saarsoo

Array.prototype.find を使用すると、必要な処理を正確に実行し、条件を完全に満たす最初の要素を返します。例：

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

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

さまざまな条件を受け入れるの汎用関数を記述します。

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

例：

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

使用法：

return。log拡張子を含む要素のみ：

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

['gogo.log']

return。png拡張子を含む要素のみ：

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

['hello.png'、 'hoho.png']

return要素のみ含まない。png拡張子：

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

[「hello」、「go_there」、「now」、「go_here」、「gogo.log」]

return拡張子とプレフィックスのsetを含む要素：

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

['go_there'、 'go_here'、 'hello.png'、 'gogo.log'、 'hoho.png']

簡単に渡すことができますMULTIPLE CONDITIONS

return長さが9文字未満のすべてのpngファイル：

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

['hoho.png']

0
Cybernetic

ちょうど同じ問題に出くわしました。 ティムダウン が近づき、フィルターされた配列の長さのラッパーが必要になりました。

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

使用法：

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

これがこの長年の質問に答えることを願っています！

0
thor2k