JavaScript 中如何比较数组

在 JavaScript 编程里，经常会面临比较两个数组是否相同的需求。要实现这一需求，就要依据数组的特征（如是否嵌套、元素类型等）来选用合适的比较方法。

简单数组的比较

• 基本思路：比较数组长度，逐个元素比较。

function arraysEqual(a, b) {
    if (a === b) return true; 
    if (a == null || b == null) return false; 
    if (a.length!== b.length) return false; 

    for (let i = 0; i < a.length; ++i) {
        if (a[i]!== b[i]) return false;
    }
    return true;
}

嵌套数组的递归比较

• 基本思路：在简单比较的基础上，如果元素是数组，则递归调用比较函数。

function arrayDeepEqual(a, b) {
    if (a === b) return true; 
    if (a == null || b == null) return false; 
    if (a.length!== b.length) return false; 

    for (let i = 0; i < a.length; ++i) {
        if (Array.isArray(a[i]) && Array.isArray(b[i])) {
            if (!arrayDeepEqual(a[i], b[i])) return false;
        } else if (a[i]!== b[i]) {
            return false;
        }
    }
    return true;
}

使用 JSON.stringify 进行比较

• 基本思路：将数组转换为字符串再比较。

function arraysEqualByStringify(a, b) {
    return JSON.stringify(a) === JSON.stringify(b);
}

最佳实践

• 对于简单的、无嵌套的基本类型数组，使用简单的循环逐个元素比较。
• 对于嵌套数组，使用递归比较方法。
• 如果数组元素顺序不重要且元素为简单类型，可对数组排序后使用 JSON.stringify 进行比较。

常见问题

• JSON.stringify 的缺陷：该方法要求元素顺序相同，且对函数、Symbol、undefined 等特殊类型处理有问题。如：

const arr1 = [1, () => {}];
const arr2 = [1, () => {}];
console.log(arraysEqualByStringify(arr1, arr2)); // 由于函数不能正确序列化，可能得到非预期结果

• == 比较的陷阱：用 == 或 === 直接比较数组时，比较的是数组引用而非内容。

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false