💌 所属专栏：【JavaScript随手笔记】

😀 作  者：我是夜阑的狗🐶

🚀 个人简介：一个正在努力学技术的CV工程师  
  
  
  
  
  
 ，专注基础和实战分享  
  
  
  
  
  
 ，欢迎咨询！

💖 欢迎大家：这里是CSDN


 


 


 


 


 


 
，我总结知识的地方 
 
 
 
 
 
，喜欢的话请三连  
   
   
   
   
   
  ，有问题请私信 😘 😘 😘

前言

  大家好

 

 

 

 

 

 
，又见面了
 

 

 

 

 

 
，我是夜阑的狗🐶             ，本文是专栏【JavaScript随手笔记】专栏的第4篇文章;

  今天的需求中要到两个数组的比较
 

 
 

 
 

 
 

 
 

 
 

 
，不相同则进行覆盖











，相同则不操作                   ，所以只要对比多两个数组之间的差异即可；

  专栏地址：【JavaScript随手笔记】 
 
 
 
 
 
 
 
 
 
 
 
 
， 此专栏是我是夜阑的狗对JS数据处理的总结

















，希望能够加深自己的印象             ，以及帮助到其他的小伙伴😉😉  
  
  
  
  
  
 。

  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏 
  
  
  
  
  
 。

一            、方法一：数组拼接

  可以利用concat函数对两个数组进行拼接一个数组
 
  
 
  
 
  
 
  
 
  
 
  
，再用filter函数过滤数组并将差异返回成一个新的数组


 


 


 


 


 


 
。再对新数组判定就能知道两个数组是否有差异了











，下面先简单的介绍这两个函数使用方法；

 1.concat()函数

  语法

array1.concat(array2, array3,…, arrayX)

  参数

参数 描述 array2, array3,…, arrayX 必需 
 
 
 
 
 
。需要连接的数组  
   
   
   
   
   
  。

  返回值

类型 描述 Array 对象 返回一个新的数组

 

 

 

 

 

 
。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的
 

 

 

 

 

 
。

如果要进行 concat() 操作的参数是数组  
  
  
  
  
  
 ，那么添加的是数组中的元素 
  
  
  
  
  
 ，而不是数组             。

 2.filter()函数

  语法

array.filter(function(currentValue,index,arr), thisValue)

  参数

参数 描述 currentValue 必须的


 


 


 


 


 


 
，表示当前元素的值 index 可选参数 
 
 
 
 
 
，当前元素的索引值 arr 可选参数  
   
   
   
   
   
  ，当前元素属于的数组对象 thisValue 可选
 

 
 

 
 

 
 

 
 

 
 

 
。对象作为该执行回调时使用

 

 

 

 

 

 
，传递给函数
 

 

 

 

 

 
，用作 “this  
  
  
  
  
  
 ” 的值











。

如果省略了 thisValue              ，“this 
  
  
  
  
  
 ” 的值为 “undefined


 


 


 


 


 


 
”

 3.使用方式

差异比较方法： getArrDifference: function(arr1, arr2){ return arr1.concat(arr2).filter(function(value, i, arr){ return arr.indexOf(value) === arr.lastIndexOf(value); }) } 演示示例：

  可以根据不同的需要来对filter函数进行处理
 

 
 

 
 

 
 

 
 

 
 

 
，由于这里只能识别出两个数组有差异即可











，就没有做过多的处理； 注意：filter()不会对空数组进行检测 
 
  
 
  
 
  
 
  
 
  
 
  、不会改变原始数组                   。

var list1 = ["Engineer1", "Engineer2", "Engineer3", "Engineer4", "Engineer5"]; var list2 = ["Engineer1", "Engineer2", "Engineer1", "Engineer5"]; var list3 = ["Engineer1", "Engineer3", "Engineer5"]; var list4 = ["Engineer1", "Engineer4", "Engineer5"]; console.log(that.getArrDifference(list1,list2)); console.log(that.getArrDifference(list3, list4)); 运行结果：

二











、方法二：数组转字符串

  相比第一种方法                   ，第二种比较简单点
 
 
 
 
 
 
 
 
 
 
 
 
，只要用toString()函数将需要比较的数组转换成字符串

















，再对比即可；

差异比较方法： getArrDifference: function(arr1, arr2){ return arr1.toString() != arr2.toString(); }, 演示示例：

  当两个字符串不相同时             ，则返回true进行处理即可；

var list1 = ["Engineer1", "Engineer2", "Engineer3", "Engineer4", "Engineer5"]; var list2 = ["Engineer1", "Engineer2", "Engineer1", "Engineer5"]; var list3 = ["Engineer1", "Engineer3", "Engineer5"]; var list4 = ["Engineer1", "Engineer4", "Engineer5"]; console.log(that.getArrDifference(list1,list2)); console.log(that.getArrDifference(list3, list4)); 运行结果：

总结

  感谢观看
 
  
 
  
 
  
 
  
 
  
 
  
，如果有帮助到你











，请给文章点个赞和收藏  
  
  
  
  
  
 ，让更多的人看到
 
 
 
 
 
 
 
 
 
 
 
 
。🌹 🌹 🌹

  也欢迎你 
  
  
  
  
  
 ，关注我

















。👍 👍 👍

  原创不易


 


 


 


 


 


 
，还希望各位大佬支持一下 
 
 
 
 
 
，你们的点赞
  
  
  
  
  
  
、收藏和留言对我真的很重要！！！💕 💕 💕 最后  
   
   
   
   
   
  ，本文仍有许多不足之处

 

 

 

 

 

 
，欢迎各位认真读完文章的小伙伴们随时私信交流 
  
  
  
  
  
 、批评指正！

更多专栏订阅:

😀 【LeetCode题解（持续更新中）】 🚝 【Java Web项目构建过程】 💛 【数字图像处理】 ⚽ 【JavaScript随手笔记】 🤩 【大数据学习笔记（华为云）】 🦄 【程序错误解决方法（建议收藏）】 🚀 【软件安装教程】

订阅更多
 

 

 

 

 

 
，你们将会看到更多的优质内容！！