JavaScript 中如何比较变量的相等

JavaScript 中如何比较变量的相等

在程序开发过程中，比较两个变量是否相等是很常见的需求，在 JavaScript 中两种变量类型的比较是有所不同的，本文就一起来回顾一下在 JavaScript 如何比较两个变量是否相等。

先看下面的代码：

const article1 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const article2 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
console.log(article1 === article1); // true
console.log(article1 === article2); // false
console.log(article1 == article2); // false
console.log(Object.is(article1, article2)); // false
console.log(Object.is(article1, article1)); // true

从上面代码来看，即使两个变量键和值都一样的情况下，使用 == 或 === 返回的结果都是 false 。

在 JavaScript 中对于对象是否相等，需要判断以下两个条件：

  1. 对象拥有相同的实例
  2. 对象拥有相同的值

拥有相同的实例

在 JavaScript 中有对于不同类型的变量比较有所不同，如下：

  1. 对于原始类型（string 、number 、bigint 、boolean、null、undefined），通过它们的值进行比较。
  2. 对于引用类型（对象、数组、日期），通过它们的引用进行比较。

引用比较就是对引用类型变量的引用内存地址进行比较，看下面的实例代码：

const article1 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const article2 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const copyArticle = article1;
console.log(article2 === copyArticle); // false
console.log(copyArticle == article1); // true

从上面的代码来看，变量 copyArticle 和 article1 指向的是同一个内存地址，因此返回 true。

Object.is

Object.is 是一个静态方法，判断两个值是否为同一个值。Object.is 比较 2 个对象相等，比较规则如下：

  • 都是 undefined
  • 都是 null
  • 都是 true 或 false
  • 都是相同长度的字符串且相同字符按相同顺序排列
  • 都是相同对象（意味着每个对象有同一个引用）
  • 都是数字且
    • 都是 +0
    • 都是 -0
    • 都是 NaN
    • 或都是非零而且非 NaN 且为同一个值
const article1 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const article2 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const objectIs = (obj1, obj2) => Object.is(obj1, obj2);
console.log(objectIs(article1, article1)); // true
console.log(objectIs(undefined, undefined)); // true
console.log(objectIs(null, null)); // true
console.log(objectIs(-0, -0)); // true
console.log(objectIs(JSON.stringify(article1), JSON.stringify(article2))); // true

对于原始类型，判断是否拥有相同的实例，推荐使用 === 和 Object.is

拥有相同的值

要比较两个引用类型的值就没那么简单，如比较对象就要比较键和值都相等。引用类型的相等相对复杂一点，和深拷贝类似，也可以通过 JSON.stringify 转换为字符串进行比较，如下代码：

const a = {
    foo: "bar",
    bar: {
        baz: 2,
    },
    a() {
        console.log("fun");
    },
};
const b = {
    foo: "bar",
    bar: {
        baz: 2,
    },
    a() {
        console.log("fun");
    },
};
const article1 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const article2 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const objectIs = (obj1, obj2) => Object.is(obj1, obj2);

const isObject = (object) => object != null && typeof object === "object";
const isFunction = (fun) => typeof fun === "function";
const equalFuns = (fun1, fun2) => {
    return fun1.toString() === fun2.toString();
};
const jsonEqual = (obj1, obj2) =>
    objectIs(JSON.stringify(obj1), JSON.stringify(obj2));

const isEqual = (obj1, obj2) => {
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    if (keys1.length != keys2.length) {
        return false;
    }
    for (let index = 0; index < keys1.length; index++) {
        const val1 = obj1[keys1[index]];
        const val2 = obj2[keys2[index]];
        const areObjects = isObject(val1) && isObject(val2);
        const areFuns = isFunction(val1) && isFunction(val2);
        if (areFuns) {
            return equalFuns(val1, val2);
        } else {
            if (
                (areObjects && !isEqual(val1, val2)) ||
                (!areObjects && val1 !== val2)
            ) {
                return false;
            }
        }
    }

    return true;
};
console.log(jsonEqual(article1, article2)); // true
console.log(jsonEqual(a, b)); // true
console.log(isEqual(a, b)); // true
console.log(isEqual(article1, article2)); // true

当然也可以使用第三方库来实现，《分享8个可以提高开发效率的JavaScript库》中介绍的 Lodash 最实用的JavaScript库之一，拥有大量的函数特性集，像数组、对象、字符串、数字等类型的常见处理函数，语法上面通俗易懂 。

const _ = require("lodash");

const article1 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};
const article2 = {
    title: "JavaScript对象相等",
    summary: "一起来回顾一下如何比较两个对象相等",
};

console.log(_.isEqual(article1, article2)); // true

const arrayArticle1 = [
    {
        title: "JavaScript对象相等",
        summary: "一起来回顾一下如何比较两个对象相等",
    },
];
const arrayArticle2 = [
    {
        title: "JavaScript对象相等",
        summary: "一起来回顾一下如何比较两个对象相等",
    },
];
console.log(_.isEqual(arrayArticle1, arrayArticle2)); // true

总结

对于比较原始值，推荐使用 === 和 Object.js ，而对于引用类型的深度相等，简单的方式可以使用 JSON.stringify 转换为字符串再进行比较。

Object.is