JS前端自学深入必看!每天一个小知识:面试被问到空数组比较——[] == [] 真还是假?为什么?

当面试官问你 [] == [] 为假而 [] != [] 为真时,这实际上涉及到了JavaScript中的类型比较和内存管理的深刻问题。让我们更详细地探究这一现象,以便更好地理解JavaScript的工作原理。

JavaScript中的类型比较

JavaScript的比较操作符 ==!= 执行的是松散相等和不相等比较。这意味着在比较之前,它们会尝试将操作数转换为相同的类型。这种类型转换可能导致一些奇怪的行为。

例如:

js 复制代码
'hello' == true; // false,因为字符串不能直接转换为布尔值
'' == false; // true,因为空字符串被转换为布尔值 false

同样是字符串,因为类型转换问题,在使用'=='时,产生了一些奇怪的不一样的转换,所以在JS中如果我们要进行全等的比较我们一般使用了'==='。你已经了解了类型比较,那么我们开始比较一下数组。

空数组的创建

当你使用 [] 创建一个空数组时,JavaScript实际上为这个数组在内存中分配了一个位置,并将该位置的引用赋给你的变量。

js 复制代码
javascriptCopy code
let array1 = []
let array2 = []

当你认为类型比较你明白了,从外观上看,array1array2 都是空数组,它们应该是相等的,对吗?感觉好像认识上出现了偏差?

引用类型

然而,关键在于,JavaScript中的数组是引用类型。这意味着当你创建一个数组时,你实际上是在内存中分配了一个位置来存储这个数组的引用,而不是实际的数组内容。所以,array1array2 虽然内容相同,但它们指向不同的内存位置。哦!好像抓住了关键点!

比较引用

当你使用 == 比较两个对象或数组时,JavaScript会比较它们的引用,而不是它们的内容。因此,[] == [] 实际上是在比较两个不同的引用,所以返回 false

而当你使用 != 比较两个对象或数组时,JavaScript同样比较它们的引用,但结果取反。所以,[] != [] 返回 true

这下你就明白了,[] 确实 != [],因为他不是空钱包与空钱包的比较,而是你的钱包和我的钱包的比较,当然是不一样的。

如何正确比较数组内容

如果你想比较两个数组的内容而不是引用,你需要逐一比较它们的元素,或者使用深比较工具库,如 lodashisEqual 函数。这些方法允许你比较数组的实际内容,而不仅仅是它们的引用。

1.逐一比较

这是最基本的方法,其中你逐一比较数组中的每个元素,以确保它们具有相同的值。你可以使用循环或数组方法(如forEachmap等)来遍历数组并执行比较。这是一个示例:

js 复制代码
// 自定义函数,用于比较两个数组是否内容相同
function areArraysEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false; // 如果数组长度不同,直接返回 false
  }
  
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false; // 逐一比较元素,如果有不同的元素,返回 false
    }
  }
  
  return true; // 如果所有元素都相同,返回 true
}

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

if (areArraysEqual(array1, array2)) {
  console.log('Arrays are equal.');
} else {
  console.log('Arrays are not equal.');
}

2.深比较工具

如果你不想自己编写比较逻辑,可以使用深比较工具库,其中最知名的是 lodash 库的 isEqual 函数。这个函数能够比较两个数组的内容,包括多维数组和嵌套对象。这是一个示例:

js 复制代码
const _ = require('lodash'); // 导入 lodash 库

const array1 = [1, 2, [3, 4]];
const array2 = [1, 2, [3, 4]];

if (_.isEqual(array1, array2)) {
  console.log('Arrays are deeply equal.');
} else {
  console.log('Arrays are not deeply equal.');
}

isEqual 函数会递归比较数组的每个元素,以确保它们的内容相同。这对于处理复杂的数据结构非常有用。

使用深比较方法可以避免在比较数组内容时遇到引用类型的问题,因为它们会比较元素的实际值而不是引用。这种方法特别适用于需要比较复杂数据结构的情况。

总结

在JavaScript中,比较两个空数组的引用时,[] == [] 为假,[] != [] 为真,这是因为数组是引用类型,它们在内存中有不同的引用,所以它们进行了引用的比较,而很明显两个不同数字的引用不会相同。了解这个问题有助于我们能够更深入地理解JavaScript中的类型比较和引用类型的工作原理,以及如何正确比较数组内容,比如使用循环逐一比较和使用深比较工具来解决这个问题。当你在面试中遇到了这样的问题你就可以轻松地处理这类看似复杂的但是其实很简单的问题,同时展示你对JavaScript内部机制的理解。

那我们今天的小知识分享就结束了,如果可以请看到这的小伙伴给作者的辛苦点个小小的赞吧~~

想看更多→JS自学深入了解必看!每天一个小知识:有趣的JS作用域进阶------欺骗词法作用域

相关推荐
王中阳Go2 小时前
字节跳动的微服务独家面经
微服务·面试·golang
Jiaberrr2 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy2 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白2 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、3 小时前
Web Worker 简单使用
前端
web_learning_3213 小时前
信息收集常用指令
前端·搜索引擎
tabzzz3 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百3 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao3 小时前
自动化测试常用函数
前端·css·html5
码爸3 小时前
flink doris批量sink
java·前端·flink