重学前端学习笔记(六)--JavaScript类型有哪些你不知道的细节?

2023-05-16

笔记说明

重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。

JavaScript类型有哪些你不知道的细节?

winter提了几个问题测试:能回答对几个?

  • 1、为什么有的编程规范要求用 void 0 代替 undefined?
  • 2、字符串有最大长度吗?
  • 3、0.1 + 0.2 不是等于 0.3 么?为什么 JavaScript 里不是这样的?
  • 4、ES6 新加入的 Symbol 是个什么东西?
  • 5、为什么给对象添加的方法能用在基本类型上?

如果有点犹豫,不妨看看下面的介绍,或者找找资料温习一下。

类型

  1. Undefined
  2. Null
  3. Boolean
  4. String
  5. Number
  6. Symbol
  7. Object

1、Undefined、Null

Undefined:

  • Undefined 类型表示未定义,它的类型只有一个值,就是 undefined
  • 任何变量在赋值前是 Undefined 类型、值为 undefined
  • JavaScript 的代码 undefined 是一个变量,而并非是一个关键字,这是 JavaScript 语言公认的设计失误之一
  • 为了避免无意中被篡改,可以使用 void 0 来获取 undefined 值。

Null:

  • Null 类型也只有一个值,就是 null,它的语义表示空值
  • 与 undefined 不同,null 是 JavaScript 关键字
  • 在任何代码中,都可以用 null 关键字来获取null值

2、String

  • String 用于表示文本数据
  • String 有最大长度是 2^53 - 1
  • 字符串的最大长度,实际上是受字符串的编码长度影响的。

Note: 现行的字符集国际标准,字符是以 Unicode 的方式表示的,每一个 Unicode 的码点表示一个字符,理论上,Unicode 的范围是无限的。UTF 是 Unicode 的编码方式,规定了码点在计算机中的表示方法,常见的有 UTF16 和 UTF8。Unicode 的码点通常用 U+??? 来表示,其中 ??? 是十六进制的码点值。0-65536(U+0000 - U+FFFF)的码点被称为基本字符区域(BMP)。

3、Number

  • JavaScript 中的 Number 类型有 18437736874454810627(即 2^64-2^53+3) 个值
  • NaN,占用了 9007199254740990,这原本是符合 IEEE 规则的数字
  • Infinity,无穷大
  • -Infinity,负无穷大
  • 根据双精度浮点数的定义,Number 类型中有效的整数范围是-0x1fffffffffffff 至 0x1fffffffffffff,所以 Number 无法精确表示此范围外的整数
  • 根据浮点数的定义,非整数的 Number 类型无法用 ==(=== 也不行)来比较

关于javaScript中 0.1 + 0.2 == 0.3 ? 这个问题的解释:

console.log( 0.1 + 0.2 == 0.3);
>> false
复制代码

输出结果为false,说明两边不相等,这是浮点运算特点导致的,实际上,这里错误的不是结论,而是比较的方法,正确的比较方法是使用javaScript提供的最小精度值:

我们可以查找MDN文档的Number可以找到属性EPSILON

Number.EPSILON:两个可表示数字之间的最小间隔

console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);
>> true
复制代码

这样的比较输出结果为true检查等式左右两边差的绝对值是否小于最小精度,才是正确的比较浮点数的方法

4、Symbol

关于Symbol的介绍,我准备用ES6文档-阮一峰来做一些介绍,具体的可以参考文档

4.1、ES6 引入Symbol的原因

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。从根本上防止属性名的冲突。

4.2、介绍

凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

4.2.1、Symbol 值通过Symbol函数生成,先来一段代码:

let s = Symbol();
typeof s
>> "symbol"
复制代码

上面代码中,变量s就是一个独一无二的值。sSymbol数据类型。

4.2.2、Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1
>> Symbol(foo)
s2
>> Symbol(bar)

s1.toString()
>> "Symbol(foo)"

s2.toString()
>> "Symbol(bar)"
复制代码

上面代码中,s1s2是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。

4.2.3、如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,将其转为字符串,然后才生成一个 Symbol 值。

const obj = {
    a: '123123',
    toString() {
        return 'iuoisigud';
    }
};
const sym = Symbol(obj);

sym // Symbol(iuoisigud)
复制代码

4.2.4、Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false
复制代码

4.2.5、Symbol 值不能与其他类型的值进行运算,会报错。

let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string
复制代码

4.2.6、Symbol 值可以显式转为字符串,也可以转为布尔值,但是不能转为数值。

let sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

let sym = Symbol();
Boolean(sym) // true
!sym  // false

Number(sym) // TypeError
sym + 2 // TypeError
复制代码

4.2.7、其他的一些属性可以去看ES6文档-阮一峰

4.3、注意

Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型

5、Object

Object 是 JavaScript 中最复杂的类型,也是 JavaScript 的核心机制之一。

为什么给对象添加的方法能用在基本类型上?

回答:“运算符提供了装箱操作,它会根据基础类型构造一个临时对象,使得我们能在基础类型上调用对应对象的方法。”

比如原型上添加方法,也可以应用于基本类型:

Symbol.prototype.hello = () => console.log("hello");

var a = Symbol("a");
console.log(typeof a); //symbol,a 并非对象
a.hello(); //hello,有效
复制代码

6、类型转换

6.1、臭名昭著的“ == ”运算

  • 因为 JS 是弱类型语言,所以类型转换发生非常频繁
  • “ == ”试图实现跨类型的比较,它的规则复杂到几乎没人可以记住。

6.2、转换规则

6.3、StringToNumber

字符串到数字的类型转换,存在一个语法结构,类型转换支持十进制、二进制、八进制和十六进制

比如:

Number('0xFF')
>> 255
复制代码

6.4、装箱转换

装箱(boxing):值类型实例到对象的转换,它暗示在运行时实例将携带完整的类型信息,并在堆中分配。

每一种基本类型 NumberStringBooleanSymbol 在对象中都有对应的类,所谓装箱转换,正是把基本类型转换为对应的对象,它是类型转换中一种相当重要的种类。

例子:利用一个函数的 call 方法来强迫产生Symbol装箱

var symbolObject = (function() {
    return this;
}).call(Symbol("a"));

console.log(typeof symbolObject); //object
console.log(symbolObject instanceof Symbol); //true
console.log(symbolObject.constructor == Symbol); //true
复制代码

例子:使用内置的 Object 函数,我们可以在 JavaScript 代码中显式调用装箱能力。

var symbolObject = Object(Symbol("a"));

console.log(typeof symbolObject); //object
console.log(symbolObject instanceof Symbol); //true
console.log(symbolObject.constructor == Symbol); //true
复制代码

每一类装箱对象皆有私有的 Class 属性,这些属性可以用 Object.prototype.toString 获取:

var symbolObject = Object(Symbol("a"));

console.log(Object.prototype.toString.call(symbolObject));
>> [object Symbol]
复制代码

6.5、拆箱转换

拆箱(unboxing):是将引用类型转换为值类型

6.5.1、在 JavaScript 标准中,规定了 ToPrimitive 函数,它是对象类型到基本类型的转换

toPrimitive(input, preferedType)
复制代码

input是输入的值,preferedType是期望转换的类型,它可以是字符串,也可以是数字。

inputTypeResult
Undefinedinput argument
Nullinput argument
Booleaninput argument
Numberinput argument
Stringinput argument
Object忽略 第二个参数 hint PreferredType 直接调用内置方法 [[DefaultValue]]

6.5.2、如果转换的类型是number,会执行以下步骤:参考博客

  1. 如果input是原始值,直接返回这个值;
  2. 否则,如果input是对象,调用input.valueOf(),如果结果是原始值,返回结果;
  3. 否则,调用input.toString()。如果结果是原始值,返回结果;
  4. 否则,抛出错误。

6.5.3、如果转换的类型是String,2和3会交换执行,即先执行toString()方法。

例子1:先将两个操作数转换为string,然后进行拼接

[] + []
>> ""

[] -----> ''
[] -----> ''

[] + [] = ''
复制代码

例子2:先将两个操作数转换为string,然后进行拼接

[] + {}
>> "[object Object]"

// 解释
[] -----> ''
{} -----> '[object Object]'

[] + {} = '[object Object]'
复制代码

例子3:js解释器会将开头的 {} 看作一个代码块,而不是一个js对象

{} + []
>> 0

// 真正参与运算的是 + []
// {} + [] 等价于 + []
复制代码

7、规范类型

  • List 和 Record: 用于描述函数传参过程。
  • Set:主要用于解释字符集等。
  • Completion Record:用于描述异常、跳出等语句执行过程。
  • Reference:用于描述对象属性访问、delete 等。
  • Property Descriptor:用于描述对象的属性。
  • Lexical Environment 和 Environment Record:用于描述变量和作用域。
  • Data Block:用于描述二进制数据。

8、补充阅读

typeof 的运算结果,与运行时类型的规定有很多不一致的地方(typeof 的设计是有缺陷的)

个人总结

在整理知识点的时候,我就发现,我可能是真的划水酱_(:3」∠)_,里面大部分的东西很模糊,有点都不清不楚的,还有的没有听过,看来要好好打打基础了,现在前端的发展过于太快了,而自己的基础又不牢固,能跟着winter学习是我的幸运,不过在这里要感谢一个大佬的推荐,stormzhang,公众号也是这个,我的学习榜样来的,哈哈哈哈哈。

转载于:https://juejin.im/post/5cc71a0d6fb9a0324f179c90

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

重学前端学习笔记(六)--JavaScript类型有哪些你不知道的细节? 的相关文章

  • ubuntu中apt-get的常用命令。

    使用以下命令清理系统垃圾 sudo apt get autoclean 清理旧版本的软件缓存 sudo apt get clean 清理所有软件缓存 sudo apt get autoremove 删除系统不再使用的孤立软件 xff1d x
  • Qt之设置QWidget背景色

    简述 QWidget是所有用户界面对象的基类 xff0c 这意味着可以用同样的方法为其它子类控件改变背景颜色 Qt中窗口背景的设置 xff0c 下面介绍三种方法 使用QPalette 使用Style Sheet绘图事件 一般我不用QSS设置
  • 计算机机房英文术语,【数据中心】数据中心常见中英术语及解释

    原标题 xff1a 数据中心 数据中心常见中英术语及解释 一 常见中文术语 1 数据中心 为一个建筑群 建筑物或建筑物中的一个部分 xff0c 主要用于容纳设置计算机房及其支持空间 2 进线间 外部缆线引入和电信业务经营者安装通信设施的空间
  • C#学习之接口

    什么是接口 xff1f 其实 xff0c 接口简单理解就是一种约定 xff0c 使得实现接口的类或结构在形式上保持一致 个人觉得 xff0c 使用接口可以使程序更加清晰和条理化 xff0c 这就是接口的好处 xff0c 但并不是所有的编程语
  • neo1973 audio subsystem

    fhttp wiki openmoko org wiki Neo 1973 audio subsystem using Bluetooth headset with GSM NOTE none of this works with GTA0
  • 程序员面试必备书单

    点击关注异步图书 xff0c 置顶公众号 每天与你分享 IT好书 技术干货 职场知识 Tips 参与文末话题讨论 xff0c 即有机会获得异步图书一本 世上最快乐的事 xff0c 莫过于为理想奋斗 一个满意的工作 xff0c 便是为理想奋斗
  • vnc linux 终端打不开,vnc连接后只能看到终端

    我在windows安装了VNC Viewer xff0c 远程链接ubunt12 04服务器 xff0c 发现远程桌面只有一个终端 xff0c 没有桌面 从网上查了一些资料 xff0c 问题得以解决 xff0c 记录如下 xff1a 修改
  • ubuntu11.04下CUDA4.0的安装与配置

    ubuntu11 04下CUDA4 0的安装与配置 1 xff1a 下载CUDA 4 0 安装官网最新的显卡驱动 xff1a 安装方法可以参考 xff1a Ubuntu11 04下安装Nvidia显卡驱动的方法 然后从NVIDIA网站 xf
  • MySQL中如何定位DDL被阻塞的问题

    在生产环境中 xff0c 执行了一个DDL xff0c 发现很久都没有执行完 xff0c 是不是被阻塞了 xff1f 要怎么解决 xff1f 实际上 xff0c 如何解决DDL阻塞的问题 xff0c 是MySQL中一个共性且高频的问题 下面
  • oracle中的index函数,Oracle中的索引详解(整理)

    一 ROWID的概念 存储了row在数据文件中的具体位置 xff1a 64位 编码的数据 xff0c A Z a z 0 9 43 和 xff0c row在数据块中的存储方式 SELECT ROWID last name FROM hr e
  • KM算法学习笔记

    二分图定义 图的顶点恰好可以分成两个集合 xff0c 同一个集合内的顶点间不允许有边 xff0c 处在不同集合的顶点允许有边相连 问题分类 最大匹配问题 xff1a 匈牙利算法 Hopcroft Karp算法最优权值匹配问题 xff1a K
  • [转]GStreamer资料(摄像头采集,视频保存,远程监控)DVR

    http blog csdn net wzwxiaozheng archive 2010 12 26 6099397 aspx GStreamer资料整理 包括摄像头采集 视频保存 远程监控 流媒体RTP传输 1 gstreamer开发手册
  • HDFS的基础组成部分及基础操作

    HDFS组件结构图解说 xff1a 1 如图所示中 xff0c NameNode充当master角色 xff0c 职责包括 xff1a 管理文档系统的命名空间 namespace xff1b 调节客户端访问到需要的文件 存储在DateNod
  • 在XP下使用putty连接虚拟机中的linux出现主机拒绝的问题解决办法

    XP下的Linux虚拟机无法与主机ping通但主机可以ping通虚拟机的问题也可以用下面办法解决 xff01 一 首先windows的ip地址段必须和linux的ip地址段相同 xff0c 具体方法百度 xff0c Google下 xff0
  • Lodash学习笔记 - compact函数

    百忙之中 xff08 闲来无事 xff09 想抽点时间好好读一下源码 xff0c 于是就选了Lodash来写一个系列罢 读源码顺序就按照loadsh文档顺序来 文档地址 xff1a 中文文档 英文文档 源码地址 xff1a gayhub c
  • Ubuntu16.04调整屏幕分辨率至1920*1080

    安装好ubuntu 16 04桌面版后 xff0c 发现屏幕分辨率调整选项里没有1920 1080这一选项 xff0c 经过一番查找 xff0c 可通过如下方式进行屏幕分辨率设置 以下操作均在ubuntu 16 04桌面版操作 xff0c
  • 请查资料了解这些术语:/dev/hda, /dev/hdb, /dev/sda, /dev/sdb, 他们之间有什么区别?...

    1 请查资料了解这些术语 xff1a dev hda dev hdb dev sda dev sdb 他们之间有什么区别 xff1f 答 xff1a hda一般是指IDE接口的硬盘 xff0c hda指第一块硬盘 xff0c hdb指第二块
  • ubuntu常用技巧

    安装 xff1a 配置 xff1a AMD xff08 939 xff09 3500 xff0c 升技av8 xff08 k8t800pro xff09 xff0c 创见1GBddr400 xff0c 希捷250GB xff08 IDE x
  • 2016计算机cpu,看完你再评论!2016年CPU市场展望分析

    PConline 杂谈 相比早几年 xff0c 2016年有点特别 xff0c CPU市场终于让人看到折腾的盼头 xff0c 今年Intel和AMD都将有重量级的新产品上市 xff0c Intel将会在旗舰系列上推出14nm的Broadwe
  • MySQL中删除操作Delete、Truncate、Drop用法比较

    1 执行速度比较 Delete Truncate Drop关键字都可以删除数据 drop gt truncate gt delete 2 原理方面 2 1 delete delete 属于数据库 DML 操作语言 xff0c 只会删除数据表

随机推荐

  • floating IP 原理分析 - 每天5分钟玩转 OpenStack(107)

    上一节我们通过 Web UI 创建为 cirros vm3 分配了浮动 IP xff0c 今天将分析其工作原理 首先查看 router 的 interface 配置 xff1a 可以看到 xff0c floating IP 已经配置到 ro
  • linux移动硬盘挂载错误,suse挂载移动硬盘出错

    suse挂载移动硬盘出错 发布时间 2008 04 29 11 46 54来源 红联作者 Dnirta 刚刚挂移动硬盘想装个东西 xff0c 结果盘符出来了 xff0c 却打不开 有提示 root 64 localhost mount t
  • 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点 xff0c 不足请见谅 xff0c 欢迎赐教 webapp 小钗从事单页相关的开发一年有余 xff0c 期间无比的推崇webapp的网站模式 xff0c 也整理了很多移动开发的知识点 xff0c 但是现在回
  • Dell的Linux服务器开机按F1解决方法

    最近买了些二手服务器 xff0c dell品牌 xff0c 性价比还不错 xff0c 但是一台dell 服务器开机总是提示按F1才能进系统 到底应该怎么解决呢 xff1f 请问我的电脑开机老是提示 strike the f1 key to
  • ADB 操作命令详解及用法大全

    一 ADB是什么 xff1f ADB xff0c 即 Android Debug Bridge 是一种允许模拟器或已连接的 Android 设备进行通信的命令行工具 xff0c 它可为各种设备操作提供便利 xff0c 如安装和调试应用 xf
  • 在OpenResty中使用淘宝的concat进行css和js合并,同时支持GZIP静态压缩

    61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
  • cygwin64安装wget和apt-cyg

    说实话 xff0c 网上的教程要么不适用 xff0c 要么不能用 xff0c 唯有多次试错之后才杀出一条血路 1 安装cygwin 2 勾选wget 这个如果忘记勾选了 xff0c 就再次打开setup exe 选择如下操作 xff0c 即
  • React系列——websocket群聊系统在react的实现

    前奏 这篇文章仅对不熟悉在react中使用socket io的人 以及websocket入门者有帮助 下面这个动态图展示的聊天系统是用react 43 express 43 websocket搭建的 xff0c 很模糊吧 xff0c 要得就
  • JNA 实际开发中若干问题解决方法(二)

    1 JNA 中 byte 类型映射问题 在之前的文章中 xff0c 我们知道 JNA 中 xff0c char 和 char 类型都可以映射为 byte 类型 xff0c 通常来说也就是 byte 具有通用性 在实际开发中 xff0c 我们
  • 独家解读 | 智能驾驶视觉技术领域四类供应商及其商业化路径

    9 月 3 日 xff0c 雷锋网新智驾正式对外发布了 2018 智能驾驶视觉技术行业研究报告 xff0c 对智能驾驶技术感兴趣的读者可加入 新智驾会员计划 免费阅读本报告 xff0c 也可以通过官方渠道单独购买后进行查阅 首份报告发布两天
  • MySQL存储过程与存储函数

    1 创建存储过程 存储过程就是一条或者多条 SQL 语句的集合 xff0c 可以视为批文件 它可以定义批量插入的语句 xff0c 也可以定义一个接收不同条件的 SQL 创建存储过程的语句为 create procedure xff0c 创建
  • Vue+SpringBoot实现增删改查

    Vue 43 Spring boot Vue前端 Vue新建项目 当前我是用的是vue脚手架3 4 1版本 github地址 xff1a github com liangcongco vue create vue demo 新建项目 spa
  • 一例关于无法删除VMware虚拟机文件的案例

    关键字 xff1a VMware ESXi 虚拟机 操作背景 xff1a 由于运维不当导致一台虚拟机挂掉 xff0c 期望删除该VM的文件夹 xff0c 但从vCenter界面或者用指令界面 xff0c 均提示无法删除 xff0c 文件被占
  • PS安装扩展面板提示无法加载,因为它未经正确签署解决方法(适用于Mac/Win)

    最近发现好多小伙伴在使用Photoshop Mac端或者win端安装ps扩展面板时 总会遇到Photoshop错误提示无法加载 因为它未经正确签署 今天小编就和大家分享解决Mac Win端ps扩展面板提示无法加载 因为它未经正确签署解决方法
  • FTP连接不上的解决方法

    1 注意内网IP和外网IP 2 检查ftp服务是否启动 xff08 面板首页即可看到 xff09 3 检查防火墙20端口 ftp 21端口及被动端口39000 40000是否放行 xff08 如是腾讯云 阿里云等还需检查安全组 xff09
  • Arduino和C51开发OLED显示屏

    技术 xff1a 51单片机 Arduino OLED显示屏 U8glib 概述 OLED显示屏常常用作为智能产品的显示设备 xff0c 本文简单介绍OLED显示屏的使用方法 详细 代码下载 xff1a http www demodashi
  • mac 查看 本地网络代理

    networksetup listallnetworkservices 转载于 https www cnblogs com yshuai p 7813258 html
  • 常用的ROS命令

    在这里记一下 xff0c 以免以后忘记了 打开ros master xff1a roscore 查看topic列表 xff1a rostopic list v 打印topic内容 xff1a rostopic echo topic 将bag
  • platform下的js分析_2

    目录 主要包含 url js utils js requiring frame js attribute js CCMacro js CCSys js CCScreen js CCVisibleRect js callbacks invok
  • 重学前端学习笔记(六)--JavaScript类型有哪些你不知道的细节?

    笔记说明 重学前端是程劭非 xff08 winter xff09 前手机淘宝前端负责人 在极客时间开的一个专栏 xff0c 每天10分钟 xff0c 重构你的前端知识体系 xff0c 笔者主要整理学习过程的一些要点笔记以及感悟 xff0c