如何更容易记忆：JavaScript类型与类型判断

发表于 更新于

本文属于原创文章，转载请注明–来自桃源小盼的博客

前言

为什么写这篇文章，并不是不知道这些类型，而是发现常常会忘记其中的一个两个。像这类知识，其实就是记忆型的知识，并不需要多么深入的理解。

一次性记住这么多，其实并不容易，刚开始学习时很容易就记住了，过段时间就又忘记了，因为并没有形成长期记忆。所以我做了分类管理，每次提起这个问题，先想到的是有哪些分类，再回忆每个分类下有哪些内容。

JavaScript中的变量是没有类型的，只有值才有。

七大基本类型

  • number
  • string
  • boolean
  • null
  • undefined
  • symbol
  • bigint

基本类型也称为简单数据类型或原始类型。

我们拆成三种类型：

第一种是常用的类型：

几乎所有编程语言都有这些类型

  • 数字 number
  • 字符串 string
  • 布尔值 boolean

第二种是js比较特殊的类型：

  • 空值 null
  • 未定义undefined

第三种是新增的类型：

我们根据发布的es版本来记住它

  • 符号 symbol es2015新增(es6)
  • 大数 bigInt es2020新增

如何判断七种基本类型？

看下面这段代码：

1
2
3
4
5
6
7
typeof 12            // number
typeof 'hello world' // string
typeof true          // boolean
typeof null          // object(特殊)
typeof undefined     // undefined
typeof Symbol()      // symbol
typeof BigInt(1)     // bigint

其实typeof判断的很准确，只有一个null判断错误了,这是js的一个bug。我们只需要记住这个例外情况就够了。

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

复合条件判断null类型

1
2
var a = null
(!a && typeof a === 'object') // true

复杂类型 Object

前面七种基本类型加上对象object，合称八种内置类型。

object有两种经常提到的子类型：

  • 数组 array
  • 函数 function

其实还有很多子类型：

  • String
  • Number
  • Boolean
  • Date
  • RegExp
  • Error

如何判断function类型

typeof可以正确检测函数类型

1
2
3
function foo () {}

typeof foo // function

如何判断数组类型

可以使用的方式有多种：

1
2
3
4
5
6
var arr = [1]

typeof arr                // object
arr instanceof Array      // true
arr.constructor === Array // true
Array.isArray(arr)        // true

typeof无法用在检测数组上。
首选推荐 Array.isArray。

万能类型判断方法

1
2
3
4
5
6
7
8
function test(a) {
	return Object.prototype.toString.call(a).slice(8, -1)
}


test(123)          // Number
test([1])          // Array
test(function(){}) // Function

结语

也许这种方式没有帮助到你，那你更应该去寻找适合自己的学习方式。

欢迎讨论切磋学习方法。