重学前端第6课 关于JS数据类型的细节

这节课讲的是JS数据类型,.

众所周知, ES5有5种基本的数据类型,  还有一种引用类型(对象), 在ES6中则新增一种symbol基本数据类型
变量, 参数, 返回值到表达式中间结果, 任何JavaScript代码运行过程中产生的数据, 都属于上述7中数据类型的一种

尽管数据类型很基础, 但是还是会有一些细节可能还不太清楚的,比如:
|
● 为什么有些编程规范要求用void 0代表undefined
● 字符串有最大长度吗
● 0.1 + 0.2不是0.3吗?为什么JS不是这样?
● ES6新加入的symbol是个什么东西?
● 为什么对象添加的方法能用在基本类型上?

现在结合一下我原有的知识重新认识一下这些数据类型:
1.Undefined 和 Null  
首先,undefined在JS中不是一个关键字和保留字,他是一个变量, 值为undefined
其次, 变量没有被定义的时候显示 xx is not defined, 变量定义了但是没有被赋值的时候显示 undefined
所以,要得到一个undefined的值, 不能直接使用undefined,因为他是一个变量可以改变, 在这里我们可以使用定义了但是不赋值的变量(未定义的属性,无返回值的函数也行), 也可以使用 void 0来赋值( void详细介绍看MDN和下面的参考文档)

null是关键字, 

null == undefined    // true
null === undefined   // false
void 0 === undefined  // true

2.Boolean
3.String
JavaScript字符串是一串unicode字符, 每个unicode字符用1到2个编码单元表示, 每个编码单元用一个16位二进制数表示.

4.Number
用64位双精度浮点数表示数字, 在具体实现时, 整数通常被视为32位整形变量
0.1 + 0.2 = 0.300000000004
NaN !== NaN    可以用 isNaN() 表示
可以用:
  单位运算符 +  不能含有字母
  parseInt()     2个参数, 第二个是进制    识别到不能识别为止   比如  567xx   识别为 567
  parseFloat()    十进制      同上   45.6xx识别为 45.6   
5.Symbol
为了避免变量名冲突, 引入了symbol类型, 该类型具有静态方法和静态属性
symbol可以具有字符串类型的描述, 但是即使描述相同, symbol也不相等
我们创建symbol的方式是使用全局的symbol函数
var mySymbol = Symbol( "my symbol" );
使用场景:
  1.作为属性名
  2.定义常量
2个方法:
  1.Symbol.for()
  2.Symbol.keyFor()

6.Object
对对象不了解的话先看mdn了解一下.
他这里主要回答了上面的第五个问题 :
. 运算符提供了装箱操作, 他会根据基础类型构造一个临时对象, 使得我们可以在基础类型上调用对象属性和方法. 这里和我的一篇讲基本数据类型和基本包装类型的博客有点相关,有兴趣可以看一下.

 

类型转换
因为JS是弱类型语言, 所以类型转换非常频繁
大部分类型转换符合人类直觉
但是 == 这个符号 试图实现跨类型的比较, 这个是设计失误, 不推荐使用, 用 ===
下面讲几种转换规则:
StringToNumber:
  1.Number()
  2.parseInt()
  3.parseFloat()
  4.单位运算符 +

NumberToString:
String()
toString()

装箱转换:
. 运算符提供了装箱操作

上面提到了
拆箱转换:
这里是对象类型到基本类型的转换, 拆箱转换会尝试调用valueOf和toString来获得拆箱后的基本类型,.
如果valueOf()和toString()都不存在, 或者没有返回基本类型, 则会产生类型错误TypeError

总结,:
事实上, 对于这节课, 我上面写的都是我从这节课截取的重点, 比如对null和undefined的认识, 对symbol的认识,  装箱和拆箱操作认识等等. 鉴于自己水平有限, 大家看了如果有不懂的地方建议google去深入理解一下.

参考文档:
JS魔法堂：从void 0 === undefined说起 
https://cloud.tencent.com/developer/article/1023572
JS数据类型和数据结构
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures
重新介绍JavaScript(JS教程)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript