一文带你了解JavaScript的数据类型

简介: 学习一门语言,当然要从数据类型开始。正确判断数据类型是我们写好程序的第一步。结合之前所学的一些知识,对数据类型进行了总结。

前言

学习一门语言,当然要从数据类型开始。正确判断数据类型是我们写好程序的第一步。

结合之前所学的一些知识,对数据类型进行了总结。

如有错误,还望指正。

分类

基本(值)类型

  • String:任意字符串
  • Number:任意的数字
  • boolean:true / false
  • undefined:undefined
  • null:null
  • bigInt:可以用任意精度表示整数
  • symbol:符号类型是唯一的并且是不可修改的,通常用来作为object的key

引用(对象)类型

  • Object:任意对象
  • Function:一种特别的对象(可以执行)
  • Array:一种特别的对象(数值下标,内部数据是有序的)

如何判断数据类型

三种方法:

  • typeof

    typeof返回数据类型的字符串表达

    注:可以判断undefined、数值、boolean、字符串,不能判断null与object object与array

  • instanceof

    判断对象的具体类型
  • ===

    注:可以判断undefined,null

判断基本类型

var a
console.log(a,typeof a,typeof a === 'undefined',a === undefined) // undefined 'undefined' true true
console.log(undefined === 'undefined') // false
var a
a = 3
console.log(typeof a === 'number') // true
a = 'Ned'
console.log(typeof a === 'string') // true
a = true
console.log(typeof a === 'boolean') // true 
a = null
console.log(typeof a, a=== null) // object

请注意:这里string,s一定要小写,否则会是false,这是因为人家已经设计好的,是固定的。

判断对象类型

var b1 = {
    b2: [a,'abc',console.log]
    b3: function (){
        console.log('b3')
    }
}

整体的 b1 是个对象,b2 是数组, b3 是函数。

console.log(b1 instanceof Object, b1 instanceof Array) // true false
console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true
console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true
标注一下 instance of 的用法

[实例] instanceof [类]

如果这个实例是类的实例,就返回true,反之返回false

也就是说,我们判断对象类型,要用instanceof。

另:判断function还可以用typeof

console.log(typeof b1.b3 === 'function' // true

不知道大家有没有注意,b2的第三个值我们写了个console.log,下面我们也来判断一下它,应该是个function的。

console.log(typeof b1.b2[2] === 'function') // true

所以我们要调用这个函数的时候可以直接b1.b2[2](),这里提醒大家,我们千万不要被b1.b2[2]所迷惑,我们要清楚它的数据类型到底是什么。

就此情况,我们上面b1中的b3改写一下。

var b1 = {
    b3: function (){
        console.log(b3)
        return function (){
            return 'Ned'
        }
    }
}

我们想要得到'Ned',应该怎么做?

只需要调用这个返回过来的函数即可:b1.b3()(),输出一下:

console.log(b1.b3()())

所以不要拘泥于表面现象,一定要看清楚得到的是什么类型的数据,才能进行下一步的操作!

补充

手写instanceof

想要手写,我们首要的就是要了解它的原理。

原理:验证当前类的原型prototype是否会出现在实例的原型链proto上,只要在它的原型链上,则结果都为true。因此,instanceof在查找的过程中会遍历左边变量的原型链,直到找到右边变量的prototype,找到返回true,找不到返回false。

function myinstanceOf(left,right){
    let proto = left.__proto__
    let prototype = right.prototype
    while(true){
        if(proto == null){
            return false
        }
        if(proto == prototype){
            return true
        }
        proto = proto.__proto__
    }
}

constructor(用于引用数据类型)

  • 语法: 被检测数据.constructor === class
  • 特点:

    • 适合使用在引用数据类型上
    • 原型链不会干扰
  • 原理:构造函数原型上有一个 constructor 属性指向构造函数自身的,如果在实例上使用 construtor 时,就会直接使用其构造函数原型的上的该属性,并指向其构造函数。

Object.prototype.toString.call()(对象原型链判断方法)

  • 语法:Object.prototype.toString.call(被检测数据)
  • 特点:适用于所有类型的判断检测
  • 原理:Object.prototype.toString 表示一个返回对象类型的字符串,call()方法可以改变this的指向,那么把Object.prototype.toString()方法指向不同的数据类型上面,返回不同的结果

补充,相关问题

undefined与null的区别?

  • undefined表示定义未赋值
  • null表示定义并赋值了,只是值为null
var a
console.log(a) // undefined
a = null
console.log(a) // null

什么时候给变量赋值为null呢?

  • 初始赋值,表明将要赋值为对象
  • 结束前,让对象成为垃圾对象,被回收掉。

不知道大家是否还记得,typeof 一个null的时候,返回的是什么?

var a = null
console.log(typeof a) // object

没错,是object。

所以当我们将一个变量的初始值赋值为null的时候,我们是向其他程序员表明,这个变量将会被赋值为对象。

不这么做行不行? 当然可以。

那为什么还要这么做?

当然是因为,编程也是很严谨的。

var b = null // 初始赋值为null,表明将要赋值为对象
b = ['Ned',20] // 确定对象就赋值
b = null // 最后,让b指向的对象成为垃圾对象(被垃圾回收器回收)

严格区别变量类型与数据类型

  • 数据的类型

    • 基本类型
    • 对象类型
  • 变量的类型(变量内存值的类型)

    • 基本类型:保存就是基本类型的数据
    • 引用类型:保存的是地址值

平时的时候我们不会去区分这个概念。

简单的了解到这个概念就行吧~。

相关文章
|
2月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
140 59
|
3月前
|
JavaScript
js基础数据类型
js基础数据类型
31 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
72 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
23 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
19 0
|
2月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
47 2
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章,主要介绍了基本数据类型和引用数据类型。
42 2
JavaScript基础知识-基本数据类型和引用数据类型
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
367 1
|
3月前
|
JavaScript 前端开发
JS常用数据类型转换(数字型和字符串型之间转换)
JS常用数据类型转换(数字型和字符串型之间转换)
62 2