美文网首页
03 | 读JavaScript 高程

03 | 读JavaScript 高程

作者: cemcoe | 来源:发表于2020-05-10 20:24 被阅读0次

这是第三章基本概念,这一章涉及变量,操作符,语句和函数等相关内容。

主要的知识点:

  • ECMAScript 中究竟有几种数据类型?
  • 如何检测一个数据的数据类型?
  • 为什么 typeof null 的结果会是 object?
  • 数据类型间的互相转化如何进行?
  • ES2020新增操作符使用场景?
  • for of 语句使用场景?

1.数据类型的变迁

ECMAScript 的数据类型在网上的资料存在三次变迁。

刚开始的数据类型:Null Undefined Boolean Number String Object
ES6来了之后:Symbol
ES2020来了之后:BigInt

所以说站在 ES2020 的角度来看,ECMAScript 有 8 种数据类型。高程这本书第三版是最开始的6种的情况,第四版提到了Symbol。同时撇开Object还被称为complex data type,其他7种数据类型还称primitive types。

数据结构的变迁

来看一下两个新朋友,Symbol 和 BingInt。

Symbol 在 js 中代表独一无二的值,目前能想到的应用场景是,利用 Symbol 值作为属性名可以很好的避免复杂对象中含有多个属性的时容易将某个属性名覆盖掉的情况。

BingInt其实也算是老朋友了。

好的我们现在已经知道了ESMAScript中有Null Undefined Boolean Number String Object Symbol BigInt 8 种数据类型,接下来的问题是当我们拿到一个数据,比如通过 ajax 向后端请求到数据后,如何检测该数据的数据类型?

2.数据类型的检测

typeof instnceof
每种检测方法各有优缺点,下面依次测试。
首先的typeof ,需要注意两点,typeof 是操作符,使用时可以不加括号,其次使用typeof检测的结果本身的数据结构是字符串,即

typeof (typeof 管你是你哈) ===  'string'
typeof

从图中可以看出 typeof 的结果和数据类型并不是严格意义上的一一对应,和我们料想的不一样的点在于 Object 和 Null。

这里就有一些问题了,为什么 typeof null 的结果会是 object?

在MDN上找到的解释是:

在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是 0,typeof null 也因此返回 "object"。

https://2ality.com/2013/10/typeof-null.html

综上,如果你要判断变量是 Undefined Boolean 等简单数据类型,那么 typeof 可以使用,但如果你要检测一个变量是否为对象,或者具体的对象类型,那么,typeof 可能无能为力。

还有instanceof方法检测,后面再说。

3.类型转换

就像水可以在自然界中通过一定的条件在气态,液态和固态间不断转化一样,数据的类型也可以通过一些方式进行转变。

这里的转换方式分为两种,分别是隐式类型转换和显式类型转换。

作为判断条件时,给类型会被隐式转换成Boolean类型。

4.ES2020 新增操作符

?? 空值合并运算符
?. 可选链操作符

这两个操作符都和 Null 和 Undefined 相关。

空值合并运算符:当左侧操作数为 null 或 undefined 时,其返回右侧的操作数。否则返回左侧的操作数。在这里就要提到 || 了,逻辑或会在左操作数为假值时返回右侧操作数。两者的区别在于返回右侧操作数的条件。

可选链:当不能保证哪些属性是必需的时,?.操作符对于探索一个对象的内容是很有帮助的。

如何要找一个对象的属性值,一般会先 hasOwnProperty() 检查一下是否有该属性名,确认后会使用点操作符或者中括号取到属性值,有点麻烦。

有了可选链:

let age = obj.cemcoe?.age;
// 当obj里存在cemcoe时,去拿age值
// 不存在时返回undefined

5.for of 语句

先来一段很熟悉的代码:

for (let i = 0; i < arr.length; i++){}

上面是经常用到的操作,对数据进行遍历,但有时我们可能并不需要索引,即上文中的i,我们只想要对item进行相关的操作,这时上面的方法就有点笨重了,那么如何解决呢?

可以使用for of。

相关文章

  • 03 | 读JavaScript 高程

    这是第三章基本概念,这一章涉及变量,操作符,语句和函数等相关内容。 主要的知识点: ECMAScript 中究竟有...

  • 05 | 读JavaScript 高程

    这是第五章引用类型,这一章涉及引用类型的种类,各个类型身上的方法等相关内容。 主要知识点: 1.引用类型和类和对象...

  • 01 | 读 JavaScript 高程

    缘起 总感觉自己前端的知识体系不是很系统,打算读一下这本很多人推荐的书,从目录来看第三版有些东西在2020年可能已...

  • 02 | 读 JavaScript 高程

    今天来瞧一瞧第二章在 HTML中使用 JavaScript script 标签属性的变化 首先是 script 标...

  • 06 | 读JavaScript 高程

    这是第六章面向对象的程序设计,这一章涉及到一些概念和思想,也是 JavaScript 中很重要的知识点。需要注意的...

  • 04 | 读JavaScript 高程

    这是第四章基本概念,这一章涉及变量、作用域和内存问题等相关内容。主要知识点: 值类型和引用类型的区别是什么? 如何...

  • 08 | 读JavaScript 高程

    这一篇呢是第8章,主要涉及 BOM 的相关知识。 先来看BOM,即和浏览器相关地一些东西。 知识点:1.BOM 中...

  • 07 | 读JavaScript 高程

    这是第七章函数表达式,这一章涉及函数预编译,闭包,作用域链内容。函数涉及内容繁多。 前情提要 02-1 | 读Ja...

  • 13 | 读JavaScript 高程 | 事件

    这一篇呢是第13章,内容是和事件相关。 事件可以看成是条件判断的一种条件,逻辑是某个元素发生了某个事情,我要做出相...

  • 20 | 读JavaScript 高程 | JSON

    第14至19章有特定的应用场景,这里先略过。先看第20章,跨度有点大,该章内容主要是对JSON这种数据格式的讲解。...

网友评论

      本文标题:03 | 读JavaScript 高程

      本文链接:https://www.haomeiwen.com/subject/xwrjnhtx.html