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可访问其它域名的cookie的方法
Sep 18 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
生日宴会答谢词
2014/01/09 职场文书
初中英语演讲稿
2014/04/29 职场文书
促销活动计划书
2014/05/02 职场文书
离婚起诉状范本
2015/05/19 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
python实现简单的三子棋游戏
2022/04/28 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android