写点什么

JavaScript 中如何比较变量的相等

用户头像
devpoint
关注
发布于: 2 小时前
JavaScript  中如何比较变量的相等

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


先看下面的代码:


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


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


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


  1. 对象拥有相同的实例

  2. 对象拥有相同的值

拥有相同的实例

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


  1. 对于原始类型(stringnumberbigintbooleannullundefined),通过它们的值进行比较。

  2. 对于引用类型(对象、数组、日期),通过它们的引用进行比较。


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


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


从上面的代码来看,变量 copyArticlearticle1 指向的是同一个内存地址,因此返回 true

Object.is

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


  • 都是 undefined

  • 都是 null

  • 都是 truefalse

  • 都是相同长度的字符串且相同字符按相同顺序排列

  • 都是相同对象(意味着每个对象有同一个引用)

  • 都是数字且

  • 都是 +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)); // trueconsole.log(objectIs(undefined, undefined)); // trueconsole.log(objectIs(null, null)); // trueconsole.log(objectIs(-0, -0)); // trueconsole.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)); // trueconsole.log(jsonEqual(a, b)); // trueconsole.log(isEqual(a, b)); // trueconsole.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 转换为字符串再进行比较。

发布于: 2 小时前阅读数: 4
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
JavaScript  中如何比较变量的相等