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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
XML的代替者----JSON
Jul 21 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 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加密解密的代码
2007/07/16 PHP
php实现三级级联下拉框
2016/04/17 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
深入解析神经网络从原理到实现
2019/07/26 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
利用python生成照片墙的示例代码
2020/04/09 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
如何写好建议书
2014/03/13 职场文书
党员活动日总结
2014/05/05 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
加班费申请报告
2015/05/15 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS