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 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
15天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
16天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
1天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
12 4
|
9天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
23天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
23天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
10 0
|
JavaScript 前端开发 Go
从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)——基础中的基础 概要:javascript的组成、 各个组成部分的作用 、 一、javascript的组成   javascript   ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.
1010 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0