当前位置：首页 > news >正文

JavaScript 数组迭代

news 来源：原创 2024/9/19 8:35:28

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

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>