51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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

500.jpg

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

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数组循环的一些区别和应用,敬请期待吧。

赞(1)
未经允许不得转载:工具盒子 » 分享几种原生JS数组遍历的方法和应用