forEachの()、Array.map()とArray.filter()の使用

Array.forEach()

forEachの()メソッドは、各配列要素関数(コールバック関数)のために一度呼び出されます。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>为每个数组元素调用一次函数。</p>

<p id="demo"></p>

<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value, index, array) {
        txt = txt + value + "<br>";
    }
</script>

</body>
</html>

この関数は3つのパラメータを持っていることに注意してください。

  • 要素値
  • 要素のインデックス
  • 配列自体

上記の例では、唯一のパラメータ値を使用します。この例では、次のように書き換えることができます。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>为每个数组元素调用一次函数。</p>

<p id="demo"></p>

<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value) {
        txt = txt + value + "<br>";
    }
</script>

</body>
</html>

Array.map()

マップ()によって各配列要素の実装のための新たな機能のアレイを作成する方法。地図()メソッドは、配列要素の値のいかなる機能を行わないれません。地図()メソッドは、元の配列を変更しません。

この例では、各アレイの値は2で乗算されます。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.map()</title>
<body>

<h2>JavaScript Array.map()</h2>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);

    document.getElementById("demo").innerHTML = numbers2;

    function myFunction(value, index, array) {
        return value * 2;
    }
</script>

</body>
</html>

この関数は3つのパラメータを持っていることに注意してください。

  • 要素値
  • 要素のインデックス
  • 配列自体

唯一のコールバックパラメータ値は、配列のインデックスパラメータを省略してもよい場合。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);

    document.getElementById("demo").innerHTML = numbers2;

    function myFunction(value) {
        return value * 2;
    }
</script>

</body>
</html>

Array.filter()

フィルタ()メソッドは、配列要素が試験に合格含む新しい配列を作成します。この例では、18よりも大きいから新しい配列要素値を作成します。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>

<h2>JavaScript Array.filter()</h2>

<p>使用通过测试的所有数组元素创建一个新数组。</p>

<p id="demo"></p>

<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value, index, array) {
        return value > 18;
    }
</script>

</body>
</html>

この関数は3つのパラメータを持っていることに注意してください。

  • 要素値
  • 要素のインデックス
  • 配列自体
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>

<h2>JavaScript Array.filter()</h2>

<p>使用通过测试的所有数组元素创建一个新数组。</p>

<p id="demo"></p>

<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value) {
        return value > 18;
    }
</script>

</body>
</html>

複数のアレイ反復アプローチ

おすすめ

転載: blog.51cto.com/13578973/2419749