数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢?
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 + "<br>";
}
从上面的例子中,您可以看到:
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、计算数组所有元素相加的总和:
<button onclick="numbers.forEach(myFunction)">点我</button>
<p>数组元素总和:<span id="demo"></span></p>
<script>var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) {
sum += item;
demo.innerHTML = sum;
}</script>
2、将数组中的所有值乘以特定数字:
<p>乘以: <input type="number" id="multiplyWith" value="10"></p><button onclick="numbers.forEach(myFunction)">点我</button>
<p>计算后的值: <span id="demo"></span></p>
<script>var numbers = [65, 44, 12, 4];
function myFunction(item,index,arr) {
arr[index] = item * document.getElementById("multiplyWith").value;
demo.innerHTML = numbers;
}</script>
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数组循环的一些区别和应用,敬请期待吧。