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中this做事件参数相关问题解答
Mar 17 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
js 动态选中下拉框
2009/11/26 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Keras搭建自编码器操作
2020/07/03 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
UNIX文件类型
2013/08/29 面试题
日语专业毕业生求职信
2013/12/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015党建工作简报
2015/07/21 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
班主任培训研修日志
2015/11/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL