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. ...
随机推荐
- 使用Filter过滤器,解决中文乱码问题
首先是建立一个filter.java文件,注意implements的是Filter的servlet的那个包: public class filter11 implements Filter { @Ov ...
- VS Code 启动占用100%Cpu问题解决办法
打开VS Code之后,点击文件->首选项->设置 search.followSymlinks
- .NET WebApi使用Swagger
1.新建WebApi 项目 2.引用Swagger 包 3.创建项目XML注释文档 在项目App_Start文件夹下的SwaggerConfig.cs类中加入 c.IncludeXmlComments ...
- 03-Eureka注册中心
1.介绍 2.快速开始 2.1 pom文件依赖 <?xml version="1.0" encoding="UTF-8"?> <project ...
- iNeuOS工业互联网操作系统下发命令给iNeuLink硬件网关,进一步修改设备参数和控制设备
目 录 1. 应用场景... 1 2. DCS数据采集... 2 3. 硬件网关的配置... 2 4. 平台端配置... 3 1. 应用场景 i ...
- mysql通过mysqldunp命令重做从库详细操作步骤
mysql通过mysqldunp命令重做从库详细操作步骤 背景 生产环境上的主从复制集群,因为一些异常或人为原因,在从库做了一些操作,导致主从同步失败.一般修复起来比较麻烦,通过重做mysql从库的方 ...
- 上传css,js文件并引用
今天在做单页面的简历,由于css样式跟js代码过多,所以就想着可不可以把css文件跟js文件上传到网上,然后引用. 一开始的想法是我上传到gitee上,但是从gitee服务器返回的Header上加了C ...
- mysql命令flush privileges命令
修改一个用户的密码,命令如下 mysql> update user set password=password('新密码') where user='用户名'; 执行后报错: ERROR 105 ...
- TP5框架中实现多条件登录
控制器代码 //登录功能 public function login(){ $data = input(); $validate = $this->validate($data,[ 'uname ...
- php 23种设计模型 - 单例模式
单例模式(Singleton) 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一 ...