JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法

简介: JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。

1. 基本数据类型

基本数据类型包括:stringnullundefinednumbersymbolboolean。这些类型的值具有以下特性:

  • 按值访问:基本数据类型直接存储值,因此通过变量访问时操作的是其实际值。
  • 不可变性:基本数据类型的值是不可变的,任何对它们的操作都会返回一个新值,而不会修改原值。
  • 值比较:基本数据类型在比较时直接比较它们的值。
  • 存储在栈内存中:栈内存(Stack)用于存储基本数据类型的值,栈是一种后进先出(LIFO)的数据结构,操作非常高效。

图示:
图片描述

示例代码:

let a = 10;
let b = a; // b 得到的是 a 的值的副本
a = 20;
console.log(b); // 10,不受 a 变化的影响

2. 引用数据类型

引用数据类型包括对象、数组、日期、正则表达式和函数等。它们的特性如下:

  • 按引用访问:引用数据类型通过引用来访问,意味着多个变量可以引用同一个对象,操作该对象时会影响所有引用它的变量。
  • 可变性:引用类型的值是可变的,对对象、数组等的修改会直接影响原引用。
  • 引用比较:在比较引用类型时,比较的是引用(即内存地址),而不是它们的内容。
  • 存储在堆内存中:堆内存(Heap)用于存储引用类型的对象。栈内存中只保存对象的引用地址,实际数据存储在堆内存中。

图示:
图片描述

示例代码:

let obj1 = {
    name: "Alice" };
let obj2 = obj1; // obj2 引用的是同一个对象
obj1.name = "Bob";
console.log(obj2.name); // Bob,obj1 和 obj2 都指向同一对象

3. 数据类型的检测

JavaScript 提供了两种常用的方式来检测变量的类型:typeofinstanceof

3.1 typeof 操作符

typeof 用于检测基本数据类型和函数的类型,但对于引用数据类型的结果不够准确。它的输出主要有以下几种情况:

  • typeof "hello" 返回 "string"
  • typeof 123 返回 "number"
  • typeof true 返回 "boolean"
  • typeof undefined 返回 "undefined"
  • typeof function() {} 返回 "function"
  • typeof null 返回 "object"(这是一个历史遗留问题)
  • typeof [] 返回 "object"
  • typeof {} 返回 "object"

示例代码:

console.log(typeof "hello"); // "string"
console.log(typeof []); // "object"
3.2 instanceof 操作符

instanceof 用于检测引用数据类型,可以判断某个对象是否是某个构造函数的实例。它通过检测对象的原型链,判断构造函数的 prototype 是否出现在对象的原型链上。

  • [] instanceof Array 返回 true
  • {} instanceof Object 返回 true
  • function() {} instanceof Function 返回 true

示例代码:

console.log([] instanceof Array); // true
console.log({
   } instanceof Object); // true
console.log(function() {
   } instanceof Function); // true

结语

理解 JavaScript 中的基本数据类型和引用数据类型及其区别,能够帮助开发者写出更高效的代码。通过 typeofinstanceof 操作符,开发者可以准确判断变量的类型,掌握 JavaScript 的内存模型和类型检测机制,有助于优化程序性能并避免常见的类型错误。

目录
相关文章
|
9月前
|
存储 JavaScript 前端开发
全网最全情景,深入浅出解析JavaScript数组去重:数值与引用类型的全面攻略
如果是基础类型数组,优先选择 Set。 对于引用类型数组,根据需求选择 Map 或 JSON.stringify()。 其余情况根据实际需求进行混合调用,就能更好的实现数组去重。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
340 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
735 62
|
9月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
265 3
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
226 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
291 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
224 1
JavaScript中的原型 保姆级文章一文搞懂