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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue中英文切换实例代码
Jan 21 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
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
preg_match_all使用心得分享
2014/01/31 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP反射基础知识回顾
2020/09/10 PHP
浅谈js的setInterval事件
2014/12/05 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
python学习数据结构实例代码
2015/05/11 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
对pandas中Series的map函数详解
2018/07/25 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python实现维吉尼亚加密法
2019/03/20 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
如何删除一个表里面的重复行
2013/07/13 面试题
销售类个人求职信范文
2013/09/25 职场文书
汉语专业应届生求职信
2013/10/01 职场文书
女大学生自我鉴定
2013/12/09 职场文书
联欢晚会主持词
2014/03/25 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
献爱心活动总结
2014/05/07 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
护士医德医风自我评价
2014/09/15 职场文书
销售经理岗位职责
2015/01/31 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
企业员工辞职信范文
2015/05/12 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis