一、JavaScript有几种类型的值?

Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增,表示独一无二的值),而引用数据类型统称为Object对象,主要包括对象、数组和函数。接下来我们分别看下两者的特点。

二、基本数据类型

1.值是不可变的

var name = 'java';
name.toUpperCase(); // 输出 'JAVA'
console.log(name); // 输出 'java'
复制代码

由此可得,基本数据类型的值是不可改变的

2.存放在栈区

原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。

3.值的比较

var a = 1;
var b = true;
console.log(a == b); // true
console.log(a === b); // false
复制代码

== : 只进行值的比较,会进行数据类型的转换。

=== : 不仅进行值得比较,还要进行数据类型的比较。

三、引用数据类型

1.值是可变的

var a={age:20};
a.age=21;
console.log(a.age)//21
复制代码

上面代码说明引用类型可以拥有属性和方法,并且是可以动态改变的。

2.同时保存在栈内存和堆内存

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

3.比较是引用的比较

当从一个变量向另一个变量赋引用类型的值时,同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。

var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true
复制代码

上面我们讲到基本类型和引用类型存储于内存的位置不同,引用类型存储在堆中的对象,与此同时,在栈中存储了指针,而这个指针指向正是堆中实体的起始位置。变量a初始化时,a指针指向对象{age:20}的地址,a赋值给b后,b又指向该对象{age:20}的地址,这两个变量指向了同一个对象。因此,改变其中任何一个变量,都会相互影响。

此时,如果取消某一个变量对于原对象的引用,不会影响到另一个变量。

var a={age:20};
var b=a;
a = 1;
b // {age:20}
复制代码

上面代码中,a和b指向同一个对象,然后a的值变为1,这时不会对b产生影响,b还是指向原来的那个对象。

四、检验数据类型

1.typeof

typeof返回一个表示数据类型的字符串,返回结果包括:number、boolean、string、symbol、object、undefined、function等7种数据类型,但不能判断null、array等

typeof Symbol(); // symbol 有效
typeof ''; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效
复制代码

数组和对象返回的都是object,这时就需要使用instanceof来判断

2.instanceof

instanceof 是用来判断A是否为B的实例,表达式为:A instanceof B,如果A是B的实例,则返回true,否则返回false。instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
复制代码

关于数组的类型判断,还可以用ES6新增Array.isArray()

Array.isArray([]); // true
复制代码

instanceof 三大弊端

  • 对于基本数据类型来说,字面量方式创建出来的结果和实例方式创建的是有一定的区别的
console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true
复制代码

从严格意义上来讲,只有实例创建出来的结果才是标准的对象数据类型值,也是标准的Number这个类的一个实例;对于字面量方式创建出来的结果是基本的数据类型值,不是严谨的实例,但是由于JS的松散特点,导致了可以使用Number.prototype上提供的方法。

  • 只要在当前实例的原型链上,我们用其检测出来的结果都是true。
  • 在类的原型继承中,我们最后检测出来的结果未必准确
var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object); // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true
复制代码
  • 不能检测null 和 undefined

对于特殊的数据类型null和undefined,他们的所属类是Null和Undefined,但是浏览器把这两个类保护起来了,不允许我们在外面访问使用

3.严格运算符===

只能用于判断null和undefined,因为这两种类型的值都是唯一的

var a = null
typeof a // "object"
a === null // true
复制代码

undefined 还可以用typeof来判断

var b = undefined;
typeof b === "undefined" // true
b === undefined // true
复制代码

4.constructor

constructor作用和instanceof非常相似。但constructor检测 Object与instanceof不一样,还可以处理基本数据类型的检测。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false
复制代码

constructor 两大弊端

  • null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
  • 函数的 constructor 是不稳定的,这个主要体现在把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor给覆盖了,这样检测出来的结果就是不准确的
function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array
复制代码

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

转载于:https://juejin.im/post/5bc9c929e51d450e4369bcca

JavaScript的检测及其数据类型相关推荐

  1. JavaScript——变量与基本数据类型

    前言 JavaScript中的变量为松散类型,所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值,就是不像SQL一样申明某个键值为int就只能保存整型数值,申明varchar只能保存字符串. ...

  2. JavaScript类型检测小结-http://bbs.51js.com/viewthread.php?tid=82661

    老话题了,各种方案和相关讨论都不少,简单总结下: 悠久的typeof JavaScript里只有五种基本数据类型:number, string, boolean, null, undefined. 其 ...

  3. JavaScript中的基本数据类型与引用数据类型

    JavaScript中的基本数据类型与引用数据类型 转载自:https://www.cnblogs.com/c2016c/articles/9328725.html 1.栈(stack)和堆(heap ...

  4. Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型

    目录 一.基本数据类型 (一)String类型 (二)Number类型 1.字面量 2.无穷大 3.非数值 (三)Boollean类型 (四)Undefined类型和Null类型 二.引用数据类型 ( ...

  5. JavaScript入门(part4)--简单数据类型

    学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 简单数据类型 数字型number 数字型范围 数字型三个特殊值 函数isNaN 字符串型string 布尔型 ...

  6. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  7. 什么才是正确的javascript数组检测方式

    什么才是正确的javascript数组检测方式 前面的话 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof ...

  8. 如何在JavaScript中检测用户的首选配色方案

    by Oskar Hane 由Oskar Hane 如何在JavaScript中检测用户的首选配色方案 (How to detect a user's preferred color scheme i ...

  9. 【JavaScript】检测数据类型函数

    //安全检测Js基本数据类型和内置对象function typeOf(o) {let _toString = Object.prototype.toString();let _type = {&quo ...

最新文章

  1. Java案例-用户注册邮箱绑定激活功能实现
  2. cookie读取中文时乱码
  3. GWT 2 Spring 3 JPA 2 Hibernate 3.5教程– Eclipse和Maven 2展示
  4. GAN生成对抗网络基本概念及基于mnist数据集的代码实现
  5. java 类型转换 安全_JAVA 类型转换指令
  6. iis设置导致python调用urllib.request.urlopen出错问题
  7. 信息学奥数一本通(1004:字符三角形)
  8. SQL Server2016 新功能之SQL安装篇
  9. java从入门到精通pdf第五版,满满干货指导
  10. python用turtle画一个苹果
  11. JAVA语言基础——基本语法
  12. 植物大战僵尸修改植物攻击力
  13. c语言 如何筛选小数点,怎样在表格里筛选有出整数与有小数点的数值
  14. 在Java开发环境中,输入某年某月某日,判断这一天是哪一年的第几天。
  15. 区块链 技术 基本概念
  16. 论文笔记:Intriguing properties of neural networks
  17. Hive基础之创建数据库
  18. zzuli303(奇葩26进制转换)
  19. 信息系统面临的安全威胁
  20. 哔咔漫画无响应,无法安装正确的应用

热门文章

  1. Python bytes 函数 - Python零基础入门教程
  2. Python 线程队列 LifoQueue – LIFO - Python零基础入门教程
  3. BugkuCTF-WEB题好像需要密码
  4. 重载函数编译后的新名字
  5. java监控rabbitMq服务状态,spring cloud 的监控turbine-rabbitmq的示例
  6. mysql varchar(20)_MySQL中采用类型varchar(20)和varchar(255)对性能上的影响
  7. python format格式化输出填充符号不起作用_Python格式化输出——format用法示例
  8. aes加密字符串c++_springboot2.2.X手册:防抓包?快速实现API接口数据加密
  9. c++ char* 改变长度重新赋值_[C/C++] 2 :分析下列代码有什么问题?
  10. 微型计算机硬盘接口主要分为,北京交通大学微机原理与接口技术_期末复习题_图文...