JavaScript数据类型区别及检测方法

 更新时间:2024年04月17日 11:32:12   作者:Br不二  
在JavaScript中,数据类型是编程中非常重要的概念,它决定了数据的性质、如何存储以及如何操作这些数据,本文介绍JavaScript数据类型区别及检测方法,感兴趣的朋友一起看看吧

在JavaScript中,数据类型是编程中非常重要的概念,它决定了数据的性质、如何存储以及如何操作这些数据。以下是JavaScript中的主要数据类型、它们的区别以及数据类型检测的方式的详细介绍。

JavaScript的主要数据类型

1. 原始数据类型(Primitive Types) Number: 表示数字,包括整数和浮点数。

let num = 42; // 整数
let floatNum = 3.14; // 浮点数

String: 表示文本或字符序列。

let str = "Hello, world!";

Boolean: 表示逻辑值,只有两个值:truefalse

let isTrue = true;
let isFalse = false;

Null: 表示一个空的值或没有对象。它是 null 值的唯一实例。

let nullValue = null;

Undefined: 当变量声明了但没有赋值时,它的值就是 undefined

let undefinedVar;
console.log(undefinedVar); // 输出: undefined

Symbol: 唯一且不可变的数据类型,常用于对象属性的键。

let sym = Symbol('mySymbol');

2. 对象数据类型(Object Types) Object: 用于存储键值对的集合。

let obj = {
  key1: 'value1',
  key2: 'value2'
};

Array: 有序的元素集合。

let arr = [1, 2, 3, 'four', true];

Function: 可执行的代码块,也是对象的一种。

function myFunction() {
  console.log('Hello from a function!');
}

其他内置对象:如 DateRegExpError 等,以及自定义的对象。

数据类型的区别

  • 原始数据类型:这些类型的数据直接存储在变量位置的内存里,它们在赋值时会创建副本。
  • 对象数据类型:对象类型的值实际上是对堆内存中对象位置的引用,它们在赋值时只是复制了引用地址。

数据类型检测的方式

1. 使用 typeof 操作符

console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object" (注意,这是一个常见的误解)
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol('sym')); // "symbol"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (数组也是对象)
console.log(typeof function() {}); // "function"

2. 使用 instanceof 操作符

主要用于检测对象是否属于某个构造函数的实例。

let arr = [];
console.log(arr instanceof Array); // true
let date = new Date();
console.log(date instanceof Date); // true
function MyObject() {}
let obj = new MyObject();
console.log(obj instanceof MyObject); // true

3. 使用 constructor 属性

可以通过检查对象的 constructor 属性来确定其构造函数。

let num = 42;
console.log(num.constructor === Number); // true
let str = "hello";
console.log(str.constructor === String); // true
let arr = [];
console.log(arr.constructor === Array); // true

注意constructor 属性可以被修改,因此不总是可靠的检测方式。

4. 使用 Object.prototype.toString.call()

这是检测数据类型最可靠的方式之一,因为它返回的是对象的内部类。

let num = 42;
console.log(Object.prototype.toString.call(num)); // "[object Number]"
let str = "hello";
console.log(Object.prototype.toString.call(str)); // "[object String]"
let arr = [];
console.log(Object.prototype.toString.call(arr)); // "[object Array]"
let obj = {};
console.log(Object.prototype.toString.call(obj)); // "[object Object]"
let date = new Date();
console.log(Object.prototype.toString.call(date)); // "[object Date]"
let nullValue = null; 
console.log(Object.prototype.toString.call(nullValue)); // "[object Null]"
let undefinedVar; 
console.log(Object.prototype.toString.call(undefinedVar)); // "[object Undefined]"
let sym = Symbol('mySymbol'); 
console.log(Object.prototype.toString.call(sym)); // "[object Symbol]"
let func = function() {}; 
console.log(Object.prototype.toString.call(func)); // "[object Function]"

Object.prototype.toString.call() 方法可以非常准确地确定一个变量的类型,因为它不依赖于变量自身的 toString 方法,这个方法可以被重写,而 Object.prototype.toString 是无法被对象自身修改的。

注意事项

  • typeof null 会返回 "object",这是一个历史上的错误,但在JavaScript中一直保留了下来。
  • 数组和 null 使用 instanceof 会返回 false,因为 instanceof 是用来检测一个对象是否是一个构造函数的 prototype 属性指向的原型链上的实例。
  • 当使用 constructor 属性时,需要注意它可能已经被更改,因此它可能不是一个可靠的类型检测方式。

到此这篇关于JavaScript数据类型 以及检测方法的文章就介绍到这了,更多相关JavaScript数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 你可能从未使用过的11+个JavaScript特性(小结)

    你可能从未使用过的11+个JavaScript特性(小结)

    这篇文章主要介绍了你可能从未使用过的11+个JavaScript特性(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • javascript 7行代码画出一个围棋棋盘

    javascript 7行代码画出一个围棋棋盘

    javascript 只有7行代码即可画出围棋棋盘的实现代码。大家可以看看。
    2009-07-07
  • JS实现长图上下滚动效果

    JS实现长图上下滚动效果

    这篇文章主要为大家详细介绍了JS实现长图上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • bootstrap与pagehelper实现分页效果

    bootstrap与pagehelper实现分页效果

    这篇文章主要为大家详细介绍了bootstrap与pagehelper实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 发现的以前不知道的函数

    发现的以前不知道的函数

    发现的以前不知道的函数...
    2006-09-09
  • 移动端日期插件Mobiscroll.js使用详解

    移动端日期插件Mobiscroll.js使用详解

    这篇文章主要为大家详细介绍了移动端日期插件Mobiscroll.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS建造者模式基本用法实例分析

    JS建造者模式基本用法实例分析

    这篇文章主要介绍了JS建造者模式基本用法,以一个完整实例形式较为详细的分析了javascript建造者模式的实现方法,需要的朋友可以参考下
    2015-06-06
  • JS获取页面input控件中所有text控件并追加样式属性

    JS获取页面input控件中所有text控件并追加样式属性

    使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式,由于其他方式比较麻烦所以就想通过在页面加载的时候将要改动的text找到并添加属性,感兴趣的你可以参考下,希望可以帮助到你
    2013-02-02
  • JavaScript实现MD5加密的六种方式实例

    JavaScript实现MD5加密的六种方式实例

    这篇文章主要给大家介绍了关于JavaScript实现MD5加密的六种方式,在JS中可以实现MD5加密算法,可以使用第三方库或者自己编写代码实现,需要的朋友可以参考下
    2023-09-09
  • 详解JavaScript执行模型

    详解JavaScript执行模型

    这篇文章主要介绍了JavaScript执行模型的相关资料。帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11

最新评论