JS面试题之如何判断两个数组的内容是否相等

更新时间：2023年10月27日 09:15:12 作者：前端技术栈

这篇文章主要为大家详细介绍了JavaScript面试的常考题,即如何判断两个数组的内容是否相等,文中的示例方法讲解详细,需要的小伙伴可以参考一下

题目

给定两个数组，判断两数组内容是否相等。

不使用排序
不考虑元素位置

例：

[1, 2, 3] 和 [1, 3, 2] // true
[1, 2, 3] 和 [1, 2, 4] // false

思考几秒：有了

1. 直接遍历

直接遍历第一个数组，并判断是否存在于在第二个数组中

求差集, 如果差集数组有长度，也说明两数组不等（个人感觉比上面的麻烦就不举例了）

const arr1 =  ["apple", "banana", 1]
const arr2 =  ["apple", 1, "banana"]
 
function fn(arr1, arr2) {
  // Arrary.some: 有一项不满足 返回false
  // Arrary.indexOf: 查到返回下标，查不到返回 -1
  if (arr1.length !== arr2.length) {
    return false;
  }
  return !arr1.some(item => arr2.indexOf(item)===-1)
}
 
fn(arr1,arr2) // true

细心的小伙伴就会发现：NaN 会有问题

const arr1 =  ["apple", "banana", NaN]
const arr2 =  ["apple", NaN, "banana"]
 
function fn(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return !arr1.some(item => arr2.indexOf(item)===-1)
}
 
fn(arr1,arr2) // false

Arrary.prototype.indexOf() 是使用的严格相等算法 => NaN值永远不相等
Array.prototype.includes() 是使用的零值相等算法 => NaN值视作相等

严格相等算法: 与 === 运算符使用的算法相同

零值相等不作为 JavaScript API 公开， -0和0 视作相等，NaN值视作相等，具体参考mdn文档:

使用includes

const arr1 =  ["apple", "banana", NaN]
const arr2 =  ["apple", NaN, "banana"]
 
function fn(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return !arr1.some(item => !arr2.includes(item))
}
 
fn(arr1,arr2) // true

使用includes 确实可以判断NaN了，如果数组元素有重复呢？

// 重复的元素都是banana
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "banana", "cherry"];
// 或者
// 一个重复的元素是banana， 一个是apple
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "apple", "cherry"];

由上可知：这种行不通，接下来看看是否能从给数组元素添加标识入手

2. 把重复元素标识编号

这个简单：数组元素重复转换成val1, val2

function areArraysContentEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  // 重复数组元素 加1、2、3
  const countArr1 = updateArray(arr1)
  const countArr2 = updateArray(arr2)
 
  /**
   * 
   * @param {*} arr 数组 元素重复 转换成val1, val2
   * @returns 
   */
  function updateArray(arr) {
    const countMap = new Map();
    const updatedArr = [];
 
    for (const item of arr) {
      if (!countMap.has(item)) {
        // 如果元素是第一次出现，直接添加到结果数组
        countMap.set(item, 0);
        updatedArr.push(item);
      } else {
        // 如果元素已经出现过，添加带有编号的新元素到结果数组
        const count = countMap.get(item) + 1;
        countMap.set(item, count);
        updatedArr.push(`${item}${count}`);
      }
    }
    return updatedArr;
  }
  const flag = countArr1.some(item => !countArr2.includes(item))
  return !flag
}
 
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "banana", "cherry"];
 
areArraysContentEqual(array1, array2) // true
 
// 其实这种存在漏洞的
const array3 = ["apple", "banana", "cherry", "banana", 1, '1', '1' ];
const array4 = ["banana", "apple", "banana", "cherry", '1', 1, 1];
// 应该是false
areArraysContentEqual(array3, array4) // true

因为把判断的转为了字符串 updatedArr.push(${item}${count}) 所以出问题了

3. 统计元素次数(最终方案)

function areArraysContentEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  // 创建计数对象，用于记录每个元素在数组中的出现次数
  const countMap1 = count(arr1)
  const countMap2 = count(arr2)
 
  // 统计数组中的元素出现次数
  function count(arr = []) {
    const resMap = new Map();
    for (const item of arr) {
      resMap.set(item, (resMap.get(item) || 0) + 1);
    }
    return resMap
  }
  // 检查计数对象是否相等
  for (const [key, count] of countMap1) {
    if (countMap2.get(key) !== count) {
      return false;
    }
  }
 
  return true;
}
 
const array1 = ["apple", "banana", "cherry", "banana", 1, '1', '11', 11];
const array2 = ["banana", "apple", "banana", "cherry", '1', 1, '11', 11];
 
areArraysContentEqual(array1, array2) // true

4. 评论区大佬方案（+1、-1）

只需要一个对象
遍历第一个数组就 +1
遍历第二个数组就 - 1
最后遍历对象，只要不是都是 0 就等于不匹配

这样就不需要俩个对象了，而且第二个遍历的时候如果找不到这个值的话也可以直接退出了

function areArraysContentEqual3(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  const countMap = new Map();
 
  // 计数第一个数组的元素
  for (const item of arr1) {
    countMap.set(item, (countMap.get(item) || 0) + 1);
  }
 
  // 比较第二个数组与计数
  for (const item of arr2) {
    const val = countMap.get(item);
    if (val === undefined || val <= 0) {
      return false;
    }
    countMap.set(item, val - 1);
  }
 
  return true;
}

5. 评论区大佬方案（操作第二个数组）

遍历第一个数组，在第二个数组找到就删除第二个数组中对应的元素，没有找到直接不等，最后再判断一下第二个数组的长度即可。实际使用中一般不直接操作原数组，浅复制一下就好

可能没有前几个性能好，但是想法还是很好的点赞~

function areArraysContentEqual2(arr1=[], arr2=[]) {
  arr2 = [...arr2]
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  arr1.some(item => {
    // 找到元素在第二个数组中的位置
    const index = arr2.findIndex(item1 => {
        // 这里有坑 下面会讲到
      if (isNaN(item) && isNaN(item1)) {
        return true
      }
      return item ===item1
    })
    if (index !== -1 ) {
      arr2.splice(index, 1)
    }
  })
  return !arr2.length
}

NaN 判断的时候，会有隐式转换（参数不是数字时会隐式转换）

Number.isNaN 判断才是严格相等

isNaN('11') // false
isNaN('ccc') // true
isNaN('a') // true
isNaN(NaN) // true
 
Number.isNaN('11') // false
Number.isNaN('ccc') // false
Number.isNaN('a') // false
Number.isNaN(NaN) // true

第五点（NaN判断问题修复）

function areArraysContentEqual(arr1=[], arr2=[]) {
  arr2 = [...arr2]
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  const compare = (item1, item2) => {
    if (Number.isNaN(item1) && Number.isNaN(item2)) {
      return true;
    }
    return item1 === item2;
  };
 
  arr1.some(item => {
    // 找到元素在第二个数组中的位置
    const index = arr2.findIndex(item1 => compare(item, item1))
    if (index !== -1 ) {
      arr2.splice(index, 1)
    }
  })
  return !arr2.length
}

注意事项

这个题需要注意：

1.先判断长度，长度不等必然不等

2.元素可重复

3.边界情况考虑

'1' 和 1 (Object的key是字符串， Map的key没有限制)
NaN
null undefined

到此这篇关于JS面试题之如何判断两个数组的内容是否相等的文章就介绍到这了,更多相关JS判断数组内容是否相等内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原生js实现一个放大镜效果超详细
这篇文章主要介绍了原生js实现一个放大镜效果超详细，文章围绕主题展开详细的内容，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
js中根据字数截取字符串，不能截断url
给一个文字，对输出的文字进行截取，保留400个字符,其中对url的保留比较麻烦，尤其是有两个相同url时不能采用indexOf获取其字符位置
2012-01-01
前端数组去重面试我会问这3个小问题
数组去重在我们的前端的面试过程中经过会遇到,有一些人可能会想到一两种,但是数据去重的算法真的太多了,下面这篇文章主要给大家介绍了关于前端数组去重面试3个小问题的相关资料,需要的朋友可以参考下
2023-01-01
微信小程序显示下拉列表功能【附源码下载】
这篇文章主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2017-12-12
JavaScript三元运算符的多种使用技巧
这篇文章主要介绍了JavaScript三元运算符的多种使用技巧,本文讲解了普通用法、稍微聪明点的用法、甚至更变态些的用法等,需要的朋友可以参考下
2015-04-04
第六篇Bootstrap表格样式介绍
这篇文章主要介绍了第六篇Bootstrap表格样式介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JavaScript 禁止用户保存图片的实现代码
这篇文章主要介绍了JavaScript 禁止用户保存图片的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
CocosCreator学习之模块化脚本
这篇文章主要介绍了Cocos Creator 模块化脚本，想加深学习CocosCreator脚本的同学，一定要看一下
2021-04-04
JS实现二叉查找树的建立以及一些遍历方法实现
本篇文章主要介绍了JS实现二叉查找树的建立以及一些遍历方法实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-04-04
使用Web Uploader实现多文件上传
这篇文章主要介绍了使用Web Uploader实现多文件上传的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06