blog

jsで配列をトラバースする10の方法

このメソッドは、配列のすべての要素が指定された関数のテストに合格するかどうかをテストします。これはブール値を返します。パラメータは forEach() と同じで、break や continue は使...

Jul 6, 2020 · 5 min. read
シェア

for

Forループやwhileループは基本的に様々な言語に存在し、配列を走査する最も基本的な方法です。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]//配列を宣言する。 constのため、arrが指す配列のアドレスを変更することはできないが、アドレスの内容を変更すること、つまり配列内の値を変更することはできる。
for (let i = 0; i < arr.length; i++) {
 if (i === 2) continue
 if (i === 5) break
 arr[i]++
}
console.log(arr)
//出力が可能になった:[1, 2, 2, 4, 5, 5, 6, 7]
//元の配列[0, 1, 2, 3, 4, 5, 6, 7]
//比較すると、arr[2]はスキップされるので、arr[2] = 2for...of文は1を追加しない。
// = 5for...ofステートメントを使用すると、arr[5] = 5そして、breakはループを抜けるので、後続の要素は1つもインクリメントされない。

このことから、continueとbreakはforで使うことができ、元の配列の値を変更することができるようです。

while

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let index = -1
while (index < arr.length) { //while 
 index++
 if (index === 2) continue
 if (index === 5) break
 arr[index]++
 //index++ このステートメントをここに置くと、ループがインデックスで止まってしまう。= 2これは常に継続するので、whileの後に置かれる。
}
console.log(arr);
//出力が可能になった:[1, 2, 2, 4, 5, 5, 6, 7]
//元の配列[0, 1, 2, 3, 4, 5, 6, 7]
//比較すると、arr[2]はスキップされるので、arr[2] = 2for...of文は1を加算しない。
// = 5for...ofステートメントを使用すると、arr[5] = 5そして、breakはループを抜けるので、後続の要素は1つもインクリメントされない。

とfor出力はまったく同じですが、実際には、forループを復元するためにループをwhileの使用は、もちろん、そのような(true)ながら、他の良い使用がありますが、ここでは議論されていない、ここでは主に、この関数と関数と同じのwhileの役割を説明します。

forEach()

このメソッドはより簡潔ですが、欠点はより明白であり、唯一の配列のすべての要素をトラバースすることができ、ブレークとcontinueをサポートしていない、関数は未定義を返します。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
arr.forEach((value, index, arr2) => {
 //if (index == 2) continue エラー:構文エラー: Illegal continue statement: no surrounding iteration statement
 //if (index == 5) break エラー:構文エラー: Illegal break statement
 value++
 arr2[index] += 10
})
console.log(arr);
//出力が可能になった:[, , 16, 17]
//元の配列[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7]

出力から、value++は元の配列の値を変更できないことがわかるので、valueは元の配列によって代入されるだけで、別のメモリの一部を占め、arr2はarrと同じアドレスを指していることがわかります。

このメソッドの全パラメータについてもう少し詳しく説明します:

Array.prototype.forEach(function(value, index, arr), thisValue)

詳細ポータル

every()

このメソッドは、配列内のすべての要素が指定した関数のテストに合格するかどうかを調べます。真偽値を返します。forEach() と同じ引数を指定し、break や continue は指定しませんが、メソッド内でこれらの処理を行うことができます。return 文を書かない場合、デフォルトは return false です。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value, index, arr2) => {
 //if (index == 2) continue //エラー:構文エラー: Illegal continue statement: no surrounding iteration statement
 //if (index == 5) break エラー:構文エラー: Illegal break statement
 if (index == 2) return true //continue関数を実装する
 if (index == 5) return false //break関数を実装する
 value++
 arr2[index] += 10
 return true //省略できない。省略するとデフォルトでfalseが返され、これはbreakと同じである。
}, )
console.log(arr);
console.log(a);//false
//出力が可能になった:[, , 16, 17]
//元の配列[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7]

出力から見える、とforEach()、値+ +は、元の配列の値に影響を与えない限り、関数がfalseを返す役割を返すように、それは、このメソッドは、主に特定の条件に沿った配列のすべての要素かどうかを判断するために使用され、アピールコードは、単に配列をトラバースする他のメソッドを区別するために使用されていることがわかります。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value) => value > -1)//配列のすべての要素が-1より大きいかどうかを判定する。
console.log(a);//true

some()

arr.some(callback(element[, index[, array]])[, thisArg])このメソッドの名前は、配列の中に条件があれば true を返し、条件を満たしていなければ false を返すことを示しています。 機能の違いにより、false を返した場合は continue、true を返した場合は break となります。return 文が書かれていない場合、デフォルトは return true です。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let a = arr.every((value) => value > 6)//配列に6より大きい要素があるかどうかを判定する
console.log(a);//true

filter()

name, filter array を参照。戻り値は、元の配列の要素のうち、条件にマッチするものからなる新しい配列。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let newArr = arr.filter((value) => value > 3) //配列に3つ以上の要素があるかどうかを判定する
console.log(newArr); //[ 4, 5, 6, 7 ]

マッチする配列がない場合は、空の配列を返します。

map()

各配列要素に関数を適用し、新しい配列を返します。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let newArr = arr.map((value) => value * 2) //配列の各要素に2を掛ける。
console.log(newArr); //[0, 2, 4, 6, 8, ]

reduce()

配列の全要素を繰り返し処理し、関数で返された数値を累積し、その結果を返します。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
let sum = arr.reduce((accumulator,currentValue) => { //accumulatorは各反復後の累積値であり、currentValueは各反復時にarrから渡される要素の値である。
 return currentValue * 2 + accumulator
},100) //配列の各要素に2を掛け、初期値100を加える。
console.log(sum); //156

for...in

基本的に、このメソッドはオブジェクトを反復処理するために使用さ。配列は特殊なオブジェクトなので、反復処理することもできますが、推奨されません。

for...of

このステートメントは return と break をサポートしています。

const arr = [0, 1, 2, 3, 4, 5, 6, 7]
for (let item of arr) {
 //item++ は元の配列には影響しない。
 if (item === 2) continue // 
 if (item === 5) break // 
 arr[item]++ //元の配列を変更する
}
console.log(arr);

この文は配列を反復処理するという使い方の1つに過ぎず、反復処理可能なオブジェクトを幅広く反復処理するためにできます。

Read next

オブジェクト指向とプロトタイプとプロトタイプチェーン

オブジェクトとは?オブジェクトは物理的なものを抽象化したものです。 オブジェクト指向プログラミングは、オブジェクトへの抽象化を要求し、このオブジェクトを分析し、このオブジェクトにプロパティやメソッドを追加して、物事の関係をシミュレートします。このオブジェクトを一般的にクラスと呼びます。 動物クラスのために作成された動物は、通常の機能を区別するために、クラス名の最初の文字は一般的に大きいです...

Jul 6, 2020 · 5 min read