发现将对象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. Spring AOP之3w的配置

    1.3w是什么? ■ what.where.when 或者 what.when.where 2.what.where.when[通用] (1)what:增强器-bean[配置一个bean对象] (2) ...

  2. Python回顾笔记(此讲大致说明,详情请看之前的笔记)

    内容概要 数据分析(numpy,pandas,matplib) 数据清洗 爬虫 teableau软件 今日内容概要 Python知识回顾 数据分析 ipython模块 anaconda软件 numpy ...

  3. 图解大数据 | 海量数据库查询-Hive与HBase详解

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/84 本文地址:http://www.showmeai.tech/article-det ...

  4. 动手学TCP——CS144实验感想

    在Stanford CS144的课程实验Lab0~Lab4中,我们动手实现了一个自己的TCP协议,并且能够真的与互联网通信!此外,感谢Stanford开源本实验并提供了大量的优质测试用例,使得我们仅仅 ...

  5. 微信小程序获取当前的时间戳

    js文件中进行计算var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log(timestamp ...

  6. petite-vue源码剖析-优化手段template详解

    什么是<template>元素? <template>是2013年定稿用于提供一种更统一.功能更强大的模板本存放方式.具体表现为 通过<template>元素属性c ...

  7. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  8. CF1278F题解

    这不是傻逼题吗?????? 考虑到第一张是王牌的概率为 \(\frac{1}{m}\),答案就是: \[\sum_{i=0}^n\binom{n}{i}(\frac{1}{m})^i(1-\frac{ ...

  9. 安装ncclient出现rust版本不对问题解决

    在windows上安装ncclient的时候,出现了提示说rust版本需要至少1.14.0以上版本 解决办法: 在https://www.rust-lang.org/tools/install下载新版 ...

  10. Linux常用性能诊断命令详解

    top top命令动态地监视进程活动与系统负载等信息. 使用示例: top 效果如下图: 以上命令输出视图中分为两个区域,一个统计信息区,一个进程信息区. 统计信息区: 第一行信息依次为:系统时间.运 ...