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. ...
随机推荐
- 通过对比语法差异,让会JAVA的你快速学会Kotlin的开源宝藏项目
今天有个小伙伴来问TJ君,说自己JAVA用的贼溜,想再学习下Kotlin,问TJ君上手难不难? 怎么说呢?其实TJ君一直觉得语言这方面,是触类旁通.一通百通的,既然JAVA已经贼溜了,想必学其他的语言 ...
- 关于Web的一些知识,Web怎么构成?
前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...
- Hadoop3.x完全分布式搭建(详细)
环境准备 vm虚拟机(自行安装Centos7系统) hadoop3.x安装包(linux版本) java1.8安装包(linux版本) 为了能够按照教程顺利操作,需要注意几点细节 不要不看文字直接复制 ...
- 测试平台系列(91) 编写oss管理页面
大家好~我是米洛! 我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持. 欢迎关注我的公众号米洛的测开日记,获取最新文章教程! 回顾 上一节我们编写好了oss相关 ...
- jq 简易购物车功能实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- tp5 Redis缓冲的设置与清除
控制器代码: //设置缓冲的方法 public function order() { $word = input('word');//接受搜索值 //题意:将订单数据使用redis进行缓存中,第二次读 ...
- IDEA快捷键使用分享
Ctrl+D:复制当前行 Shift+Enter:光标移动到下一行 Alt+/:补全代码 Alt+Enter:万能解错/生成返回值变量 Ctrl+Z:撤销 Ctrl+y:反撤销 Ctrl+y:删除 C ...
- [树]LeetCode589 N叉树的前序遍历
LeetCode N叉树的前序遍历 前言:树的前中后序遍历已经是很经典的题目的,要么递归要么迭代,不过还是比较习惯于递归的写法 TITLE 给定一个 n 叉树的根节点 root ,返回 其节点值的 前 ...
- html 两个并列div样式
1.html 代码 <html> <head> <link rel="stylesheet" href="cs2.css"> ...
- 安装Win7与Ubuntu16.04双系统操作教程
安装主要分为以下几步: 一. 下载Ubuntu 16.04镜像软件: 二. 制作U盘启动盘使用ultraISO: 三. 安装Ubuntu系统: 四. 用EasyBCD 创建启动系统启动引导: (根据个 ...