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 相关文章推荐
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
angularJS提交表单(form)
Feb 09 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
webpack之devtool详解
2018/02/10 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
社区元宵节活动总结
2015/02/06 职场文书
会计工作检讨书
2015/02/19 职场文书
九不准学习心得体会
2016/01/23 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
python之django路由和视图案例教程
2021/07/26 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript