JavaScript随手笔记---对比数组差异

简介: JavaScript随手笔记---对比数组差异



一、方法一:数组拼接

  可以利用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));
  • 运行结果:


总结

  感谢观看,如果有帮助到你,请给文章点个赞和收藏,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

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


相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
59 0
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
49 1
|
2月前
|
JavaScript 前端开发 定位技术
Nuxt.js 和 Next.js 差异
Nuxt.js 和 Next.js 差异
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
48 2
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
43 3
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
57 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
53 1
|
3月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
34 0
|
3月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
42 0