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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php算法实例分享
2015/07/14 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
DIV菜单层实现代码
2010/11/19 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python生成word合同的实例方法
2021/01/12 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
护理专业推荐信
2013/11/07 职场文书
夏季药店促销方案
2014/08/22 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
综合办公室岗位职责
2015/04/11 职场文书
消防演习感想
2015/08/10 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android