JS中遍历数组的一些方法总结

最新推荐文章于 2024-03-15 17:08:52 发布
最新推荐文章于 2024-03-15 17:08:52 发布
阅读量169 收藏
点赞数
分类专栏： js
版权声明：您可以转载我的文章，但是请标明文章出处。谢谢！ https://blog.csdn.net/qq_41485414/article/details/82220838 
                                        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-e2445db1a8.css">
                    <div class="htmledit_views">

Js里面数组是很重要的一块内容，其实就是我们做项目的时候也是很重要的一种数据格式，大部分的数据都不会是一个个或者两个，那么数据多的时候一般是以数组的形式的存放的，那么后端给前端的时候是数据，我们要展示给用户看的时候遍历数组就显得尤为重要，今天就简单的说一下一些常见的遍历数据的方法！能力有限，写的好与不好，全与不全都请多多谅解！

首先我们说一下常见的数组类型，我们一般见到的数组有Array、Set和Map，那么我们分别说一下：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      var ary = 
      
      new 
      
      Array();
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             ary[
      
      0] = 
      
      "第一";
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           ary[
      
      1] = 
      
      "第二";
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           ary[
      
      2] = 
      
      "第一";
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           ary[
      
      3] = 
      
      "第二";
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      var Test = [
      
      "a",
      
      "b",
      
      "c",
      
      "d",
      
      "e",
      
      "f"]

这是Array数组，一般情况下我们怎么遍历的呢？


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "下面是使用for循环进行的数组遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
         
      
      for(
      
      let i = 
      
      0;i<ary.length;i++){
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(ary[i]);
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             }
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      for(
      
      let i = 
      
      0;i<Test.length;i++){
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
                
      
      document.write(Test[i]);
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
            }

这是最常见的一种遍历的方法，for循环遍历

还有一种常见的for/in循环的遍历


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "</br>",
      
      "下面是使用for/in循环进行的数组遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
           
      
      /* for/in遍历数组 */ 
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
          
      
      for(
      
      let i 
      
      in ary){
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(ary[i]);
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             }
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      for(
      
      let i 
      
      in Test){
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
                
      
      document.write(Test[i]);
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
            }

那么其实还可以使用forEach进行遍历这样的数组：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "</br>",
      
      "下面是使用forEach进行的数组遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      /* 使用forEach遍历数组 */
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              ary.forEach(
      
      i=>{
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
              
      
      document.write(i);
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              })
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             Test.forEach(
      
      i=>{
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(i);
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              })
     
     
    
    
    
  9. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
           
      
      document.write(
      
      "<br>",
      
      "forEach的第二种写法",
      
      "<br>")
     
     
    
    
    
  10. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           ary.forEach(
      
      function(i){
     
     
    
    
    
  11. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
              
      
      document.write(i);
     
     
    
    
    
  12. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             })
     
     
    
    
    
  13. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
            Test.forEach(
      
      function(i){
     
     
    
    
    
  14. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(i);
     
     
    
    
    
  15. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             })

那么在ES6之后呢新出的有一种是for/of的写法进行数组的遍历：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "</br>",
      
      "下面是使用ES6里面新出的for/of进行的数组遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
         
      
      for(
      
      let i 
      
      of ary){
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(i);
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              }
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      for(
      
      let i 
      
      of Test){
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
                
      
      document.write(i);
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              }

还有一种是可枚举对象数据，也是可以进行遍历的：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "</br>",
      
      "下面是使用for/in进行的enumerable（可枚举）对象遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
          
      
      var A = {
      
      a:
      
      1,
      
      b:
      
      2,
      
      c:
      
      3,
      
      d:
      
      4,
      
      e:
      
      "hello"};
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
           
      
      for(
      
      let i 
      
      in A){
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
               
      
      document.write(i,A[i]);
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
             }

下面我们说一下set和map的数组进行遍历


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      document.write(
      
      "</br>",
      
      "下面是使用for/of进行的set数组遍历",
      
      "</br>");
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
          
      
      /* 操作map和Set */
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      var set = 
      
      new 
      
      Set();
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
            set.add(
      
      "1").add(
      
      "2").add(
      
      "e").add(
      
      "hello");
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
         
      
      for(
      
      let i 
      
      of set){
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(i);
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
              }
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
            
      
      document.write(
      
      "</br>",
      
      "下面是使用for/of进行的map数组遍历",
      
      "</br>");
     
     
    
    
    
  9. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
           
      
      var map = 
      
      new 
      
      Map();
     
     
    
    
    
  10. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           map.set(
      
      "a",
      
      1).set(
      
      "b",
      
      2).set(
      
      "c",
      
      3).set(
      
      4,
      
      "999").set(
      
      5,
      
      6);
     
     
    
    
    
  11. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
           
      
      for(
      
      let[i,j] 
      
      of map){
     
     
    
    
    
  12. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
             
      
      document.write(i,j);
     
     
    
    
    
  13. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           }

下面是遍历的结果：

谢谢阅读

 


骚φ(゜▽゜*)♪白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP中遍历数组的三种常用方法实例分析
01-03
本文实例讲述了PHP中遍历数组的三种常用方法。分享给大家供大家参考，具体如下： 在PHP中操作最多的数据估计也就是数组了，有着效率高、速度快、存储方便的特点。 PHP中遍历数组有三种常用的方法： 1、for循环，...
Vue中遍历数组的新方法实例详解
12-03
1、foreach 　foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] ...　item对象就是遍历数组中的一个元素，includes是es6中的新方法，在search方法中直接返回新数组 search(ke
JS中循环遍历数组的几种常用方式总结
铁锤妹妹的博客
04-15 5万+
第一种：for循环，也是最常见的 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 打印结果： 第二种：forEach（） 1.）forEach() 遍历普通数组 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; arr.forEach(item => {
js循环数组的方法
weixin_45797900的博客
05-19 7934
1.for循环最基本的循环方式，可以return终止。 for(var i = 0;i < 3; i++){ console.log(i) } 2.for of循环作为ES6新增的循环方法。它可以正确响应break、continue和return终止。for-of支持数组，还支持类数组对象。 let arr = ['110','yyds','jjkk']; for(let item of arr){ console.log(item); //item指的是数组每一项。 } //输出
js数组循环常用的几种方法
最新发布
古猿写代码
03-15 804
ES6新增的循环方法，没有索引，它可以正确响应break、continue和return语句，而且，这个方法避开了for-in循环的所有缺陷。for-in循环虽然可以循环数组，但是会有好多坑，它主要用于循环对象，今天我总结的是数组的循环，就把for-in排除在外了。历数组中的每一项，没有返回值，对原数组没有影响，不支持IE，break无法跳出循环，retrun只能跳出当前循环，无法终止循环。给数组每一项都运行一个函数，同every相反，只要有一项符合条件，就跳出循环，返回true，否则返回false。
js中数组的遍历的几种方法
热门推荐
1000001000
02-21 9万+
javascript中数组的几种遍历方法
浅谈四种JS数组循环
世界和我们都不该止步于此
05-02 2337
一.forEach循环 他不能够终止循环----所以forEach的性能比较差 意思是就算查找到了我们需要的数组元素，forEach也不会停下来的，直到把这个数组所有数组循环一遍才能终止本次循环： eg： const arr = [1,3,5,7,8,10,12,14,16] arr.forEach((item,index)=> { console.log('循环了几次？'); if(item === 8){ console.log('到这里我已经查询到了我想
JS遍历数组的十五种方法
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
Lua中遍历数组和table的4种方法
09-22
主要介绍了Lua中遍历数组和table的4种方法,本文讲解了使用for遍历、迭代器的方式遍历等方法,同时提供一个复杂table的的遍历方法,需要的朋友可以参考下
JS循环+数组
qq_40832034的博客
07-02 1975
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然 循环结束：  continue：结束本次循环，继续下次循环  break：跳出所在的循环for 循环嵌套 数组(Array)是一种可以按顺序保存数据的数据类型，可以保存多个数据 通过下标取数据用循环把数组中每个元素都访问到,一般会用for循环遍历 ① 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点) ② 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度 ① 方法从数组中删除最后一个元素，并返回该元素的值 ②
javascript 循环数组的六种方式
qq_37550440的博客
04-22 1639
let list = ['1', '2', '3'] // list 是object for (const key in list) { console.log(list[key]); } for(let i=0 ; i< list.length; i++) { console.log(i); // 索引值 } console.log(1); // 控制台输出 字体是蓝色 是int型 console.log('1'); // 控制台输出 字体是黑色 是字符串型 console.log(l.
【循环数组】js循环数组的方法合集
weixin_48596030的博客
07-19 4150
【循环数组】js循环数组的方法合集
js 数组循环操作方法
qq_42389674的博客
10-16 2314
for 循环处理数据 for 循环处理数据是数组操作的基本方法 for (let index = 0; index < list.length; index++) { const element = list[index]; } for循环处理数据的注意点 当数组里里面的值是对象类型时，数组里的每一项的属性是可以改变的 let listObj = [ { name:'11', age:18 }, { ..
js 数组遍历方法详解（map、filter、find、findIndex、reduce）
在下月亮有何贵干
04-26 3716
数组遍历方法是js最常用的一类方法，也是工作中必须掌握的一类方法，我们处理业务逻辑，大多都要对数组内的统一格式的数据进行遍历。本文以map的详细解释，让读者先掌握这一类型方法的统一模式，再介绍filter、find、findIndex、reduce等相似性，这样能够将一类的方法全部记住。
【JS】JS中的常见数组遍历方法详解(forEach, map, filter, sort, reduce, every)
a1611107035的博客
11-01 5342
在ES6的语法中，数组新添了好几种新的和遍历有关的方法。虽然这些函数本质上都是语法糖，理论上说，离开他们一样可以写码。但是他们的存在使我们的业务处理方便了太多，所以说熟练掌握他们在实际开发中是非常必要的。对于第一次见到他们的同学来说，他们也许不是特别容易理解，本篇讲用实际案例详解他们的语法和用法。
javascript中数组遍历的方法
摆脱菜鸟，砥砺前行
07-26 1962
1、for循环 最常用也是最简单的遍历方式，可以使用break或者continue终止，一个优化的方法是把length保存起来，避免重复获取，当数组长度很大时会体现出优化效果。 let arr = [1,2,3,4,5,6]; for(let i = 0, len = arr.length;i < len; i++){ if(arr[i] > 4) { break; } console.log(arr[i]); // 1 // 2
js 递归遍历深层数组 获取返回值
qq_23416421的博客
05-13 3703
最近做前端项目时，表单中用到了多层级设备/部门树，显示详情时需要根据 设备/部门 id 显示子部门名称。 本着封装的原则，将查找方法进行封装；采用递归来遍历深层数组，示例代码如下： 递归遍历 并返回值的方法(可以根据需要进行传参) //递归查找 tree 数据中的 id 的 名称; 可以传入 字段参数的名称 ，有默认值 var cLabel; //递归 遍历深层 数组 要有接收值 才可以 function getDeepArrData (arr,id,idStr='id',child='child
js中some和every
09-14
`every`方法则会遍历数组中的每个元素，直到找到一个不满足指定条件的元素。如果找到了不满足条件的元素，则返回 `false`，否则返回 `true`。 例如，我们可以使用`every`方法来判断一个数组中的所有元素是否都是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值