Js判斷兩個(gè)數(shù)組是否相等的幾種常見場(chǎng)景

更新時(shí)間：2024年07月09日 10:38:00 作者：英子的搬磚日志

無論是在開發(fā)中還是面試時(shí),在js中判斷變量是否相等,都是一個(gè)比較常見的問題,這篇文章主要給大家介紹了關(guān)于Js判斷兩個(gè)數(shù)組是否相等的幾種常見場(chǎng)景,需要的朋友可以參考下

前言

日常開發(fā)，時(shí)不時(shí)會(huì)遇到需要判定2個(gè)數(shù)組是否相等的情況，需要實(shí)現(xiàn)考慮的場(chǎng)景有：

先判斷長(zhǎng)度，長(zhǎng)度不等必然不等
元素位置
其他情況考慮
- '1' 和 1 (Object的key是字符串， Map的key沒有限制)
- NaN
- null 和 undefined

1、通過數(shù)組自帶方法比較

// 方式1
function isArrEqual1(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return arr1.every((v, i) => v === arr2[i]);
  // return !arr1.some((v, i) => v !== arr2[i]);
  // return arr1.filter((v, i) => v !== arr2[i]).length === 0;
  // return arr1.findIndex((v, i) => v !== arr2[i]) === -1;
}

// 測(cè)試
const arr1 = [-2, "-1", 0, 0.1, 1, "2", "a", "", undefined, null],
  arr2 = [-2, "-1", 0, 0.1, 1, "2", "a", "", undefined, null];

isArrEqual1(arr1, arr2); // true

數(shù)組自帶的方法，比較適合的有：every、some、filter、findIndex。

這種方式嚴(yán)格限制了數(shù)組元素長(zhǎng)度、類型、位置必須一致。

注意包含NaN也無法比較！NaN是JS中唯一一個(gè)與自身不相等的存在！判斷NaN是否屬于同一個(gè)值得用Object.is()，如：Object.is(NaN, NaN); // true

2、通過循環(huán)判斷

// 方式2
function isArrEqual2(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  }
  return true;
}

這種判定方法限制及說明同上述方法1。

3、toString()

// 方式3
function isArrEqual3(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return arr1.toString() === arr2.toString();
}

// 測(cè)試
isArrEqual3(arr1, arr2); // true

const arr3 = ['', 1, null, undefined, {}, { a: 1 }, NaN, [], [2, 3], new Date()],
  arr4 = ['', "1", undefined, null, {}, { a: 2 }, NaN, [], [2, "3"], new Date()];

isArrEqual3(arr3, arr4); // true

toString 方法是Object類型對(duì)象的實(shí)例方法，作用是返回一個(gè)對(duì)象的字符串形式。

這種方式限制了數(shù)組長(zhǎng)度和元素位置，但是會(huì)發(fā)現(xiàn)有些元素類型沒有嚴(yán)格限制，這是由于js本身進(jìn)行的數(shù)據(jù)隱式轉(zhuǎn)換！

在控制臺(tái)查看通過toString轉(zhuǎn)化后的數(shù)組，得到的結(jié)果如下：

此外，對(duì)數(shù)組、空數(shù)組、對(duì)象、空對(duì)象等引用類型，由于toString轉(zhuǎn)換結(jié)果都是[object Object]，所以在比較的時(shí)候都會(huì)判定為相等！

還有，需要注意：

null == undefined // true
null === undefined // false

4、join()

// 方式4
function isArrEqual4(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return arr1.join() === arr2.join();
}

join 方法是數(shù)組的一個(gè)實(shí)例方法，如果join這個(gè)方法如果不傳如分割符，其實(shí)作用幾乎和toString一樣，所以實(shí)現(xiàn)效果和限制同toString。

5、JSON.stringify()

// 方式5 [推薦]
function isArrEqual5(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return JSON.stringify(arr1) === JSON.stringify(arr2);
}

// 測(cè)試
isArrEqual5(arr1, arr2); // true
isArrEqual5(arr3, arr4); // false

const arr5 = [undefined, null, "", {}, { a: 1 }, NaN, [], [2, 3], new Date()],
  arr6 = [undefined, null, "", {}, { a: 1 }, NaN, [], [2, 3], new Date()];

isArrEqual5(arr5, arr6); // true

JSON.stringify 用于將一個(gè)對(duì)象或值轉(zhuǎn)換成JSON字符串，轉(zhuǎn)換后結(jié)果會(huì)帶雙引號(hào)。