js操作两个json数组合并、去重,以及删除某一项元素


Posted in Javascript onSeptember 22, 2020

两个json数组合并去重,以及删除某一项元素

let ha = [
 {id:'H',name:'3'},
 {id:'A',name:'6'},
 {id:'B',name:'14'},
 {id:'C',name:'60'}
 ];

let hb= [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'N',name:'2'},
 {id:'C',name:'19'}
 ];

// 合并两个json数组,并去重;

ha= Object.assign([], ha, hb);
console.log('ha',ha);

// [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'N',name:'2'},
 {id:'C',name:'19'}
 ];


// 去除json数组中的某一项

ha.splice(3, 1);
console.log('ha',ha);

// [ 
 {id:'H',name:'2'},
 {id:'A',name:'6'},
 {id:'B',name:'16'}, 
 {id:'C',name:'19'}
 ];

注:

一、Object.assign()方法,浅拷贝、对象属性的合并(数组是对象)

二、splice()方法

在W3C中我们可以查到有关于splice()的描述:

详情可以 查看这篇文章:https://3water.com/article/43046.htm

arrayObject.splice(index, howmany, item1, ....., itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。

参数1:index 为插入添加或(和)删除的起始位置;

参数2:howmany 指定从数组中添加/删除的元素个数;

参数3:item1, ....., itemX 可选,选择添加操作时填入,表示需要添加的元素。

参考:

js删除json中指定的元素

下面是其他网友的补充

将两个json数组合并

var str1=[{name:"11",age:11}];
var str2=[{name:"22",age:22}];
 
var str3 = [];
 
for (var i = 0; i < str1.length; i++) {
  str3.push(str1[i]);
}
 
for (var i = 0; i < str2.length; i++) {
  str3.push(str2[i]);
}
 
--------------
 
var str3 = str1.concat(str2);

本质上是数组,用合并数组的方法来进行合并。

JS实现JSON数组合并和去重

有两个json数组demo1和demo2

var demo1 = [{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"}];
var demo2 = [{"id": 2, "name": "牛肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}];

数组合并

var totalDemo = demo1.concat(demo2);
console.log(totalDemo); //[{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"},{"id": 2, "name": "牛肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}]

数组合并用的是concat方法,它可以用于字符串之间的连接和数组之间的连接。

数组去重

上面已经得到合并的数组 totalDemo ,去掉name属性是一样的json对象

var temp = {};  //用于name判断重复
var result = []; //最后的新数组

totalDemo.map(function (item, index) {
  if(!temp[item.name]){
    result.push(item);
    temp[item.name] = true;
  }
});

console.log(result);//[{"id": 0, "name": "牛肉"},{"id": 1,"name": "羊肉"},{"id": 3,"name": "鱼肉"},{ "id": 4,"name":"鸡肉"}];

map方法:按照原始数组元素顺序依次处理元素。可以在map方法里面输入console.log(item)打印看下,它会把数组中的对象依次打印出来。

Javascript 相关文章推荐
JavaScript关于select的相关操作说明
Jan 13 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
layui实现三级联动效果
Jul 26 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
深入浅析React中diff算法
May 19 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 #Javascript
Vue实现开关按钮拖拽效果
Sep 22 #Javascript
JS如何生成动态列表
Sep 22 #Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 #Javascript
You might like
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js 目录列举函数
2008/11/06 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python实现随机漫步功能
2018/07/09 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
文明教师事迹材料
2014/01/16 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
离婚财产分配协议书
2014/10/21 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书