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实现全选与取消的两种简单方法
Feb 22 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
Vue程序调试的方法
Jun 17 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
Javascript设计模式之原型模式详细
Oct 05 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获取post中的json数据的实现方法
2011/06/08 PHP
php导入导出excel实例
2013/10/25 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python实现贪吃蛇游戏
2020/03/21 Python
python安装pil库方法及代码
2019/06/25 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
个人简历自荐信
2013/12/05 职场文书
双创工作实施方案
2014/03/26 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
出租房屋协议书
2014/09/14 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
团委工作总结2015
2015/04/02 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL