首先，回忆一下，访问对象属性一共有两种方法：点获取法和方括号获取法。而我们最常用的就是点获取法了。但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不太好用了，尤其是我们不知道属性名的时候更不好办。这时候，方括号获取法就派上用场了。下面，来看一个例子，就一目了然了。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <p>请输入城市名字</p>

     <input type="text" id="input-city"/>

     <br/>

     <p>请输入空气污染指数</p>

     <input type="text" id="input-num"/>

     <button id="btn">按钮</button>

 </body>

 <script>

     window.onload = function(){

         var btn = document.getElementById('btn');

         var input_city = document.getElementById('input-city');

         var input_num = document.getElementById('input-num');

 // 先声明一个空对象

         var obj = {};//用来存放获取到所填写的信息

 //点击按钮的时候将信息保存到对象中

         btn.onclick = function(){

             var city = input_city.value;

             var num = input_num.value;

             obj[city] = num;//利用方括号法添加属性和属性值

             console.log(obj);//会输出obj={xxx：yyyy，zzz：kkk}

         }

     }

 </script>

 </html>

关于如何利用原生js动态给一个空对象添加属性以及属性值的更多相关文章

  1. js动态的给json对象添加新的元素

    把{name:"xxx",age:"xxx"}变成{name:"xxx",age:"xxx",value:"x ...

  2. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  3. 利用原生JS实现类似浏览器查找高亮功能(转载）

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  4. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  5. php 中如何创建一个空对象

    // 创建一个空对象 $obj=(object)array(); //假设这是从数据库取内容 $arr=["prod_id"=>103,"prod_name&quo ...

  6. PHP中怎样创建一个空对象?

    如果没有声明一个对象然后就对其属性赋值会出现警告.那么我们给它创建一个空对象然后赋值就好了.PHP中创建一个空对象代码如下: 第一种方式: $empty_object = new stdClass() ...

  7. jQuery.isEmptyObject()函数用于判断指定参数是否是一个空对象。

    jquery中有一个函数isEmptyObject()用来判断制定参数是否是一个空对象. 示例如下: function isEmptyObject(e) { var t; for (t in e) r ...

  8. js判断一个对象{}是否为空对象，没有任何属性

    // js如何判断一个对象{}是否为空对象,没有任何属性 if (typeof model.rows === "object" && !(model.rows in ...

  9. js进阶-9-3/4 form对象有哪些常用属性

    js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...

随机推荐

  1. 【2018 ICPC南京网络赛 A】An Olympian Math Problem（数论题）

    Alice, a student of grade 6, is thinking about an Olympian Math problem, but she feels so despair th ...

  2. Linux之redis主从复制

    redis集群中的数据库复制就是通过主从同步实现的 主节点Master把数据分发给节点Salve 主从同步的好处在高可用, redis节点有冗余设计 redis主从同步的原理 1. 从服务器向主服务器 ...

  3. linux的date常用命令

    1.显示现在时间 date 2.显示今天日期 date +"%F" date +"%Y-%m-%d" 3.现在时间转化为时间戳 date +%s 4.指定某日期 ...

  4. 9.1 IIC驱动源码分析

    学习目标:分析linux内核源码下的i2c总线驱动 drivers/i2c/busses/i2c-s3c2410.c 和 driver/i2c/chips/eeprom.c 设备驱动: 一.i2c驱动 ...

  5. 06 python操作MySQL和redis（进阶）

    python操作mysql.redis 阶段一.mysql事务 主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息, ...

  6. 修复网站漏洞对phpmyadmin防止被入侵提权的解决办法

    phpmyadmin是很多网站用来管理数据库的一个系统,尤其是mysql数据库管理的较多一些,最近phpmysql爆出漏洞,尤其是弱口令,sql注入漏洞,都会导致mysql的数据账号密码被泄露,那么如 ...

  7. 网站安全检测 漏洞检测 对thinkphp通杀漏洞利用与修复建议

    thinkphp在国内来说,很多站长以及平台都在使用这套开源的系统来建站,为什么会这么深受大家的喜欢,第一开源,便捷,高效,生成静态化html,第二框架性的易于开发php架构,很多第三方的插件以及第三 ...

  8. spring配置jackson不返回null值

    #json不返回null spring.jackson.default-property-inclusion=non_null

  9. CentOS（Linux）安装KETTLE教程 并配置执行定时任务

    1,首先是安装jdk,并设置环境变量 采用yum安装可不设置环境变量 2,下载kettle https://sourceforge.net/projects/pentaho/files/Data%20 ...

  10. R语言学习笔记（八）：零碎知识点(16-20)

    16--complete.cases( ) complete.case()可以判断对象中是否数据完全,然后返回TRUE, FALSE 这一函数在去除数据框中缺失值时很有用. > d kids a ...