JavaScript 数组迭代

最新推荐文章于 2024-11-18 14:11:03 发布

软件技术NINI

最新推荐文章于 2024-11-18 14:11:03 发布

阅读量453

点赞数 8

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_78133614/article/details/141032986

版权

js 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

数组迭代方法对每个数组项进行操作。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

<!DOCTYPE html>
<html>

<body>
  <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>

//第二种
<!DOCTYPE html>
<html>
<body>
<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>

该函数接受 3 个参数：项目值项目索引数组本身

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

<!DOCTYPE html>
<html lang="en">
<body>
    <p id="demo"></p>
    <script>
        var numbers=[12,53,86,99,77,88,66];
        var sum=numbers.reduce(myFunction);
        document.getElementById("demo").innerHTML="12+53+86+99+77+88+66的总和"+sum;
        function myFunction(total,value,index,array){
            return total +value;
        }
    </script>
</body>
</html>

请注意此函数接受 4 个参数：总数（初始值/先前返回的值）项目值项目索引数组本身

reduce() 方法能够接受一个初始值

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo1"></p>
    <script>
        var numbers = [12, 53, 86, 99, 77, 88, 66];
        var sum = numbers.reduce(myFunction, 100);

        document.getElementById("demo1").innerHTML = "12+53+86+99+77+88+66的总和：" + sum;

        function myFunction(total, value) {
            return total + value;
        }
    </script>

</body>

</html>

Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从右到左工作。另请参阅 reduce()。

reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和

<!DOCTYPE html>
<html>

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

    <script>
        var numbers = [12, 53, 86, 99, 77, 88, 66];
        var sum = numbers.reduceRight(myFunction);

        document.getElementById("demo").innerHTML = "12+53+86+99+77+88+66的总和：" + sum;

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

</body>

</html>

Array.every()

every() 方法检查所有数组值是否通过测试

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var numbers = [12, 53, 86, 99, 77, 88, 66];
        var all50 = numbers.every(myFunction); 

        document.getElementById("demo").innerHTML = "大于50的是" + all50;

        function myFunction(value, index, array) {
            return value > 50;
        }

    </script>
</body>

</html>

请注意此函数接受 3 个参数：项目值项目索引数组本身

如果回调函数仅使用第一个参数（值）时，可以省略其他参数

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var numbers = [12, 53, 86, 99, 77, 88, 66];
        var all50 = numbers.every(myFunction); 

        document.getElementById("demo").innerHTML = "大于50的是" + all50;

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

</html>

Array.some()

some() 方法检查某些数组值是否通过了测试。

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

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

请注意此函数接受 3 个参数：项目值项目索引数组本身

Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

语法

array.indexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var fruits = ["Apple", "Orange", "Apple", "Mango"];
        var a = fruits.lastIndexOf("Apple");
        document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
    </script>
</body>

</html>

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;

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

</body>
</html>

请注意此函数接受 3 个参数：项目值项目索引数组本身

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

<!DOCTYPE html>
<html>

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

    <script>
        var numbers = [4, 9, 16, 25, 29];
        var first = numbers.findIndex(myFunction);

        document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;

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

</body>

</html>