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


总结

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

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

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


相关文章
|
9天前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
1天前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
11 3
|
18天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
17天前
|
JavaScript 前端开发 索引
|
6天前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
6天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
8天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
8天前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
|
JavaScript 前端开发
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
78 2
下一篇
无影云桌面