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

最新推荐文章于 2025-04-26 22:23:57 发布

原创最新推荐文章于 2025-04-26 22:23:57 发布 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #mysql #jquery #typescript #javascript

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue中使用JavaScript遍历对象、数组、集合和字典（Map），详细讲解了不同类型的遍历方法和示例代码。

遍历对象

  //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]]);
      }