脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS键值对遍历json数组

JS实现键值对遍历json数组功能示例

 更新时间：2018年05月30日 11:27:55   作者：库塔姆斯  
这篇文章主要介绍了JS实现键值对遍历json数组功能,结合实例形式分析了javascript遍历json数组相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现键值对遍历json数组功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.jb51.net js键值对遍历json数组</title>
  </head>
  <body>
<script type="text/javascript">
var data = [];
var data = [];
data['上海'] = [{
  city:'闵行',
  value:'minhang'
},{
  city:'浦东',
  value:'pudong'
}];
data['四川'] = [{
  city:'温江',
  value:'wenjiang'
},{
  city:'成都',
  value:'chengdu'
}];
// 遍历数组
for(var province in data){
  for(var i=0;i<data[province].length;i++){
    console.log(province + ' - ' + data[province][i].city + ' - ' + data[province][i].value);
  }
}
</script>
</body>
</html>

运行结果如下：

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 微信小程序中悬浮窗功能的实现代码

    微信小程序中悬浮窗功能的实现代码

    悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。本文给大家分享一个比较常见的常见，通过实例代码给大家介绍微信小程序中悬浮窗功能的实现，一起看看吧
    2019-08-08
  • 小程序中的箭头函数的具体使用

    小程序中的箭头函数的具体使用

    这篇文章主要介绍了小程序中的箭头函数的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JavaScrip简单数据类型隐式转换的实现

    JavaScrip简单数据类型隐式转换的实现

    本文主要介绍了JavaScrip简单数据类型隐式转换的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue中使用cropperjs的方法

    vue中使用cropperjs的方法

    这篇文章给大家总结了在.vue文件里cropperjs的使用方法和经验教训，感兴趣的朋友跟随脚本之家小编学习吧
    2018-03-03
  • JS实现点击链接取消跳转效果的方法

    JS实现点击链接取消跳转效果的方法

    有时候我们仅仅希望将链接<a>作为一个按钮使用，但是在默认状态下，点击链接会出现跳转效果，下面就通过代码实例，介绍一下如何实现此效果
    2014-01-01
  • Javascript 事件捕获的备忘(setCapture,captureEvents)

    Javascript 事件捕获的备忘(setCapture,captureEvents)

    Javascript 事件捕获的备忘(setCapture,captureEvents)...
    2006-09-09
  • 使用 JS 判断用户是否处于活跃状态的案例详解

    使用 JS 判断用户是否处于活跃状态的案例详解

    这篇文章主要介绍了如何使用 JS 判断用户是否处于活跃状态,案例演示了如何获取用户活跃状态,时间阈值定为5秒,超出该阈值没有操作表示非活跃,否则属于正在活跃中,需要的朋友可以参考下
    2024-05-05
  • JavaScript实现图片预加载的方法总结

    JavaScript实现图片预加载的方法总结

    在Web前端开发中,图片是网页内容的重要组成部分,但它们的加载时间往往会影响页面的整体性能,为了提升用户体验,减少等待时间,开发者通常会采用图片预加载（Image Preloading）技术,本文给大家介绍了JavaScript实现图片预加载的方法总结,需要的朋友可以参考下
    2024-12-12
  • JS实现秒杀倒计时特效

    JS实现秒杀倒计时特效

    这篇文章主要为大家详细介绍了JS实现秒杀倒计时特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 浅谈JS使用[ ]来访问对象属性

    浅谈JS使用[ ]来访问对象属性

    下面小编就为大家带来一篇浅谈JS使用[ ]来访问对象属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论