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修改css样式style
Apr 15 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
javascript数组的使用
Mar 28 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
用来给图片加水印的PHP类
2008/04/09 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
微信公众号token验证失败解决方案
2019/07/22 Python
在pycharm中实现删除bookmark
2020/02/14 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
求职信格式范本
2013/11/15 职场文书
老师自我鉴定范文
2013/12/25 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
聘任书的格式及模板
2019/10/28 职场文书
Python中字符串对象语法分享
2022/02/24 Python