发现将对象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. Qt:QMap

    0.说明 QMap < Key , T > 一个QMap就是一个K-V对,也可以说是字典对象. 1)构造 构造一个Key是QString,Value是int的QMap: QMap<Q ...

  2. 根据文件url,下载文件到本地

    /// <summary> /// 根据文件url,下载文件到本地 /// </summary> /// <param name="fileUrl"& ...

  3. petite-vue源码剖析-v-if和v-for的工作原理

    深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> i ...

  4. JZ-047-求 1+2+3+...+n

    标题 求 1+2+3+...+n 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目链接: 求 1+2 ...

  5. 矩池云上nvidia opencl安装及测试教程

    本教程租用的是2080ti,3.7多框架镜像. 添加nvidia-cuda的阿里源 curl -fsSL https://mirrors.aliyun.com/nvidia-cuda/ubuntu18 ...

  6. 注册接口(数字字典和api接口)

    ///////////////////////////////////////资源路由 ///////////////////////////////////////资源控制器 <?phpnam ...

  7. think php jq ajax删除

    表单展示页面 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  8. git error: unable to create file Invalid argument

    git error: unable to create file xxxx  Invalid argument 原因: mac  上创建的文件名里有冒号,这在windows 上是不允许的. 解决方式: ...

  9. Linux下C语言复制文件

    从usr/bin/info复制到myinfo.c #include<unistd.h> #include<fcntl.h> #include<sys/types.h> ...

  10. Linux上后台保持Terminal交互运行的三种方式:nohub、screen和tmux

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 后台运行 Linux上,如果一个进程需要保持后台运行,尤其是在Linux服务器上,后台运行程序.避免因为SSH连接断开而导致进程停止运行时,该怎么 ...