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

代码如下：

 <!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. Luogu P2590 [ZJOI2008]树的统计

    最近在学树剖,看到了这题就做了 [ZJOI2008]树的统计 思路 从题面可以知道,这题是树剖题(要求的和模板没什么区别呀喂 就是在普通的树剖上加了一个最大值 所以可以知道就是树剖+特殊的线段树 线段 ...

  2. [USACO1.5]数字三角形 Number Triangles

    题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以走到左下方的点也可以到达右下方的点. 7 3 8 8 1 0 2 7 4 4 4 5 ...

  3. oracle-sql优化-通过分组和缓存减少不必要的读

    环境:aix 7.1,oracle12.1.0.2 cdb 优化前SQL select * from (select row_.*, rownum rownum_ from (select '弱覆盖' ...

  4. Co. - Apple - Apple ID

    有些应用或游戏,在国内 App Store 没上架或者被下架了,但是其他国家或地区(如美国.香港和台湾等)的 App Store 却提供下载,这时我们需要登陆一个相应地区的 Apple ID 才可以下 ...

  5. 使用jQuery实现数字逆时针旋转

    要实现数字逆转,最主要是分析我们页面的元素结果,结合选择器充分利用起来! 例如:以下lable中每一个id和值的安排具有一定结构的意义需要用心分析: jQuery代码:

  6. sax技术解析xml下jaxp解析器详细代码

    *解析xml的两种技术dom和sax dom:根据xml的层级结构在内存中分配一个树形结构,把xml标签,属性,文本封装成对象. sax方式:事件驱动,边读边解析. 在javax.xml.parser ...

  7. 消费滚动滴log日志文件(flume监听,kafka消费,zookeeper协同)

    第一步:数据源 手写程序实现自动生成如下格式的日志文件: 15837312345,13737312345,2017-01-09 08:09:10,0360 打包放到服务器,使用如下命令执行,模拟持续不 ...

  8. Hive优化之谓词下推

    Hive优化之谓词下推 解释 Hive谓词下推(Predicate pushdown) 关系型数据库借鉴而来,关系型数据中谓词下推到外部数据库用以减少数据传输 基本思想:尽可能早的处理表达式 属于逻辑 ...

  9. （数据科学学习手札19）R中基本统计分析技巧总结

    在获取数据,并且完成数据的清洗之后,首要的事就是对整个数据集进行探索性的研究,这个过程中会利用到各种描述性统计量和推断性统计量来初探变量间和变量内部的基本关系,本篇笔者便基于R,对一些常用的数据探索方 ...

  10. c/c++ 随机数生成

    当程序需要一个随机数时有两种情况下使用: 1.程序中只需使用一次随机数,则调用rand()函数即可 2.程序需要多次使用随机数,那么需要使用srand()函数生成随机数种子在调用rand()函数保证每 ...