实例详解JSON取值(key是中文或者数字)方式


Posted in Javascript onAugust 24, 2017

JSON取值(key是中文或者数字)方式详解

先准备一个json对象用于演示

var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'};

1.使用JS中with关键字

with(json) {
  console.log(name);//输出:zhangsan
  console.log(年龄);//输出:23
  console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题
}

2.最常见的传统的读取key

console.log(json.name);//输出:zhangsan
//key是中文也是支持的
console.log(json.年龄);//输出:23
//key是Number类型或者String类型的数字都不能这么读取
console.log(json.404);//报错

3.通用万能型:json['key']

console.log(json['name']);/输出:zhangsan
console.log(json['年龄']);//输出:23
console.log(json['404']);//输出:你可能迷路了
json[key]
console.log(json[name]);/输出:undefinded
console.log(json[年龄]);//报错
console.log(json[404]);//输出:你可能迷路了

json处理动态key方式

先准备案例对象

var jsonArr = [
  {"id": "1", "name": "A1"},
  {"id": "2", "name": "A2"},
  {"id": "3", "name": "A3"},
  {"id": "4", "name": "A4"},
  {"id": "5", "name": "A5"}
]

1.如果数据量不大,偶尔查询一次,使用for...in遍历

2.如果数据量大,经常使用,建立查找表提升性能

//创建一个查找表函数
function createLookMap(field) {
  var map = {};//创建一个空的json对象
  for (var i = 0; i < jsonArr.length; i++) {
    var value = jsonArr[i];//将数组中的元素作为json对象的值
    var key = value[field];//选取一个属性作为新的json对象的key
    map[key] = value;
  }
  return map;
}

总结

以上所述是小编给大家介绍的实例详解JSON取值(key是中文或者数字)方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 #Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 #Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 #Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 #Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 #Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 #Javascript
You might like
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python实现字符串加密成纯数字
2019/03/19 Python
用Python进行websocket接口测试
2020/10/16 Python
2013年军训通讯稿
2014/02/05 职场文书
车辆转让协议书
2014/04/15 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
个人催款函范文
2015/06/24 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android