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

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

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)

例子：

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

标签：遍历几种数组方法WebJS