详谈JS中的数据类型

2024-02-08 17:15:22

一.js中的数据类型

首先,js的数据类型分为以下两种,基本数据类型和引用数据类型.

基本数据类型(又称为简单数据类型)

number:NaN infinity

string:正常字符串/模板字符串

Boolean: true或false

null:空

undefined:未定义

symbol:唯一值(es6新增)bigInt:大数字(es10新增)

引用数据类型(又称复杂数据类型)

在js中,object是一个基类

object

Array

function

RegExp

Date

symbol的解释

//对symbol的解释代表的是唯一值
//简单来说:放声明的同一个变量,再次被赋值的时候,数据会被迭代,这时候就是用到了symbol

console.log('111' === '111') //true
console.log(Symbol('111') === Symbol('111')); //false
//举例
let obj={
age:11,
symbol(age):12
}

二.检验数据类型的方法

1.typeof

基本数据类型中的number string boolean undefined以及引用数据类型中的function,可以使用typeof检验数据类型,分别返回对应的数据类型的小写字符

注意:基本数据类型中的null,引用数据类型中的Array Object Date RegExp不可以使用typeof检测,都会返回小写的object

   //验证简单数据类型,返回值是 类型所对应的 小写字母
    console.log(typeof false); //boolean
    console.log(typeof 100);   //number
    console.log(typeof 'String'); //string
    console.log(typeof undefined); //undefined
    //
    //验证复杂数据的类型
    console.log(typeof {}); //object
    console.log(typeof null);  //打印出的是 object
    console.log(typeof function () { }); //function

提出问题:为什么使用typeof检测null是返回的是object?

浏览器是使用c++语言写的,电脑本身是机器语言,所有的数据类型在计算机中都以二进制方式存储的; typeof只判断二进制的前三位
整数:1
字符串:100
布尔值:110
对象:000
null:00000
undefined:-2^30

2.instanceof

使用此方法检测数据类型的话,需要知道要检测的数据属于哪种数据类型;

返回的值为布尔值;常被用来检测数组类型的数据;

 console.log([1, 2, 3, 4] instanceof Array);  //true

 console.log({ name: '浏览' } instanceof Object);//true

注意:若用于判断传来的数据时数组还是对象的话,代码如下

eg:

数据.instanceof Object //无论数据时数组还是对象,返回值都为true;毕竟 ''万物皆对象嘛''

所以应写为

数据.instanceof Array?[]:{};

3.constructor

constructor是prototype对象上的属性,指向构造函数,根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法时,就去原型链上寻找,因此,实例对象也是能使用constructor属性的.

要判断的数据类型的变量.constructor 返回值是一个构造函数

注意:undefined和null没有constructor属性

用法如下:

let func = function () { console.log(111); }

console.log(func.constructor == Function);  //打印的是true

4.Object.prototype.toString.call()

在平常的使用中,使用此法可以判断任意的数据类型,返回值为[Object 对应的数据类型]

console.log(Object.prototype.toString.call(123)); //[object Number]

console.log(Object.prototype.toString.call('fre')); //[object String]

要想只拿到对应的数据类型,可以采用以下方式

Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1')

或

Object.prototype.toString.call(obj).replace(/\[object ([a-zA-Z]{0,})\]/, '$1')

注意:

1.正则不能加'',否则不起效果,仍为[object 对应的数据类型]

2.object与()之间要有空格

5.Jquery.type()

作为简单的了解,使用此方法检测undefined和null时,返回的是相应的'undefined'和'null'

console.log(Jquery.type('string')) //返回的是string

三.基本数据类型和引用数据类型的区别

基本数据类型是原始值,直接存储在栈内存中

引用数据类型,它的值在堆内存中开辟了一块新的内存空间,我们通过变量来复制一个引用数据类型的时候,其实就是把这个开辟的空间的地址进行了一个赋值

运行机制== 堆栈内存

堆内存 Heap 用来存放数据

栈内存 Stack 用来执行数据

执行上下文 Execution Context Stack

当浏览器开始加载页面时,首先会分配一块内存,用来指向代码,这一块是栈内存

成员访问

在一个对象中使用点的形式去读取某一个属性的值,这种操作方法叫做成员访问

注意:成员访问要高于声明变量

正常代码  从右向左执行; 但成员访问的优先级最高
a.x=a=12
执行顺序
a.x=12
a=12

举个例子来说明

四.手动封装一个检测数据类型的方法

let objs = {
            name: 'kdowk',
            age: 15
        }
        //1.借用typeof进行分装
        function isObject(obj) {
            let type = typeof obj  //判断传来的数据的类型

            if (type !== "object") {  //不是object的即是简单数据类型的直接进行判断
                return type
            } else {
                return Object.prototype.toString.call(obj).replace(/\[object ([a-zA-Z]{0,})\]/, '$1')
            }

        }
        Object.isObject = isObject
        console.log(Object.isObject(objs));//对象
        console.log(Object.isObject(111));//数字
        console.log(Object.isObject("objs")); //字符串
        console.log(Object.isObject(function () { })); //函数

码农公寓

一.js中的数据类型

二.检验数据类型的方法

三.基本数据类型和引用数据类型的区别

四.手动封装一个检测数据类型的方法

相关文章