javascript json对象小技巧之键名作为变量用法分析


Posted in Javascript onNovember 11, 2019

本文实例讲述了javascript json对象小技巧之键名作为变量用法。分享给大家供大家参考,具体如下:

有时候在项目开发过程中,我们需要json对象的键名作为一个变量,键名可变,传统的json格式不支持这个,怎么办呢?

传统的json数据格式

<script type="text/javascript">
  var json={
    name : "谭勇"
  }
  console.log(json.name);
</script>

这样是没有问题的,那么根据思路我们这样

<script type="text/javascript">
  var key = "name";
  var json = {
    key : "谭勇"
  }
  console.log(json.name);
</script>

这样会成功吗? 答案是错了,javascript 会提示你一个错误 name undefined 没有定义

键名作为变量实例如下

<script type="text/javascript">
  var json = {};
  json["name"] = "谭勇";
  console.log(json.name);
</script>

这样就可以输出来了;

甚至我们还可以这样

<script type="text/javascript">
  var key = "name";
  var json = {};
  json[key] = "谭勇";
  console.log(json.name);
</script>

有点类似数组,你可以写个demo亲自测试!

Javascript 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
Vue.js watch监视属性知识点总结
Nov 11 #Javascript
javascript数组的定义及操作实例
Nov 10 #Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 #Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 #Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 #Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php 魔术方法详解
2014/11/11 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python ljust rjust center输出
2008/09/06 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
英语课外活动总结
2014/08/27 职场文书
2015年调度员工作总结
2015/04/30 职场文书
唐山大地震的观后感
2015/06/05 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js