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 添加和移除函数的通用方法
Oct 20 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
利用js实现简易红绿灯
Oct 15 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之第五天
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Vue header组件开发详解
2018/01/26 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python实现超市商品销售管理系统
2019/11/22 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
文员岗位职责
2013/11/09 职场文书
2014年党课学习材料
2014/05/11 职场文书
村创先争优活动总结
2014/08/28 职场文书
优秀教研组申报材料
2014/12/26 职场文书
革命电影观后感
2015/06/18 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书