JS:数组中push对象,覆盖问题
发现将对象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对象,覆盖问题的更多相关文章
- JS——数组中push对象,覆盖问题,每次都创建一个新的对象
今天写运动框架时,发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸. 如果你也有类似问题,可以继续看下去哦. 下面 ...
- 小姐姐手把手教你JS数组中的对象去重
有时候数据库中的数据重复的,我们另一个需求需要数据的唯一性 那么这时候就用到这个方法了 我还是以截图的方式发粗来 不然太丑了 见谅 console.log(map)打印出来的结果已经帮我们把需要的 ...
- js数组中去重对象
var allCourses = new Array();var coursesId = new Array();function findCourses() { Courses.data().eac ...
- js数组中去除重复对象及去除空对象的方法
(function(){//去除数组中重复对象 var unique = {}; arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 }) ...
- js数组中对象去重 (reduce() 方法)
一个数组中含有对象,并且去掉数组中重复的对象.主要代码如下: var arrData = [ {id: , name: "小明"}, {id: , name: "小张&q ...
- 统计Mongo数组中相同对象的属性之和
统计Mongo数组中相同对象的属性之和 需求 需要统计app端用户的行为,按天分表,存入mongo.每次用户进行操作的时候,将数据存入app本地,下次用户启动的时候,提交存入mongo,删除app本地 ...
- Java如何从数组中查找对象元素?
在Java中,如何从数组中查找对象元素? 示例 以下示例使用Contains方法来搜索数组中的String对象. package com.yiibai; import java.util.*; pub ...
- 统计js数组中奇数元素的个数
如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历 然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们 ...
- js 根据条件删除数组中某个对象&js filter (find)过滤数组对象的使用
删除 ---- item不设置 arr.splice(1,1) //['a','c','d'] 删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变 arr. ...
随机推荐
- Qt:QMap
0.说明 QMap < Key , T > 一个QMap就是一个K-V对,也可以说是字典对象. 1)构造 构造一个Key是QString,Value是int的QMap: QMap<Q ...
- 根据文件url,下载文件到本地
/// <summary> /// 根据文件url,下载文件到本地 /// </summary> /// <param name="fileUrl"& ...
- petite-vue源码剖析-v-if和v-for的工作原理
深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> i ...
- 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 ...
- 矩池云上nvidia opencl安装及测试教程
本教程租用的是2080ti,3.7多框架镜像. 添加nvidia-cuda的阿里源 curl -fsSL https://mirrors.aliyun.com/nvidia-cuda/ubuntu18 ...
- 注册接口(数字字典和api接口)
///////////////////////////////////////资源路由 ///////////////////////////////////////资源控制器 <?phpnam ...
- think php jq ajax删除
表单展示页面 <!doctype html> <html lang="en"> <head> <meta charset="UT ...
- git error: unable to create file Invalid argument
git error: unable to create file xxxx Invalid argument 原因: mac 上创建的文件名里有冒号,这在windows 上是不允许的. 解决方式: ...
- Linux下C语言复制文件
从usr/bin/info复制到myinfo.c #include<unistd.h> #include<fcntl.h> #include<sys/types.h> ...
- Linux上后台保持Terminal交互运行的三种方式:nohub、screen和tmux
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 后台运行 Linux上,如果一个进程需要保持后台运行,尤其是在Linux服务器上,后台运行程序.避免因为SSH连接断开而导致进程停止运行时,该怎么 ...