html js 遍历数组,分享几种原生JS数组遍历的方法和应用

数组遍历，对于前后端开发人员，是必须掌握的方法，那么数组遍历有哪些方法呢？

OK，今天就分享几种原生JS方法，从原生开始学习，有助于大家应用到各种框架【小程序、三大框架等】中去，毕竟原生才是基本。一共有这些：for,foreach,some,map,filter,every。

接下来一一说明。

for和for/in

for 循环是您在希望创建循环时常会用到的工具。

基本语法：for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

语句 1 在循环(代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

例子：for (var i=0; i<5; i++)

{

x=x + "The number is " + i + "
";

}

从上面的例子中，您可以看到：

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件(i 必须小于 5)。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

for/in 语句用于循环对象属性。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

基本语法：for (var in object) {

执行的代码块

}

例子：var person = {fname:"John", lname:"Doe", age:25};

var text = "";

var x;

for (x in person) {

text += person[x];

}

结果：

John Doe 25

还有在ES5/6中，我们可以这样的语法来写：

for (let i in arr)

for (const v of arr)

做小程序的时候经常会用到这些语法。

forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

基本语法：array.forEach(function(currentValue, index, arr), thisValue)参数描述

function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。

函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。

thisValue可选。传递给函数的值一般用 "this" 值。

如果这个参数为空， "undefined" 会传递给 "this" 值

例子：

1、计算数组所有元素相加的总和：点我

数组元素总和：

var numbers = [65, 44, 12, 4];

function myFunction(item) {

sum += item;

demo.innerHTML = sum;

}

2、将数组中的所有值乘以特定数字：

乘以: 

点我

计算后的值: 

function myFunction(item,index,arr) {

arr[index] = item * document.getElementById("multiplyWith").value;

demo.innerHTML = numbers;

}

some

对数组中每个元素执行一次ck函数，知道某个元素返回true，则直接返回true。如果都返回false,则返回false

检查整个数组中是否有满足ck函数的元素。

基本语法：[...].some(ck)函数       ----      某个一个为true，则为true

例子：var result = [1,5,3,6].some(  (v,i)  =>  (v>10) )      //所有元素都不满足，返回result = false

var result = [10,5,30,60].some(  (v,i)  =>  (v<10) )      //有一个(多个)满足，返回result  = true

map

每个数组元素都执行一次ck函数，最后返回每次元素执行ck函数后返回值的集合(数组)

基本语法：[...].map(ck)函数      ----         返回每个元素返回值的集合

例子：var newArray = [50,30,40].map( (v,i) => v/10 )

filter

每个数组元素都执行一次ck函数，最后返回每次元素执行ck函数后返回值的为true的元素集合(数组)。

基本语法：[...].filter(ck)函数      ----        得到返回值为true的元素的集合

例子：var newArray = [50,2,60,4,53,15].filter( (v,i) => (v>10) )   //返回数组中大于10的元素新数组  newArray = [50,60,53,15]

every

每个数组元素都执行一次ck函数，直到某个元素执行函数ck返回false,则直接返回false,如果全部返回true，则返回true

基本语法：[...].every(ck)函数     ----          某一个为false，则返回false

例子：var result = [5,50,35,12,85].every( (v,i) => v<51 )  //返回有一个(多个)大于等于51,则返回 result = false

var result = [5,50,35,12,85].every( (v,i) => v<100 )  //全部大于51,则返回 result = true

总结

今天主要分享了一些数组遍历的几种方法，下篇文章是关于for数组循环的一些区别和应用，敬请期待吧。