发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值。其实这一切都是引用数据类型惹的祸。
如果你也有类似问题,可以继续看下去哦。
下面代码模拟:
将json对象的每个键值对,单独搞成对象,再赋值给数组,最后输出数组。结果数组应该是有三个对象。(for-in用于对象遍历)

1
2
3
4
5
6
7
8
var json = { top: '400px', width: '500px', height: '300px' };
var data = {};//在外面定义对象
var datas = [];
for (key in json) {
    data.name = key;
    datas.push(data);
}
console.log(datas)

输出结果:

原因:
我们遍历json对象时(var json = { top: ‘400px’, width: ‘500px’, height: ‘300px’ };),在循环外面定义一个对象,用于保存分离的json对象。

解决方法:
每次循环的时候,新建一个对象

1
2
3
4
5
6
7
8
var json = { top: '400px', width: '500px', height: '300px' };
var datas = [];
for (key in json) {
    var data = {};//每次循环的时候,新建对象
    data.name = key;
    datas.push(data);
}
console.log(datas)

结果:

JS:数组中push对象,覆盖问题的更多相关文章

  1. JS——数组中push对象,覆盖问题,每次都创建一个新的对象

    今天写运动框架时,发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸.       如果你也有类似问题,可以继续看下去哦.       下面 ...

  2. 小姐姐手把手教你JS数组中的对象去重

    有时候数据库中的数据重复的,我们另一个需求需要数据的唯一性 那么这时候就用到这个方法了  我还是以截图的方式发粗来  不然太丑了 见谅 console.log(map)打印出来的结果已经帮我们把需要的 ...

  3. js数组中去重对象

    var allCourses = new Array();var coursesId = new Array();function findCourses() { Courses.data().eac ...

  4. js数组中去除重复对象及去除空对象的方法

    (function(){//去除数组中重复对象 var unique = {}; arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 }) ...

  5. js数组中对象去重 (reduce() 方法)

    一个数组中含有对象,并且去掉数组中重复的对象.主要代码如下: var arrData = [ {id: , name: "小明"}, {id: , name: "小张&q ...

  6. 统计Mongo数组中相同对象的属性之和

    统计Mongo数组中相同对象的属性之和 需求 需要统计app端用户的行为,按天分表,存入mongo.每次用户进行操作的时候,将数据存入app本地,下次用户启动的时候,提交存入mongo,删除app本地 ...

  7. Java如何从数组中查找对象元素?

    在Java中,如何从数组中查找对象元素? 示例 以下示例使用Contains方法来搜索数组中的String对象. package com.yiibai; import java.util.*; pub ...

  8. 统计js数组中奇数元素的个数

    如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历 然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们 ...

  9. js 根据条件删除数组中某个对象&js filter (find)过滤数组对象的使用

    删除 ----  item不设置 arr.splice(1,1)   //['a','c','d']         删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变 arr. ...

随机推荐

  1. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  2. broken pipe 报错分析和解决办法

    参考资料: 1.博客1:https://blog.csdn.net/qq_37535749/article/details/113781338 2.博客2:https://blog.csdn.net/ ...

  3. c# 去除TextBox的获取焦点事件

    /// <summary> /// 去除TextBox的获取焦点事件 /// </summary> /// <param name="sender"& ...

  4. gvim 配置vimrc

    ##################################################################### normal setup################## ...

  5. Django中的Session和cookie

    Session和cookie 参考文献:https://www.cnblogs.com/wupeiqi/articles/5246483.html 1.问题引入 1.1 cookie是什么? 保存在客 ...

  6. 04-SpringMVC之请求处理流程

    SpringMVC之请求处理流程 我们知道DispatcherServlet就是一个HttpServlet,而HttpServlet的请求就从doGet/doPost开始 DispatcherServ ...

  7. 在 k8s 以外的分布式环境中使用 Dapr

    在Dapr 文档和实践案例中多是推荐采用k8s, 其实我目前也是在k8s 上操作的,有公有云TKE,AKS,还有私有云的Rancher ,它并没有传闻中的那么难,而且我认为它非常容易上手.不过,我还是 ...

  8. DNS服务/etc/rndc.key was found解决办法

    问题: [root@localhost ~]# rndc reload rndc: neither /etc/rndc.conf nor /etc/rndc.key was found 解决办法: R ...

  9. MATLAB菜鸟入门笔记【作图章】

    1.函数标签[legend]         http://blog.csdn.net/wangcj625/article/details/6287735/

  10. PHP日常错误总结

    session问题 问题描述 初到公司开发的项目在本地测试没有问题,部署到线上之后出来验证码一直错误,或者是CSRF token mismatch. 这些问题都是和session有关系,打开两个页面, ...