English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript基礎チュートリアル

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAX基礎チュートリアル

JavaScriptリファレンスマニュアル

JavaScript 配列イテレーションメソッド

配列の各要素に対して一度の操作を行うメソッドは、反復メソッドです。

配列の反復メソッドはループと密接に関連しています。

Array.forEach()

forEach()メソッドを使用できます。

私たちは配列の各要素に対して提供された関数(コールバック関数)を実行するためにforEach()配列の各要素をドキュメントに印刷します。

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element, index, array) {
    result.innerHTML += index + : " + element + "<br>";
});
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

これは2の引数(インデックス、配列)はオプションであり、それらをスキップすることができます:

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element) {}}
    result.innerHTML += element + "<br>";
});
テストを見て‹/›

Array.map()

map()メソッドは新しい配列を返し、元の配列を変更しません。新しい配列の要素は元の配列の要素に適用された関数の値であり、元の配列の要素の順序で処理されます。

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

を乗じます。2の要素を新しい配列に作成します:

var nums = [1 function twice(element, index, array) {1, 5, 20, 14, 55, 16});
var nums = [2 = nums1.map(twice);
以下の例では、各値を
   return (element * 2);
}
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

これは2の引数(インデックス、配列)はオプションであり、それらをスキップすることができます:

var nums = [1 function twice(element, index, array) {1, 5, 20, 14, 55, 16});
var nums = [2 = nums1.map(twice);
function twice(element) {
   return (element * 2);
}
テストを見て‹/›

Array.filter()

filter()はJavaScriptのArrayの一般的な操作であり、Arrayの特定の要素をフィルタリングして、残りの要素を返します。主な原理は、filterは関数を順次各要素に適用し、trueまたはfalseの返値に基づいて要素を保持または削除することです。

以下の例では、値が等于または大于18の要素を新しい配列に作成します:

var age = [1, 30, 39, 29, 10, 13});
var val = age.filter(isAdult);
function isAdult(element, index, array) {
    return element >= 18;
}
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

これは2の引数(インデックス、配列)はオプションであり、それらをスキップすることができます:

var age = [1, 30, 39, 29, 10, 13});
var val = age.filter(isAdult);
function isAdult(element) {
    return element >= 18;
}
テストを見て‹/›

Array.reduce()

reduce()メソッドは関数を受け取り、配列の各値(左から右)を累積し、最終的に1つの値を計算します。

これは数字ではよくあることですが、例えば配列中のすべての数字の合計を見つけることができます。

var nums = [10, 20, 30, 40, 50];
var sum = nums.reduce(getTotal);
function getTotal(x, y) {
    return (x + y);
}
テストを見て‹/›

注意していただきたいのは、この関数は4引数:

  • 初期値/前に返された値(必須)

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

Array.find()

find()メソッドは、検出された値の配列の最初の値を返します。

以下の例では、等于または大于18の最初の要素:

var num = [1, 30, 39, 29, 10, 13});
var val = num.find(myFunc);
function myFunc(element) {
    return element >= 18;
}
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

Array.findIndex()

findIndex()メソッドは、指定された検出に一致する配列の最初のインデックス値を返します。

以下の例では、以下の値が等しいかまたは大きいかを確認します。18の最初の要素のインデックス値:

var num = [1, 30, 39, 29, 10, 13});
var val = num.findIndex(myFunc);
function myFunc(element) {
    return element >= 18;
}
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

Array.every()

every()メソッドは、指定された条件に一致する配列のすべての要素を検出するために使用されます(関数を提供して検出)。

以下の例では、すべての配列値が指定された条件に等しいかまたは大きいかを確認します。18:

var nums = [1, 30, 39, 29, 10, 13});
var bool = nums.every(function(element) {
    return element >= 18;
});
document.getElementById("result").innerHTML = bool;
テストを見て‹/›

注意:この関数には3引数:

  • 要素値(必須)

  • 要素索引(オプション)

  • 配列自体(オプション)

完全な配列リファレンス

完全な属性とメソッドのリファレンスについては、当社のJavaScript Array 配列リファレンス

参照部分には、すべての配列属性とメソッドの説明と例が含まれています。