JS面試題之如何判斷兩個數(shù)組的內(nèi)容是否相等

更新時間：2023年10月27日 09:15:12 作者：前端技術(shù)棧

這篇文章主要為大家詳細介紹了JavaScript面試的常考題,即如何判斷兩個數(shù)組的內(nèi)容是否相等,文中的示例方法講解詳細,需要的小伙伴可以參考一下

題目

給定兩個數(shù)組，判斷兩數(shù)組內(nèi)容是否相等。

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

例：

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

思考幾秒：有了

1. 直接遍歷

直接遍歷第一個數(shù)組，并判斷是否存在于在第二個數(shù)組中

求差集, 如果差集數(shù)組有長度，也說明兩數(shù)組不等（個人感覺比上面的麻煩就不舉例了）

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

細心的小伙伴就會發(fā)現(xiàn)：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了，如果數(shù)組元素有重復呢？

// 重復的元素都是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"];

由上可知：這種行不通，接下來看看是否能從給數(shù)組元素添加標識入手

2. 把重復元素標識編號

這個簡單：數(shù)組元素重復轉(zhuǎn)換成val1, val2

function areArraysContentEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  // 重復數(shù)組元素 加1、2、3
  const countArr1 = updateArray(arr1)
  const countArr2 = updateArray(arr2)
 
  /**
   * 
   * @param {*} arr 數(shù)組 元素重復 轉(zhuǎn)換成val1, val2
   * @returns 
   */
  function updateArray(arr) {
    const countMap = new Map();
    const updatedArr = [];
 
    for (const item of arr) {
      if (!countMap.has(item)) {
        // 如果元素是第一次出現(xiàn)，直接添加到結(jié)果數(shù)組
        countMap.set(item, 0);
        updatedArr.push(item);
      } else {
        // 如果元素已經(jīng)出現(xiàn)過，添加帶有編號的新元素到結(jié)果數(shù)組
        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

因為把判斷的轉(zhuǎn)為了字符串 updatedArr.push(${item}${count}) 所以出問題了

3. 統(tǒng)計元素次數(shù)(最終方案)

function areArraysContentEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  // 創(chuàng)建計數(shù)對象，用于記錄每個元素在數(shù)組中的出現(xiàn)次數(shù)
  const countMap1 = count(arr1)
  const countMap2 = count(arr2)
 
  // 統(tǒng)計數(shù)組中的元素出現(xiàn)次數(shù)
  function count(arr = []) {
    const resMap = new Map();
    for (const item of arr) {
      resMap.set(item, (resMap.get(item) || 0) + 1);
    }
    return resMap
  }
  // 檢查計數(shù)對象是否相等
  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. 評論區(qū)大佬方案（+1、-1）

只需要一個對象
遍歷第一個數(shù)組就 +1
遍歷第二個數(shù)組就 - 1
最后遍歷對象，只要不是都是 0 就等于不匹配

這樣就不需要倆個對象了，而且第二個遍歷的時候如果找不到這個值的話也可以直接退出了

function areArraysContentEqual3(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  const countMap = new Map();
 
  // 計數(shù)第一個數(shù)組的元素
  for (const item of arr1) {
    countMap.set(item, (countMap.get(item) || 0) + 1);
  }
 
  // 比較第二個數(shù)組與計數(shù)
  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. 評論區(qū)大佬方案（操作第二個數(shù)組）

遍歷第一個數(shù)組，在第二個數(shù)組找到就刪除第二個數(shù)組中對應的元素，沒有找到直接不等，最后再判斷一下第二個數(shù)組的長度即可。實際使用中一般不直接操作原數(shù)組，淺復制一下就好

可能沒有前幾個性能好，但是想法還是很好的點贊~

function areArraysContentEqual2(arr1=[], arr2=[]) {
  arr2 = [...arr2]
  if (arr1.length !== arr2.length) {
    return false;
  }
 
  arr1.some(item => {
    // 找到元素在第二個數(shù)組中的位置
    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 判斷的時候，會有隱式轉(zhuǎn)換（參數(shù)不是數(shù)字時會隱式轉(zhuǎn)換）

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 => {
    // 找到元素在第二個數(shù)組中的位置
    const index = arr2.findIndex(item1 => compare(item, item1))
    if (index !== -1 ) {
      arr2.splice(index, 1)
    }
  })
  return !arr2.length
}

注意事項

這個題需要注意：

1.先判斷長度，長度不等必然不等

2.元素可重復

3.邊界情況考慮