5つの一般的なメソッドによるjsトラバーサルクエリ

1. find() vs. findIndex()

   find() メソッドは、条件に一致する最初の配列メンバを見つけるために使用します。この引数はコールバック関数で、返り値が True の最初のメンバが見つかるまで、すべての配列メンバに対して順次実行され、そのメンバが返されます。該当するメンバがない場合は、undefined が返されます。

   [1, 2, 5, -1, 9].find( => n < 0) // 0より小さい配列の最初のメンバを見つける // -1

find() メソッドのコールバック関数は、3つの引数を取ることができます。順に、現在の値、現在の位置、元の配列です。

findIndex() メソッドは find() メソッドと非常によく似た方法で使用され、 条件にマッチする最初の配列メンバの位置を返します。

[1, 2, 5, -1, 9].findIndex((n) => n < 0)
//条件にマッチする値の位置を返す
// 3

2. filter()

filter() メソッドは、指定した関数を使用してすべての要素をテストし、 テストに合格したすべての要素を含む新しい配列を作成します。

filter は配列の各要素に対してコールバック関数を一度だけコールし、 コールバックが true あるいは true と等価な値を返すすべての要素を含む新しい配列を作成します。コールバックテストにパスしなかった要素はスキップされ、 新しい配列には含まれません。

var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]
//配列の重複除去
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x) === index) 
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

3. forEach()

配列のすべての要素を繰り返し、配列上で動作するようにコールバック関数を使用して、自動的に配列全体を横断し、ループの途中でブレークすることはできません、制御できない、戻り値の操作出力をサポートしていません、returnは唯一の現在のループからジャンプアウトするかどうかをループを制御するために使用されます。

コールバックには3つの引数があり、1つ目の引数は走査された配列の内容、2つ目は対応する配列のインデックス、3つ目は配列そのものです。

var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){
 console.log(item);
});

このメソッドには返り値はなく、元の配列を変更することなく配列の各項目を繰り返し処理するだけです；

しかし、配列にインデックスを付けることで、元の配列を自分で変更することができます；

var ary = [12,23,24,42,1]; 
var res = ary.forEach(function (item,index,input) { 
 input[index] = item*10; 
}) 
console.log(res);//--> undefined; 
console.log(ary);//--> 元の配列を配列のインデックスで変更する； 

4. some() と every()

every()メソッドとsome()メソッドは、配列を繰り返し処理し、ブール値のみを返すJSメソッドです。

エブリィ

配列の各要素が条件を満たすかどうかを判定します。すべての要素が条件を満たす場合は true、満たさない場合は false となります；

some()

配列の少なくとも 1 つの要素が条件を満たすかどうかを判定します 1 つの要素が条件を満たす場合に true を返します 1 つの要素も条件を満たさない場合に false を返します

// arr1 がすべて偶数かどうかを判定する。
// 配列 arr2 に少なくとも 1 つの偶数があるかどうかを判定する。
 
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
 arr1.every(function(value, index, array){
 return value % 2 == 0;
 })
); // false
console.log(
 arr2.some(function(value, index, array){
 return value % 2 == 0;
 })
); // true

5. map()

map() メソッドは、関数が呼び出された後に、元の配列要素の値を持つ新しい配列を返します。

map() メソッドは、要素を元の配列要素の順に処理します。

注意: map() は空の配列を検出しません。

注意： map() は元の配列を変更しません。

array.map(function(currentValue,index,arr), this値)

var data = [1, 2, 3, 4];
 
var arrayOfSquares = data.map(function (item) { //新しい配列を受け取る
 return item * item;
});
 
alert(arrayOfSquares); // [1, 4, 9, 16]