重学前端
程劭非(winter)
前手机淘宝前端负责人
105347 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

JavaScript类型:关于类型,有哪些你不知道的细节?

补充阅读
类型转换
类型
运行时类型
JavaScript类型

该思维导图由 AI 生成,仅供参考

你好,我是 winter。今天我们来讲讲 JavaScript 的内容,在这个部分,我首先想跟你聊一聊类型。
JavaScript 类型对每个前端程序员来说,几乎都是最为熟悉的概念了。但是你真的很了解它们吗?我们不妨来看看下面的几个问题。
为什么有的编程规范要求用 void 0 代替 undefined?
字符串有最大长度吗?
0.1 + 0.2 不是等于 0.3 么?为什么 JavaScript 里不是这样的?
ES6 新加入的 Symbol 是个什么东西?
为什么给对象添加的方法能用在基本类型上?
如果你答起来还有些犹豫的地方,这就说明你对这部分知识点,还是有些遗漏之处的。没关系,今天我来帮你一一补上。
我在前面提到过,我们的 JavaScript 模块会从运行时、文法和执行过程三个角度去剖析 JS 的知识体系,本篇我们就从运行时的角度去看 JavaScript 的类型系统。
运行时类型是代码实际执行过程中我们用到的类型。所有的类型数据都会属于 7 个类型之一。从变量、参数、返回值到表达式中间结果,任何 JavaScript 代码运行过程中产生的数据,都具有运行时类型

类型

JavaScript 语言的每一个值都属于某一种数据类型。JavaScript 语言规定了 7 种语言类型。语言类型广泛用于变量、函数参数、表达式、函数返回值等场合。根据最新的语言标准,这 7 种语言类型是:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

JavaScript类型系统是前端开发中的重要概念。本文深入探讨了JavaScript的7种语言类型:Undefined、Null、Boolean、String、Number、Symbol和Object。文章首先解释了为什么有的编程规范要求用void 0代替undefined,然后分别介绍了Undefined、Null和Boolean类型。在讨论String类型时,强调了字符串的最大长度受UTF16编码影响,并提到了Unicode和UTF的相关知识。对于Number类型,文章详细解释了JavaScript中的浮点数运算精度问题,以及如何正确比较浮点数。此外,文章还介绍了ES6中新增的Symbol类型,以及如何创建和使用Symbol。文章还涉及了类型转换、装箱转换和拆箱转换等内容。总的来说,本文通过深入浅出的方式,帮助读者重新认识JavaScript的类型系统,解答了一些常见问题,为读者提供了全面的知识概览。文章还提到了JavaScript语言中提供的typeof运算,用来返回操作数的类型,但typeof的运算结果与运行时类型的规定有很多不一致的地方。JavaScript之父也在多个场合表示过,typeof的设计是有缺陷的,只是现在已经错过了修正它的时机。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(242)

  • 最新
  • 精选
  • 咕叽咕叽
    感谢winter老师的分享,受益匪浅。 但是本文有两点是值得商榷的。 其一: 原文:Undefined 跟 null 有一定的表意差别,null表示的是:“定义了但是为空”。 私以为,undefined表示的是:“定义了但是为空”。而非null。 二: 原文: var o = { valueOf : () => {console.log("valueOf"); return {}}, toString : () => {console.log("toString"); return {}} } o + "" // toString // valueOf // TypeError 很多朋友已经提出来了,应该是先执行valueof,再执行toString。 这个问题,可以从ecmascript规范中寻找答案: 规范指出,类型转换的内部实现是通过ToPrimitive ( input [ , PreferredType ] )方法进行转换的,这个方法的作用就是将input转换成一个非对象类型。 参数preferredType是可选的,它的作用是,指出了input被期待转成的类型。 如果不传preferredType进来,默认的是'number'。 如果preferredType的值是"string",那就先执行"toString", 后执行"valueOf"。否则,先执行"valueOf", 后执行"toString"。 由此可见,"toString", "valueOf"的执行顺序,取决于preferred的值。 规范原文请移步:http://www.ecma-international.org/ecma-262/#sec-toprimitive 再回到我们的例子 var o = { valueOf : () => {console.log("valueOf"); return {}}, toString : () => {console.log("toString"); return {}} } o + "" 类型转换时,把对象o进行转换,调用toPrimitive方法,即toPrimitive(o[ , PreferredType ] )。关键的点是,preferredType是否被传值,传的是什么值? 我们再去看下规范,看看加法运算符的规则。 加法运算符运算过程中有两行代码很重要,如下 Let lprim be ? ToPrimitive(lval). Let rprim be ? ToPrimitive(rval). 可以看出,调用ToPrimitive方法时,第二个参数是没有传参的。 所以preferredType取默认的值"number"。最终先执行"valueOf", 后执行"toString"。 个人愚见,如有纰漏,还请各位同仁指正。

    作者回复: 一、undefined确实是表示未定义,从字面即可看出来。 取JavaScript对象的未定义过的属性得到的都是undefined。 二、嗯,这个地方我确实写错了,等下改过来。

    2019-02-15
    14
    242
  • blueshell
    #### 重写十进制的parseInt/parseFloat ` var myParse = function (val) { if (val) { var num = val.match(/^\d*\.?\d+/); if (num !== null) { return num[0] - 0; }else{ return NaN; } }else{ return NaN; } } `

    作者回复: 嗯 不错 不过用正则和剑法自动转换可就偷懒了,而且这些东西有太多你没搞清楚的细节了。 比如你看看我写的十进制的正则: /\.[0-9]+|(?:[1-9]+[0-9]*|0)(?:\.[0-9]*|\.)?)(?:[eE][+-]{0,1}[0-9]+)?(?![_$a-zA-Z0-9])/

    2019-02-19
    3
    17
  • 酷儿
    不用原生的 Number 和 parseInt 进行类型Stirng to Number转换用~~就好了, ~~"7" = 7

    作者回复: 其实我讲了半天,意思就是不要用这样的东西,写代码不光要给机器看,还要给人看。

    2019-10-10
    7
  • Leung
    +'3'转number,3+''转string

    作者回复: 这么写代码容易被同事打

    2019-07-02
    2
    3
  • geek_syk
    ES10 又推出了 BigInt 这种类型,javascript 的数据类型已增加至 8 种了是吧

    作者回复: 还没发布的不算

    2019-10-23
    1
  • 逍竹
    作者您好,可以用 null 关键字来获取 null 值,这句话是什么意思呢?

    作者回复: 额 就是写个null,就得到了这个值。

    2019-02-18
    2
    1
  • mingingคิดถึง
    String 有最大长度是 2^53 - 1 我理解是String最多有53个二进制位,每个二级制位都有0/1两种选择,一共有2^53中情况,那为什么要减一呢

    作者回复: 你这个理解错的非常远啊。 字符串怎么可能只有53个二进制位呢,2^53 - 1是最大安全整数范围。

    2019-10-17
  • Geek_c90ff4
    老师,您好!我好像还不太理解Symbol.iterator在时间工作中的使用场景

    作者回复: 神马时间工作?

    2019-10-11
  • 脱尼
    请问下2^53-1 是怎么得到的?

    作者回复: 这个是标准规定的,没什么特别的道理。

    2019-08-31
  • ionlyleaf
    上面类型转换的图,Object(null) 为TypeError?应该是{}才对吧:The Object constructor creates an object wrapper for the given value. If the value is null or undefined, it will create and return an empty object。

    作者回复: 这是个点,Object这里并没有起到类型转换的作用。

    2019-08-22
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部