动态类型

JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。

数据类型

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

  • 6 种 原始类型:

    • Boolean

    • Null

    • Undefined

    • Number

    • String

    • Symbol (ECMAScript 6 新定义)

  • 和 Object

typeof 检测数据类型

typeof用来检测给定变量的数据类型,返回下列某个字符串

  • "boolean” --- 变量是布尔值(true/false)

  • "undefined" --- 变量未定义

  • "string" --- 变量是字符串

  • "number" --- 变量是数值

  • "function" --- 变量是函数

  • "object" --- 变量是对象或null

  • "symbol" --- 变量是Symbol

有这样一道题目,考察 typeof 返回值类型。

typeof(typeof(new Date()))   //string

但是在实际项目中,typeof 也只是用来判断变量是undefinedfunction。因为很多类型不能精确的判断出来,例如:

Value function typeof
"foo" String string
new String("foo") String object
1.2 Number number
new Number(1.2) Number object
true Boolean boolean
new Boolean(true) Boolean object
new Date() Date object
new Error() Error object
[1,2,3] Array object
new Array(1, 2, 3) Array object
new Function("") Function function
/abc/g RegExp object
new RegExp("meow") RegExp object
{} Object object
new Object() Object object
注意
typeof /s/ ===function; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === object; // Firefox 5+ , 符合 ECMAScript 5.1

由上得出结论,当使用检测结果是objectfunction时,我们并不能看出实际的数据类型。

推荐使用 Object.prototype.toString(),结合call去实现对变量类型的精准判断。

Object.prototype.toString.call(null);      //”[object Null]”
Object.prototype.toString.call(undefined); //”[object Undefined]”
Object.prototype.toString.call(“abc”);     //”[object String]”
Object.prototype.toString.call(123);       //”[object Number]”
Object.prototype.toString.call(true);      //”[object Boolean]”

简单封装如下:

function _typeof(obj){if(typeof obj == object || typeof obj == function){var type =Object.prototype.toString.call(obj).split("")[1].toLowerCase();return type.match(/[a-z]/g).join("");  //正则去除字符串的]}return typeof obj; }

上面代码在标准浏览器中可以完全兼容,但是IE6(虽然现在不必兼容,也要了解下)中,却会出现以下问题:

_typeof(null);        //object
_typeof(undefined);   //object

原因在于IE6下

Object.prototype.toString.call(undefined);  //”[object Object]”
Object.prototype.toString.call(null);       //”[object Object]”

所以要先添加判断,使用String()对象将 undefinednull转为字符串。代码如下:

   function _typeof (obj){//注意到这里是 == 而不是 === ,//undefined 值是派生自 null 值的,所以null == undefined 返回true if(obj == null){return String(obj)}if(typeof obj == "object"; || typeof obj == "function"){var type =Object.prototype.toString.call(obj).split(" ")[1].toLowerCase();return type.substring(0,type.length-1); }return typeof obj; }

String()函数遵循下列转换规则:
如果值有 toString()方法,则调用该方法(没有参数)并返回相应的结果;
如果值是 null,则返回"null";
如果值是 undefined,则返回"undefined"

这样对 typeof 的扩展就封装好了。代码还有优化空间,这里不再继续。

Jquery已经实现了类型检测的封装,jquery.type()的内部实现如下:

//实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {class2type[ "[object " + name + "]" ] = name.toLowerCase();
});$.type = function( obj ) {//如果是null或者undefined,直接转成String返回//注意到这里是==而不是===,//undefined 值是派生自 null 值的,所以null == undefined 返回true if ( obj == null ) {return String( obj );}//当typeof 返回 object或function, 进入core_toString return typeof obj === "object" || typeof obj === "function" ?class2type[ core_toString.call(obj) ] || "object":typeof obj;
}

Undefined

Undefined 类型只有一个值,即特殊的 undefined。在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined,例如:

var foo;
alert(foo == undefined);  //true

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
典型用法是:

  1. 变量被声明了,但没有赋值时,就等于 undefined

  2. 调用函数时,应该提供的参数没有提供,该参数等于 undefined

  3. 对象没有赋值的属性,该属性的值为 undefined

  4. 函数没有返回值时,默认返回 undefined

var name;
alert(name) // undefinedfunction f(x){console.log(x)}
f() // undefinedvar  o = new Object();
alert(o.p) // undefinedvar x = f();
alert(x) // undefined

Null

Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null

null 有时会被当作一种对象类型,但是这其实只是语言本身的一个bug,即对 null 执行 typeof null 时会返回字符串"object"

原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为object类型,null的二进制表示是全0,自然前三位也是0,所以执行 typeof 时会返回“object”。——《你不知道的JavaScript》

使用null的情况:

1.DOM,试图获取一个不存在的元素返回一个null值,而不是undefined
2.初始化一个对象的值,一般设为null
3.通过分配null值,有效地清除引用,并假设对象没有引用其他代码,指定垃圾收集,确保回收内存。

var table = document.getElementById("table");
console.log(table);  // nullvar obj = null; //初始化对象window.onload = function(){var el = document.getElementById("id");var id = el.id; //解除循环引用el.onclick = function(){alert(id); }el = null; // 将闭包引用的外部函数中活动对象清除
}

Boolean

Boolean 类型是常用的一种类型,只有两个字面值:truefalse

注意:字面值区分大小写,True 和 False 不是 Boolean 值。

经常遇到就是其他数据类型转为boolean的问题,只要遵循一个原则:

当值为""(空字符串)、0NaNnullundefined 时,都转为false,其他情况都为true

JavaScript基础(一) 数据类型相关推荐

  1. JavaScript基础-基本数据类型和基本流程控制

    2019独角兽企业重金招聘Python工程师标准>>> JavaScript基础1 一.基本数据类型 1.Number 2.String 3.Null 4.Undefined 5.t ...

  2. JavaScript基础学习--数据类型

    JavaScript 数据类型 在 JavaScript 中有 5 中不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  3. JavaScript基础复习之数据类型,解读数据类型不为人知的一面

    <=> 朋友你好,这里是小毅的前端日记, 分享代码日常 ! <=> 本文目标:查缺补漏Javascript数据类型,解读数据类型不为人知的一面 <=> 卑微的大三前 ...

  4. JavaScript基础,Cookies,Sessions

    php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...

  5. 前端---JavaScript基础1

    文章目录 前端---JavaScript基础1 数据类型 面向对象 对象创建方式 对象类型判断 前端-JavaScript基础1 JS是 解释型语言:跨平台 慢 编译型语言:不能跨平台 快 数据类型 ...

  6. JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  7. JavaScript基础01【简介、js编写位置、基本语法(6种基本数据类型)】

    学习地址: 谷粒学院---尚硅谷 尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版JavaScrip ...

  8. javascript基础系列:javascript中的变量和数据类型(一)

    javascript基础系列:javascript中的变量和数据类型(一) 今天开始去重新系统温习一遍js基础,并作下记录 javascript是由三部分组成: ECMASCRIPT(ES): 描述了 ...

  9. javascript百炼成仙 第一章 掌握JavaScript基础1.4数据类型

    修行还在继续,随着对要诀的深入,叶小凡明白,在编程世界,刚才的直接量都属于一种数据.和人有男女一样,数据也是有类型的. 在JavaScript中,数据可分为两类,分别为原生数据类型(primitive ...

最新文章

  1. Codeup-问题 C: 货币系统
  2. pythonwhile循环实战教程_Python入门丨for循环和while循环
  3. ext的另一个table布局的例子
  4. 俞敏洪回应新东方向国家图书馆捐课
  5. 全连接层和卷积层最终应用在网络上的不同之处
  6. Python的安装与配置
  7. 线性代数 行列式 知识技巧思维导图 [21考研上岸之旅]
  8. 基于ATMEGA128的密码锁
  9. c语言程序商品的打折,C语言程序设计习题doc.doc
  10. 25 | 业务安全体系:对比基础安全,业务安全有哪些不同?
  11. excel表格公式使用失败,输出只有公式,没显示结果
  12. 【知识点2】最大公约数与最小公约数
  13. 容联七陌助力VIPKID,优质客户服务赢得家长青睐
  14. 安装并使用Ghidra的Eclipse插件的过程
  15. 计算机只存在于计算机硬盘上,计算机病毒只存在于计算机硬盘上。()
  16. dell服务器r730老自动重启_Re: DELL R730 服务器异常卡死导致iDRAC控制台无信号以及服务器远程连接失败重启后报内存错误(已插拔并已改变卡槽位置)...
  17. 个人项目-地铁出行线路规划程序
  18. JVM 上篇(12):垃圾回收相关概念
  19. windows下更改文件创建修改访问时间
  20. Java实现适配器模式

热门文章

  1. 深入掌握JMS(一):JMS基础
  2. 论Oracle 11g数据库备份与恢复策略
  3. Brian 的 Perl 问题之万能指南
  4. c++ hook 钩子的使用介绍
  5. 仓央嘉措《那一天,那一月,那一年,那一世》
  6. java使用jeids实现redis2.6的String操作(1)
  7. 《Python数据科学指南》——1.8 使用迭代器
  8. bit,Byte、KB、MB、GB、TB、PB、EB之间的关系
  9. 不看后悔 如何删除WIN7的100M隐藏分区
  10. 浅析SAAS数据模型设计(Oracle)