2019独角兽企业重金招聘Python工程师标准>>>

字数:1871

阅读时间:5分钟

引自MDN:

最新的 ECMAScript 标准定义了 7 种数据类型:

  • 6 种原始类型:

    • Boolean
    • Null
    • Undefined
    • Number
    • String
    • Symbol (ECMAScript 6 新定义)
  • 和 Object

至今,JS中共上述7种数据类型。这里需要注意,不要将js的内置对象:Date、Array等与数据类型混淆了,这些内置对象和我们自己创建的对象统一属于Object类型。

6中原始类型的值都无法改变。举个栗子,数值1,我们是无法将他改变成2的;字符串的变化实质上也是产生了一个新的字符串,旧的字符串仍然不变。由于这种特性,js会将其存至栈中,按值访问。而引用类型Object内容是可变的,而且大小不固定,所以将它存入堆中,通过地址引用的方式调用。

Boolean类型:表示逻辑,取值truefalse

Number类型:表示数字,和其他语言不同,js只有一种数字类型,是基于IEEE 754标准的双精度64位的值,取值范围(-2^63 - 1 至 2^63 - 1)。此外还有一些特殊标识符:Infinity、-Infinity、NaN。

String类型:表示字符串,由字符(2个字节)组成的一组数据,因此它也具有数组的可遍历、拥有长度属性等特性。

Symbol类型:表示符号类型,ES6新增的数据类型,表示一个唯一值,一般作为对象的key值或者枚举之用,非常适合消除魔法字符串。

Null类型:表示空值,可以理解为一个尚未创建的对象。它虽然是空值,但是却是一个对象,而且Object对象是继承自它,所以它可以说才是真正的对象始祖。

注意:虽然null是一个对象,但是其中的属性都是不可访问的,因此,我们是无法通过代码获取它的属性的。

Undefined类型:表示未定义,一个没有定义的变量或者没有赋予初始值的对象的值就是undefined。这里不要与Null混淆,它不是一个对象。

null === undefined;   //false
null == undefined;    //true
null === null;   //true
undefined == undefined;   //true

Object类型:表示对象。在计算机科学中, 对象是指内存中的可以被标识符引用的一块区域。在JS中,对象可以被看做是一组属性的集合。JS中以ObjectFunction两个对象为基础,衍生出了现在百花齐放的各种对象,JS的继承、原型等都在这个基础上实现的。


类型判断

由于js弱类型的机制,变量的类型需要我们自己判断。江湖上出现了各种判断方法,下面我们来总结一下。

1.typeof

MDN上推荐的方法。

    let str = 'string';let pNum = 11;let bRt = true;let pSymbol = Symbol('symbol');let pObj = {};let pArray = [];let fun = function () {};//typeofconsole.log('字符串', typeof str); //stringconsole.log('数字', typeof pNum); //numberconsole.log('布尔', typeof bRt); //booleanconsole.log('符号', typeof pSymbol); //symbolconsole.log('null', typeof null); //objectconsole.log('undefined', typeof undefined); //undefinedconsole.log('对象', typeof pObj); //objectconsole.log('数组', typeof pArray); //objectconsole.log('函数', typeof fun); //function

如上执行结果,对于原始类型(除了null以外),输出结果没问题。但是对于引用类型,输出结果只会是objectfunction,这并非我们预期的结果。

typeof输出的结果包含以下7种:number、boolean、string、symbol、undefined、object、function。

2.instanceof

这种方式只能判断拥有原型的对象,并且只能判断比较的两个对象之间是否属于实例关系(包括继承),不能获取类型。

    console.log('对象', pObj instanceof Object); //trueconsole.log('数组是否数组', pArray instanceof Array); //trueconsole.log('数组是否对象', pArray instanceof Object); //trueconsole.log('函数是否函数', fun instanceof Function); //trueconsole.log('函数是否对象', fun instanceof Object); //true

需要注意,它会去原型链上去寻找匹配项,例如:pArray instanceof Object结果也是true。该方法用作判断变量是否是某个类的实例非常有效。但是需要注意,这里的比对默认都是在同一个全局环境下比对的。也就是说,在同一个frame下,我们才能得到正确结果。如果在frame1下去判断一个变量是否属于frame2的Object,只会得到false结果。

3.constructor或__proto__

    console.log('construct');console.log('字符串', str.construct === String.construct); //true// console.log('数字', typeof pNum); //数字没有constructconsole.log('布尔', bRt.construct === Boolean.construct); //true// console.log('符号', typeof pSymbol); //symbol没有construct// console.log('null', typeof null); //null无法访问construct属性// console.log('undefined', typeof undefined); //undefined无法访问construct属性console.log('对象', pObj.construct === Object.construct); //trueconsole.log('数组', pArray.construct === Array.construct); //trueconsole.log('函数', fun.construct === Function.construct); //trueconsole.log('__proto__');console.log('字符串', str.__proto__ === String.prototype); //true// console.log('数字', typeof pNum); //数字没有prototypeconsole.log('布尔', bRt.__proto__ === Boolean.prototype); //true// console.log('符号', typeof pSymbol); //symbol没有prototype// console.log('null', typeof null); //null无法访问prototype属性// console.log('undefined', typeof undefined); //undefined无法访问prototype属性console.log('对象', pObj.__proto__ === Object.prototype); //trueconsole.log('数组', pArray.__proto__ === Array.prototype); //trueconsole.log('函数', fun.__proto__ === Function.prototype); //true

原理同2,只是不会再去原型链上查找了,这里固定只对比当前对象的实例。

4.toString

    console.log('字符串', Object.prototype.toString.call(str)); //[object String]console.log('数字', Object.prototype.toString.call(pNum)); //[object Number]console.log('布尔', Object.prototype.toString.call(bRt)); //[object Boolean]console.log('符号', Object.prototype.toString.call(pSymbol)); //[object Symbol]console.log('null', Object.prototype.toString.call(null)); //[object Null]console.log('undefined', Object.prototype.toString.call(undefined)); //[object Undefined]console.log('对象', Object.prototype.toString.call(pObj)); //[object Object]console.log('数组', Object.prototype.toString.call(pArray)); //[object Array]console.log('函数', Object.prototype.toString.call(fun)); //[object Function]console.log('日期', Object.prototype.toString.call(new Date())); //[object Date]console.log('window', Object.prototype.toString.call(window)); //[object HTMLDocument]console.log('document', Object.prototype.toString.call(document)); //[object global]

Object中定义的toString方法,返回的是当前对象的内部属性[[Class]],结果格式为[object Xxx],其中Xxx就是我们判断数据类型的依据,也是内置对象的字符串。

看一下优秀的框架是怎么做的

JQuery

function toType( obj ) {if ( obj == null ) {return obj + "";}// Support: Android <=2.3 only (functionish RegExp)return typeof obj === "object" || typeof obj === "function" ?class2type[ toString.call( obj ) ] || "object" :typeof obj;
}

原始类型使用typeof,引用类型使用toString。

AngularJs

function isNumber(value) {return typeof value === 'number';}
function isDate(value) {return toString.call(value) === '[object Date]';
}

也是一样,原始类型使用typeof,引用类型使用toString。

这里其实toString能够完成typeof的所有任务,不知为何以上两个框架会混用。私自猜测可能是因为typeof使用起来更为简洁一点,所以会优先使用typeof。


总结

①boolen、number、string、symbol、function可通过typeof或toString方式判断。

②null、undefined直接通过 ===运算符判断。

③js内置对象,如:Object、Function、Date、Regex等通过toString方式判断。

④自定义类和相应继承类,通过 instanceof判断。


参考:

判断JS数据类型的4种方法

JavaScript 数据类型和数据结构

欢迎关注我的微信公众号:

转载于:https://my.oschina.net/lsjcoder/blog/1825533

前端基础(一):js数据类型相关推荐

  1. web前端基础之JS

    JavaScript概述 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 核心(ECMAScript) 文档对象模型(DOM) Document object model (整 ...

  2. 前端基础(四)_数据类型的强制转换

    数据类型的强制转换就是通过js提供的函数进行数据转换.常见的就是将其他类型的数据转换成number类型和string类型. 一.其他类型转 number 类型 1.Number Number 方法将其 ...

  3. 前端基础-Node.js核心模块的使用

    第2章 核心模块的使用 2.1.1 FS模块 node核心模块之一,用于操作文件: 中文手册 : http://nodejs.cn/api/fs.html 文件读写 // 引入模块 var fs = ...

  4. 前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)

    一.数据类型分类 1.1.数据类型分类 JavaScript的数据类型为弱类型,即最开始的时候并不知道变量是什么类型,必须通过后面的值才能知道. JavaScript的数据类型分为简单数据类型(也称为 ...

  5. Day 11/09/2017 前端基础之JS(三)

    BOM对象 window对象 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象, ...

  6. 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页

  7. 前端基础面试题大全-极乐科技(一)-JS部分

    2019独角兽企业重金招聘Python工程师标准>>> #JS部分 ###1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined. ...

  8. 前端基础(HTML、CSS、JS)

    前端基础(HTML.CSS.JS) 1 HTML 1.1 文件标签 1.2 排版标签 1.3 字体标签 1.4 列表标记 1.4.1 有序列表 1.4.2 无序列表 1.5 图片标签 1.6 超链接标 ...

  9. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

最新文章

  1. python多进程编程 多个函数并发执行_python并发编程之多进程编程
  2. bootstrap --- 标签页切换
  3. BoW(词袋Bag of words)
  4. 【解决篇】映美FP-530K+打印发票卡纸,色带安装问题
  5. 阿里云的域名和ip绑定
  6. 我写过的软件之TSE-工作流程和实现
  7. python的江湖世界
  8. 闲暇之余,纪录片推荐(B站)
  9. redis安装+客户端
  10. python微信公众号开发音乐功能_python利用微信公众号实现报警功能
  11. 发哥莫慌!这56亿让区块链帮你搞定
  12. Linux下USB HID device driver研究
  13. 多种RPA机器人常见应用行业及场景
  14. 智能图像处理技术:开启未来视觉时代
  15. 2021你还在苦苦寻找的Ps磨皮插件在这!PS实用插件分享
  16. openmv ide 2.6.5下载
  17. 今日美食推荐html代码,美食今日推荐.html
  18. 彻底丢掉职场中的四个幻想
  19. 数据库系统概论 中文高清PDF版下载
  20. 51单片机开发工具的安装

热门文章

  1. C#中通过单例模式以及Dictionary实现键值对的映射,通过key获取value
  2. Android中通过Java代码实现ScrollView滚动视图-以歌词滚动为例
  3. SqlServer2014怎样还原数据库
  4. cordova项目怎样修改版本号
  5. 规模化敏捷框架(SAFe)的原则
  6. 效率提升看得见 神策 A/B 测试可视化试验能力正式上线
  7. 听说别人都在送小黄车月卡?神策数据送两个月!
  8. JavaScript:从此不再怕闭包
  9. OpenSwitch操作系统成为Linux基金会官方项目
  10. 对代码生成器的一点想法