ホームページ  >  記事  >  ウェブフロントエンド  >  jsの配列ループと反復の詳細な説明

jsの配列ループと反復の詳細な説明

迷茫
迷茫オリジナル
2017-03-26 17:12:221367ブラウズ

1. 最初のメソッドは for() ループです

for( varindex = 0; index < array.length; i ++){}

このメソッドは非常に一般的で、さまざまな言語で利用できるため、ここでは詳しく説明しません

2 . es5 の新規追加 反復メソッド (every、filter、forEach、map、some)

これらのメソッドはすべて、2 つのパラメーターを受け取ります。1) 各項目で実行できる関数 (渡された関数は 3 つのパラメーターを受け取ります)。 b. 配列内の項目の位置; 2) (オプション) 関数が実行されるスコープ。

構文: forEach を例に挙げますが、他も同様です

array.forEach(callback [, thisArg])
nums = [3, 2, 3, 4

1)every() メソッド:

配列内のすべての要素が指定された関数のテストに合格するかどうかをテストします。1 つの項目が false を返す場合、その項目は false を返します。

everyメソッドは、コールバックがfalseを返すコールバックが見つかるまで、要素の各要素がコールバック関数を1回実行します(特定のメソッドで削除された項目や未定義の項目は除きます。値が未定義として定義されている項目は除きます)。 (false に変換できる値)、反復を終了し、false を返します。それ以外の場合は true を返します (すべての要素に対して true)。

everyメソッドが走査する要素は最初のコールバックの値であり、それ以降に追加された値にはアクセスされません。

function isBigEnough(elemen) {  
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
var a = [1, 2, 3,, 4].every (function(value){
console.log(value)   return value       
})//1,2,3,4console.log(a)
//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)   return value       
})
//1,2,3,undefind
console.log(a)
//false

2) filter() メソッド:

指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成して返します

フィルターは配列内の各要素に対して 1 回コールバックを呼び出します ( いいえ、項目を含みません)値が未定義 として定義されている項目を除き、特定のメソッドを通じて削除または未定義になり、コールバックが true を返すか true と同等であるすべての要素を使用して新しい配列を作成すると、コールバック テストに失敗した要素はスキップされます。新しい配列には含まれません。

var a = [1, 2, 3, 7,4].filter(function(value){   
    return value > 4      
})
console.log(a)
//[7]

3) forEach() メソッド:

ForEach は、配列内の既知の項目ごとにコールバック関数を昇順で 1 回実行します (特定のメソッドで削除された項目または未定義の項目を除き、値が unknown として定義されている項目を除く)

forEach が横断する範囲は、コールバックが初めて呼び出される前に決定されます。 forEach を呼び出した後に配列に追加された項目には、コールバックではアクセスできません。既存の値が変更された場合、コールバックに渡される値は、forEach がそれらを走査した時点の値です。削除されたアイテムはスキャンされません。アクセスされた要素が反復中に削除された場合 (たとえば、shift() を使用)、後続の要素はスキップされます。常に未定義を返し、チェーン内で呼び出すことはできません。 shift()) ,之后的元素将被跳过 。总是返回undefined,不能链式调用。

  没有办法中止或者跳出 forEach 循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了,因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

  如果数组在迭代时被修改了,则其他元素会被跳过。

下面的例子输出"one", "two", "four"。当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置,"three"会被跳过。 forEach()

例外をスローする以外に、forEach ループを中止したり抜け出す方法はありません。これが必要な場合、forEach() メソッドを使用するのは間違っており、代わりに単純なループを使用できます

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);  if (word === "two") {
    words.shift();
  }
});// one// two// four

反復中に配列が変更された場合、他の要素はスキップされます。

次の例では、「one」、「two」、「four」を出力します。値「two」を含む項目に到達すると、配列全体の最初の項目が削除され、残りのすべての項目が 1 つ上の位置に移動されます。要素「four」が配列の前の方にあるため、「three」はスキップされます。 forEach() は、反復する前に配列のコピーを作成しません。

var numbers = [1, 4, 9];var roots = numbers.map(Math.sqrt);/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

4)map()メソッド:

配列の各項目に対して指定された関数を実行し(

特定のメソッドで削除された項目や未定義の項目は除く、値が未定義と定義されている項目は除く

)、リターンする新しい配列。各要素は

コールバック関数の結果です

🎜🎜 map メソッドを使用して配列を処理する場合、コールバック メソッドが初めて呼び出される前に、配列要素の範囲が決定されます。マップ メソッドの実行中、元の配列に新しく追加された要素はコールバックによってアクセスされません。既存の要素が変更または削除された場合、コールバックに渡される値は、コールバックによって渡される値です。削除された要素の値にはアクセスされません。 🎜
var a = [1, 2, 3, 7,4].some (function(value){   return value > 8       })
console.log(a)//false
a = [1, 2, 3, 9,4].some (function(value){   
return value > 8      
 })
console.log(a)
//true
🎜5) some() メソッド: 🎜🎜 配列内の特定の要素が指定された関数のテストに合格するかどうかをテストします。1 つの項目が true を返す場合、それは true を返します。🎜🎜 一部のメソッドは、配列内の各要素に対してコールバック関数を実行します。見つかった場合、コールバックは「true 値」(つまり、ブール値 true に変換できる値) を返し、反復を停止して true を返し、それ以外の場合 (すべての要素が false)、false を返します。 🎜りー

以上がjsの配列ループと反復の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。