Vue JavaScript 遍历对象数组集合字典的Demo

关注

原创最新推荐文章于 2026-08-30 13:44:54 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

2025阿里前端面试核心考点：从JavaScript到工程化实战前端工程化已成为现代前端开发的核心能力，其本质是将复杂业务拆解为可维护的模块与流程。理解JavaScript作用域与异步机制、浏览器渲染原理及框架设计思想，是构建高质量应用的基础。这些底层知识直接决定了性能优化、微前端改造、大文件上传等实战场景的解决方案质量。2025年阿里前端面试更注重候选人能否从原理层面解释问题，并给出可落地的工程方案。本文整理了面试中的高频考点与答题思路，涵盖JS语言功底、框架对比、构建工具优化、运行时性能调优及AI辅助开发新趋势，为准备高级前端岗位的开发者提供系统参考。阅读详情

遍历对象

  //forin循环
  
  let objs = [{
          id: 1,
          name: 'object1'
        }, {
          id: 2,
          name: 'object2'
        }, {
          id: 3,
          name: 'object3'
     }]
     
    for (var obj in objs) {
        console.log('name ')
        console.log(objs[obj]['name'])
      }

遍历数组

//forin循环

 let arrys = ['张三', '李四', '王五']
 
    for (var arry in arrys) {
      console.log('数组内容')
      console.log(arrys[arry])
      console.log('数组下标')
      console.log(arry)
  }

遍历集合

 //for循环

		let obj = {
	       id: 1,
	         name: 'object1'
	    }
        
        let obj1 = {
          id: 2,
          name: 'object2'
        }
        
        let lists = []
        lists.push(obj)
        lists.push(obj1)
        
     for (var i=0;i<=lists.length;i++){
        console.log("集合对象属性");
        console.log(lists[i]['name']);
      }

遍历字典 (Map)

 //forin循环
  
     let dics  = {
          b: 2,c: 3, a: 1
     }
        
      for(var key in dics){
        console.log("key: "+key+" value: "+dics[key])
      }
      
      console.log("字典元素按key值排序: ");
      var res = Object.keys(dics).sort();
      
      for(var key in res){
        console.log("key: " + res[key] + " ,value: " + dics[res[key]]);
      }

      console.log("字典元素按value值排序: ");
      var res2 = Object.keys(dics).sort(function(a,b){ return dics[a]-dics[b]; });
      
      for(var key in res2){
        console.log("key: " + res2[key] + " ,value: " + dics[res2[key]]);
      }

收录于