资讯专栏INFORMATION COLUMN

JavaScript类型介绍

K_B_Z / 2419人阅读

摘要:我们再用复合条件来检测一下值的类型由此我们知道,隐式强制类型转换成了反值为说明的布尔值为,并对它的类型做出全等比较,最后返回。

我的第一篇文章

从开始学前端直至现在已有一年的时间了,期间遇见了很多事情,也经历了各式各样的技术问题,为了让自己摆脱这些这些问题,最后养成了看书的习惯。因为每次看完总觉得自己内功又增了,哪怕只是一点。可惜的是每次看完都会忘掉一些,尤其是没有自己的实践和知识点太多时总会遗忘一些,但我不希望这种事情发生,

可能只是因为这一点,以后就会找几天的bug,这是每个程序员都不敢预想的场景。最后我决定把我每天对知识的累积,用我理解的角度去记录下来。笔记和文章唯一的不同前者是私有,后者是公开的,希望通过我对它理解可以帮助他人,也请大家能指出文章中的问题,感激不尽。

类型

ECMAScript语言中所有的值都对应一个类型。语言类型包括:Undefined,Null,Boolean,String,Number,Object。对于语言引擎和开发人员来说,类型是值的内部特征,它定义了值的行为,是所有编程语言的共有的概念,并使其区别于其他值。

抛开学术界对类型定义的分歧,为什么说JavaScript是否有类型也很重要呢?让我们来详细介绍一下,关于JavaScript类型这部分的知识。

内置类型

首先JavaScript有七种内置类型:

空值(Null)

未赋值(Undefined)

字符串(String)

数字(Number)

对象(Object)

布尔值(Boolean)

符号(Symbol ES6中新增)

注: 除对象以外其他统称为基本类型.

下面我们用typeof查看这七种类型值,但是结果却和它们的类型名称不尽相同。

    typeof {community:"sf"} // "Object"
    typeof undefined        // "undefined"
    typeof 12               // "number"
    typeof "javascript"     // "string"
    typeof true             // "boolean"
    typeof Symbol           // "symbol"

上面的这六种类型都和我typeof出来的字符串互相对应。

咦? null 哪去了?现在我门来多带带看案它的类型.

typeof null === "object"     //true

你可能会看到null并不是"null",这是JavaScript一个历史悠久的bug,但是由于web系统对其的依赖,很难修复,这个bug也许会一直存在雨javascript中。我们需要铭记在心,避免以后程序出现问题。我们再用复合条件来检测一下null值的类型:

     var a = null;
     (!a && typeof a === "object" )  // true

由此我们知道,null隐式强制类型转换成了反值为true(说明null的布尔值为false),并对它的类型做出全等比较,最后返回true。

typeof function(){}  // "function"

这样看来,function也是JavaScript的一个内置类型吧?可以去查阅一下ECMAScript规范,它其实是Object类型中的子类型,也就是说它属于Object类型范畴之内,具体来说,函数是可调用对象,它有一个内部属性[[call]]使其可以被调用。
那么它有什么对象的特征呢?让我们来在控制台中打印出来看一下.

可以看到,函数当中有一些可读取属性,就比如 .length属性,代表的是其声明的参数个数,

var fun = function(a,b){}
fun.length //2

查看了function,让我们再来查看一下Array类型.

typeof [1,2,3] === "object"  //true

它们都同属于Object子类型, 数组的元素按数字顺序来进行索引(非字符串那样通过字符串键值),其length属性是其数组元素个数。

值和类型

JavaScript中的类型是相对于他的值来定义的,也就是说衡量类型的永远都是值本身,与变量无关,变量只是储存值的一个容器,在这个容器中有不确定的值类型

JavaScript 不做类型强制,也就是说,语言引擎不要求变量总是与初始化值同类型的值。

   var a = 10;
   typeof a    // "number"

   a = true;
   typeof a    //"boolean"

typeof 总会返回一个字符串

  typeof typeof 10     //string  

typeof 10 返回为 "number" 之后再次使用typeof "number" 结果为 ”string“

Undeclared与Undefined

我们都知道undefined代表未被复制,它也是我们七大类型中的一种,如下:

     var a;
     typeof a      //"undefined"
     
     var b = 20;
     var c;
     
     b = c;
     typeof b      // "undefined"
     typeof c      // "undefined"

可能有些朋友对Undeclared有些陌生,让我们来看一下它与Undefined的定义:
在作用域中未被声明过的变量为 Undeclared。
作用域中声明了且未被赋值的为Undefined

遗憾的是我们在js环境下测试时,两种情况却并没有出现Undeclared,这是为什么呢?

   var a ;
       
   a;     //undefined
   b;     //ReferenceError : b is not defined

"b is not defined " 容易让人误解为与undefined的性质一样,其它们两个是两码事此时浏览器如果报成 b is not found 或者 b is not declared会更加准确。

虽然JS当中没有Undeclared的显式概念,但是我们要知道它是存在的,Undefined 与 Undeclared 是完全两种不同的场景;

  var a ;
  typeof  a //undefined
  typeof  b //undefined

对于Undeclared照样返回了undefined。这里b虽然是一个Undeclared变量,但typeof b 它并没有报错,这是因为typeof有一套安全防范机制。

typeof Undeclared

该安全机制在浏览器运行时的JavaScript代码来说是很有帮助的,因为多个脚本文件会在共享的全局命名空间中加载变量。

举个例子 ,如果我们在布尔环境下为一个值做非空判断。

   if(DETELE){}  // ReferenceError: detele is not defined

抛出了错误,上面已经解释过,此处不再强调它的准确意义。为了避免程序出现这种促五,我们可以使用 typeof 来对它进行改造。

  if(typeof DETELE === "undefined"){  }

同样属于非空条件判断,后者的优势,我想大家已经看到了,不论何时它都不会报错,只是淡出的返回布尔值

可以看到 typeof 的安全防范机制为我们提供了非常便捷的方式,还有一种方式如下:

  if(window.DETELE){}

如果这个变量存在于全局中,我们可以利用它,全局变量中默认为全局属性的特性,来通过查找对象属性的方式去查看它,当然这只是在全局条件下,当非全局条件下,我们可以继续使用typeof去判断。

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

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

相关文章

  • WebSocket系列之JavaScript中数字数据如何转换为二进制数据

    摘要:以和为例,说明中的数字数据如何转换为二进制数据。对象用来表示通用的固定长度的原始二进制数据缓冲区。中的数字数据如何转换为二进制数据对和有了一个大概的了解,下面让我们来看下它是如何进行二进制数据操作的。 概述 本文主要通过对JavaScript中数字数据与二进制数据之间的转换,让读者能够了解在JavaScript中如何对数字类型(包括但不限于Number类型)进行处理。 二进制数据在日常...

    MASAILA 评论0 收藏0
  • JS程序

    摘要:设计模式是以面向对象编程为基础的,的面向对象编程和传统的的面向对象编程有些差别,这让我一开始接触的时候感到十分痛苦,但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程,否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0
  • WebSocket系列之字符串如何与二进制数据间进行互相转换

    摘要:总结通过使用和,我们能够在数据和二进制数据中进行互相转换。下一篇系列相关的博客,将会介绍如何通过来向后端传递二进制数据,以及如何处理通过收到的二进制数据。 概述 上一篇博客我们说到了如何进行数字类型(如Short、Int、Long类型)如何在JavaScript中进行二进制转换,如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为...

    stackfing 评论0 收藏0
  • 前端学习之路-CSS介绍,Html介绍JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 p标签 在head中加入style标签 p { color: #FFF000;} 链接方式 总结CSS 选择器名称 { 属性名:属性值; ……. } 属性与属性之间用 分号...

    mtunique 评论0 收藏0
  • Asm.js的简单介绍

    摘要:的代码采用另外一套编译器,将代码预先编译成机器指令,在编译过程或运行过程中,一旦发现语法错误或违反类型标记的情况出现,便重新将代码交予引擎解析执行。 Asm.js简介 早前流行的JavaScript将会统治世界这个梗,很好的说明了JavaScript的将来,能用JavaScript书写的都会用JavaScript来进行书写,不过JavaScript的弱类型是其被黑性能的很大不一部分,而...

    lijy91 评论0 收藏0

发表评论

0条评论

K_B_Z

|高级讲师

TA的文章

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