资讯专栏INFORMATION COLUMN

JavaScript基础(一) 数据类型

heartFollower / 2045人阅读

摘要:类型是第二个只有一个值的数据类型这个特殊的值是。有时会被当作一种对象类型,但是这其实只是语言本身的一个,即对执行时会返回字符串。初始化对象解除循环引用将闭包引用的外部函数中活动对象清除类型是常用的一种类型,只有两个字面值和。

动态类型

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表示"缺少值",就是此处应该有一个值,但是还没有定义。
典型用法是:

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

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

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

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

var name;
alert(name) // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
alert(o.p) // undefined

var 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);  // null

var 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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79992.html

相关文章

  • 基础巩固:JavaScript基础总结(基本概念篇)

    摘要:基础巩固基础总结使用已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现的使用范围原来越广泛。这里要注意,务必将基础部分掌握牢靠,磨刀不误砍柴功,只有将基础部分掌握并建立起系统的知识体系,在后面学习衍生的其他模式才能游刃有余。 基础巩固:JavaScript基础总结 使用JavaScript已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现JavaScript的使用范围原...

    YuboonaZhang 评论0 收藏0
  • 前端基础进阶():内存空间详细图解

    摘要:一栈数据结构与不同,中并没有严格意义上区分栈内存与堆内存。引用数据类型的值是保存在堆内存中的对象。不允许直接访问堆内存中的位置,因此我们不能直接操作对象的堆内存空间。为了更好的搞懂变量对象与堆内存,我们可以结合以下例子与图解进行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

    _Suqin 评论0 收藏0
  • task0002()- JavaScript数据类型及语言基础

    摘要:不过让流行起来的原因应该是是目前所有主流浏览器上唯一支持的脚本语言。经过测试,数字字符串布尔日期可以直接赋值,修改不会产生影响。再考虑对象类型为或者的情况。对于结果声明其类型。判断对象的类型是还是,结果类型更改。 转载自我的个人博客 欢迎大家批评指正 1. 第一个页面交互 这里最需要学习的老师的代码中,每一部分功能都由函数控制,没有创建一个全部变量。且最后有一个函数来控制执行代码...

    elarity 评论0 收藏0
  • JavaScript学习总结(基础部分

    摘要:前缀规范每个局部变量都需要有一个类型前缀,按照类型可以分为表示字符串。例如,表示以上未涉及到的其他对象,例如,表示全局变量,例如,是一种区分大小写的语言。布尔值与字符串相加将布尔值强制转换为字符串。 基本概念 javascript是一门解释型的语言,浏览器充当解释器。js执行时,在同一个作用域内是先解释再执行。解释的时候会编译function和var这两个关键词定义的变量,编译完成后从...

    AlanKeene 评论0 收藏0
  • javascript 基础类型转换

    摘要:类型转换和表示一个空对象。如果有其他类型想转换为或者类型,直接赋值就可以了。都能隐式的把数据类型转为类型。。。时间时间二数字类型转换为字符串默认是进制是一个对象类型,所以其他类型转化为通常都是。 前言 javaScript是一门可以自由进行数据类型转换的编程语言,类型转换是javaScript很重要的特色(坑点很多!!!),大家想以后写出更多严谨的代码(少出一些莫名其妙的Bug),还是...

    timger 评论0 收藏0
  • JavaScript基础数据类型

    摘要:原始数据类型和原始数据类型实在太简单,所以只简单划几个重点原始数据类型不可改变原始数据类型一个非常重要的特征就是不可改变。引用数据类型这里的不是狭义的,包含的预定义引用类型,对,这些都是引用数据类型。 JavaScript是脚本语言 计算机语言可以分为三类,机器语言、汇编语言、高级语言。高级语言又可以简单分为解释类和编译类。这个知道就够了。 机器语言: 计算机所能识别的二进制语言,一般...

    pinecone 评论0 收藏0

发表评论

0条评论

heartFollower

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<