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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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/10/09 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
PHP 验证码的实现代码
2011/07/17 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php事件驱动化设计详解
2016/11/10 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python如何在终端里面显示一张图片
2016/08/17 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python lxml中etree的简单应用
2019/05/10 Python
Django实现文件上传下载功能
2019/10/06 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
太太口服液广告词
2014/03/20 职场文书
干部鉴定材料
2014/05/18 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Django基础CBV装饰器和中间件
2022/03/22 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python