重学前端系列笔记（3）

JavaScript类型

规定7种

• Undefined
• Null
• Boolean
• String
• Number
• Symbol （ES6）
• Object

undefined && null

问题：为什么有些编程规范中使用viod 0 代替undefined？
undefined表示未定义，任何变量在赋值操作之前都为undefined，而void 0 为一个关键字，undefined 作为变量可以被赋值操作，即被篡改，所以建议使用 void 0 来获取undefined 的值。

undefined 和null 差异，null表示定义了但是为空，为一个关键字，编程时为了保证变量为未赋值的自然状态，不将变量赋值为undefined。

Boolean

true && false

string

即字符串。String 有最大长度是 2^53 - 1，最大长度并不是字符数。

因为String 的意义并非“字符串”，而是字符串的 UTF16 编码，我们字符串的操作 charAt、charCodeAt、length 等方法针对的都是 UTF16 编码。所以，字符串的最大长度，实际上是受字符串的编码长度影响的。

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

Number

Number通常意义上表示“数字”，但在计算机中number是有一定进度的。
JS的基础数据类型Number，遵循IEEE754规范，采用双精度存储（double precision），占用64bit；

image.png

含义：1位表示符号位、11来表示指数、52位表示指数
浮点数：

0.1>>0.0001 1001 1001 1001…（1001无限循环）
0.2 >> 0.0011 0011 0011 0011…（0011无限循环）

//此时只能模仿十进制进行四舍五入，但是二进制只有0 和 1俩个，于是变为0舍1入，部分浮点数运算出现误差丢失精度的根本原因。

大整数丢失精度

9007199254740992     >> 10000000000000...000 // 共计 53 个 0
9007199254740992 + 1 >> 10000000000000...001 // 中间 52 个 0
9007199254740992 + 2 >> 10000000000000...010 // 中间 51 个 0

9007199254740992 + 1 // 丢失
9007199254740992 + 2 // 未丢失
9007199254740992 + 3 // 丢失
9007199254740992 + 4 // 未丢失

前端在发生精度丢失的情况一般出现在小数，（很少有业务会用到超大整数）
解决方案:

//0.1 + 0.2
(0.1*10 + 0.2*10)/10 == 0.3   //true

IEEE 754标准规定了什么IEEE 754 规定:
a) 两种基本浮点格式:单精度和双精度。IEEE单精度格式具有24位有效数字，并总共占用32 位。IEEE双精度格式具有53位有效数字精度，并总共占用64位。 说明:基本浮点格式是固定格式，相对应的十进制有效数字分别为7位和17位。基本浮点格式对应的C/C++类型为float和double。
b) 两种扩展浮点格式:单精度扩展和双精度扩展。此标准并未规定扩展格式的精度和大小，但它指定了最小精度和大小。例如，IEEE 双精度扩展格式必须至少具有64位有效数字，并总共占用至少79 位。 说明:虽然IEEE 754标准没有规定具体格式，但是实现者可以选择符合该规定的格式，一旦实现，则为固定格式。例如:x86 FPU是80位扩展精度，而Intel安腾FPU是82位扩展精度，都符合IEEE 754标准的规定。C/C++对于扩展双精度的相应类型是long double，但是，Microsoft Visual C++ 6.0版本以上的编译器都不支持该类型，long double和double一样，都是64位基本双精度，只能用其它C/C++编译器或汇编语言。
c) 浮点运算的准确度要求:加、减、乘、除、平方根、余数、将浮点格式的数舍入为整数值、在不同浮点格式之间转换、在浮点和整数格式之间转换以及比较。求余和比较运算必须精确无误。其他的每种运算必须向其目标提供精确的结果，除非没有此类结果，或者该结果不满足目标格式。对于后一种情况，运算必须按照下面介绍的规定舍入模式的规则对精确结果进行最低限度的修改，并将经过此类修改的结果提供给运算的目标。 说明:IEEE754没有规定基本算术运算(+、-、×、/ 等)的结果必须精确无误，因为对于IEEE 754的二进制浮点数格式，由于浮点格式长度固定，基本运算的结果几乎不可能精确无误。这里用三位精度的十进制加法来说明: 例1:a = 3.51，b = 0.234，求a+b = ? a与b都是三位有效数字，但是，a+b的精确结果为3.744，是四位有效数字，对于该浮点格式只有三位精度，a+b的结果无法精确表示，只能近似表示，具体运算结果取决于舍入模式(见舍入模式的说明)。同理，由于浮点格式固定，对于其他基本运算，结果也几乎无法精确表示。
d) 在十进制字符串和两种基本浮点格式之一的二进制浮点数之间进行转换的准确度、单一性和一致性要求。对于在指定范围内的操作数，这些转换必须生成精确的结果(如果可能的话)，或者按照规定舍入模式的规则，对此类精确结果进行最低限度的修改。对于不在指定范围内的操作数，这些转换生成的结果与精确结果之间的差值不得超过取决于舍入模式的指定误差
e) 五种类型的IEEE 浮点异常，以及用于向用户指示发生这些类型异常的条件。五种类型的浮点异常是:无效运算、被零除、上溢、下溢和不精确
f) 四种舍入方向:向最接近的可表示的值;当有两个最接近的可表示的值时首选"偶数"值;向负无穷大(向下);向正无穷大(向上)以及向0(截断)

Js为了表达额外的语言场景（例如不让除以0出错）规定：

• NaN，占用了 9007199254740990，这原本是符合IEEE规则的数字；
• Infinity，无穷大；
• -Infinity，负无穷大。

js中包含 +0 与 -0的区别 （忘记检测除以-0，而得到负无穷大）
检测方法：

//检测x的值
1/x 是 Infinity 还是 -Infinity。

js检测精度方法

console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);
//true

symbol

Symbol 是 ES6 中引入的新类型，它是一切非字符串的对象key的集合，在ES6规范中，整个对象系统被用Symbol 重塑。表示独一无二的值。

Symbol可以具有字符串类型的描述，但即使描述相同，Symbol也不相等。
创建Symbol：

var mySymbol = Symbol('my symbol')

//无参数情况
var s1 = Symbol();
var s2 = Symbol();

s1 === s2   //false;

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

s1 === s2   //false;

Symbol值不能与其他类型的值进行运算

作为属性名的Symbol

var mySymbol = Symbol();

// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

注意：Symbol值作为对象属性名时，不可以使用点运算符

var a = {};
var name = Symbol();
a.name = 'lili';
a[name] = 'lucy';
console.log(a.name,a[name]);             //lili,lucy

Symbol值作为属性名时，该属性还是公开属性，不是私有属性。

这个有点类似于java中的protected属性（protected和private的区别：在类的外部都是不可以访问的，在类内的子类可以继承protected不可以继承private）

但是这里的Symbol在类外部也是可以访问的，只是不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()返回。但有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名

Symbol.for()，Symbol.keyFor()

var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');

s1 === s2 // true
//Symbol.for全局中搜索有没有该参数作为名称的Symbol值，如果有，则返回该Symbol值，否则新建一个以该字符串为名的Symbol值，所以S1 === S2

var s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

var s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
//实质是检测该Symbol是否检测

一些标准中提到的 Symbol，可以在全局的 Symbol 函数的属性中找到。例如，我们可以使用 Symbol.iterator 来自定义 for…of 在对象上的行为：

var o = new Object

    o[Symbol.iterator] = function() {
        var v = 0
        return {
            next: function() {
                return { value: v++, done: v > 10 }
            }
        }        
    };

    for(var v of o) 
        console.log(v); // 0 1 2 3 ... 9

代码中我们定义了iterator之后，用for(var v of o)就可以调用这个函数，然后我们可以根据函数的行为，产生一个for…of的行为。
这里我们给对象o添加了 Symbol.iterator 属性，并且按照迭代器的要求定义了一个0到10的迭代器，之后我们就可以在for of中愉快地使用这个o对象啦。
这些标准中被称为“众所周知”的 Symbol，也构成了语言的一类接口形式。它们允许编写与语言结合更紧密的 API。

关于Symbol.iterator的理解

es6中有三类结构生来就具有Iterator接口：数组、类数组对象、Map和Set结构。

var arr = [1,2,3,4];

let iterator = arr[Symbol.iterator]();

var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
 
console.log(iterator.next());  //{ value: 1, done: false }
console.log(iterator.next());  //{ value: 2, done: false }
console.log(iterator.next());  //{ value: 3, done: false }
console.log(iterator.next());  //{ value: 4, done: false }
console.log(iterator.next());  //{ value: undefined, done: true }

数组、Map等结构中的成员都是有顺序的，即都是线性的结构，而对象，各成员并没有一个确定的顺序，所以遍历时先后顺序并不确定。所以给对象部署一个iterator接口，其实就是对该对象做一种线性转换

所以上方迭代过后的对象可以使用for of遍历

理解for of循环

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

• variable：每个迭代的属性值被分配给该变量。
• iterable：一个具有可枚举属性并且可以迭代的对象。

具体可参考：
https://www.cnblogs.com/m2maomao/p/7743143.html https://blog.csdn.net/margin_0px/article/details/82971545

object

Object 是JavaScript 核心机制之一，最复杂的类型，表示有形无形物体的总称。

在 JavaScript 中，对象的定义是“属性的集合”。属性分为数据属性和访问器属性，二者都是key-value结构，key可以是字符串或者 Symbol类型。
关于对象的机制，后面会有单独的一篇来讲述，这里我重点从类型的角度来介绍对象类型。
提到对象，我们必须要提到一个概念：类。
因为 C++ 和 Java 的成功，在这两门语言中，每个类都是一个类型，二者几乎等同，以至于很多人常常会把JavaScript的“类”与类型混淆。
事实上，JavaScript 中的“类”仅仅是运行时对象的一个私有属性，而JavaScript中是无法自定义类型的。

JavaScript中的几个基本类型，都在对象类型中有一个“亲戚”。它们是：

• Number；
• String；
• Boolean；
• Symbol。

3与new Number(3)是完全不同的值，类型不同

Number、String和Boolean，三个构造器是两用的，当跟 new 搭配时，它们产生对象，当直接调用时，它们表示强制类型转换。
Symbol 函数比较特殊，直接用 new 调用它会抛出错误，但它仍然是 Symbol 对象的构造器

JavaScript 语言设计上试图模糊对象和基本类型之间的关系，我们日常代码可以把对象的方法在基本类型上使用，比如：

cosole.log("abc".charAt(0)); //a

甚至我们在原型上添加方法，都可以应用于基本类型，比如以下代码，在 Symbol 原型上添加了hello方法，在任何 Symbol 类型变量都可以调用。

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

var a = Symbol("a");
console.log(typeof a); //symbol，a并非对象
a.hello(); //hello，有效

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

类型转换

== 为设计失误，建议 === 比较。

image.png

• StringToNumber
• NumberToString
• 装箱转换
• 拆箱转换

（第五课后续部分待深入学习）