js 数据类型、类型转换

目录

数据类型

基本类型

引用类型

二者区别：

==  与 === 

类型转换

比较运算

x == y, 算法流程如下：

加法运算

对象转换

---

数据类型

基本类型

共7种，也被称为值类型，是一种既非对象也无方法的数据。包括：string、number、bigint、boolean、null、undefined、symbol。

引用类型

对象（Object）、数组（Array）、函数（Function）、Date、RegExp、基本包装类型(String、Number、Boolean、BigInt、Symbol)以及单体内置对象(Global、Math)

二者区别：

• 基本类型
  • 基本类型的值是不可改变的。
  • 基本类型的值保存在栈中。
  • 基本类型的比较是值的比较。
  • 保存与复制的是值本身。
  • 使用typeof检测数据的类型。
• 引用类型
  • 引用类型可以拥有属性和方法，并且是可以动态改变的.
  • 引用类型的值是同时保存在栈内存和堆内存中的对象。
  • 引用类型的比较是地址的比较。
  • 保存与复制的是指向对象的一个指针。
  • 使用instanceof检测数据类型。

==  与 === 

对于引用类型的变量，==和===只会判断引用的地址是否相同，而不会判断对象具体里属性以及值是否相同。因此，如果两个变量指向相同的对象，则返回true.
如果是不同的对象，即使包含相同的属性和值，也会返回false
示例：

var arrRef = ["Hi!"];
var arrRef2 = arrRef;
console.log(arrRef === arrRef2); // true

var arr1 = ["Hi!"];
var arr2 = ["Hi!"];
console.log(arr1 === arr2); // false

示例：

var a,b;
a = "zyj";
b = a;

a.toUpperCase();
console.log(a);   // zyj
console.log(b);   // zyj

a = "呵呵";       // 改变 a 的值，并不影响 b 的值
console.log(a);   // 呵呵
console.log(b);   // zyj

示例：

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name);    // zyj

b.age = 22;
console.log(a.age);     // 22
var c = {
  name: "zyj",
  age: 22
};

内存结构图如下：

类型转换

显式调用Boolean(value)、Number(value)、String(value)完成的类型转换，叫做显示类型转换。

比较操作或者加减乘除四则运算操作时，常常会触发 JavaScript 的隐式类型转换。隐式类型转换时，绝大多数情况下都是优先转为number型。

js内部用于实现类型转换的4个函数是：

• ToPrimitive ( input [ , PreferredType ] )， 转换为原始对象，即基本类型，依赖于valueOf和toString的实现（先valueOf,再toString）
• ToBoolean ( argument )，除了以下（undefined、null、-0/+0、NaN、''）五个值的转换结果为false，其他的值全部为true
• ToNumber ( argument )
• ToString ( argument )

比较运算

JavaScript 为我们提供了严格比较与类型转换比较两种模式，严格比较（===）只会在操作符两侧的操作对象类型一致，并且内容一致时才会返回为 true，否则返回 false。
而更为广泛使用的 == 操作符则会首先将操作对象转化为相同类型，再进行比较。对于 <= 等运算，则会首先转化为原始对象（Primitives），然后再进行对比。

x == y, 算法流程如下：

1. x或y中有一个为NaN, 则返回false；
2. x或y都为null或undefined中的一种，则返回true（null == undefined），否则返回false（null == 0）；
3. x或y类型不一致，且为String,Number,Boolean中的一种，则x、y转为Number再比较；
4. x或y中有一个为Object，则将其转为原始类型，再进行比较；

优先比类型，再比null与undefined，再比string和number，再比boolean与any，再比object与string、number、symbol；
以上如果转为原始类型比较，则进行类型转换，直到类型相同再比较值的大小。这就是==的隐式转换对比

示例：

[] == ![] //true
1. 基于运算符的优先级，运算![]，[]转为boolean后为真值，取反后，变为![]==false
2. 任何类型与boolean比较，boolean转为number，即 []==0
3. []为对象，转为原始值，ToPrimitive先valueOf返回[],再toString返回''
4. 最后string转number，变为 0==0

加法运算

遇到算数运算符(- 、* 、/ 和 %)的时候会在运算之前将参与运算的双方转换成数字。而加法（+）运算有些特殊，只要其中一个操作数是字符串，那么它就执行连接字符串的操作。

加法（+）的算法如下：

1. +号左右分别进行取值，进行ToPrimitive()操作，转为原始值；
2. 分别获取左右转换之后的值，如果存在String，则对其进行ToString处理后进行拼接操作；
3. 其他的都进行ToNumber处理；
4. 在转换时ToPrimitive，除去Date为string外，都按照ToPrimitive 类型为Number进行处理；

示例：

1+'2'+false

1.左边取原始值，依旧是Number
2.中间为String，则都进行toString操作
3.左边转换按照toString的规则，返回'1'，得到结果temp值'12'
4.右边布尔值和temp同样进行1步骤
5.temp为string，则布尔值也转为string'false'
6.拼接两者 得到最后结果 '12false'

对象转换

只有在 JavaScript 表达式或语句中需要用到数字或字符串时，对象才被隐式转换。 当需要将对象转换成数字时，需要以下三个步骤：

1. 调用 valueOf()。如果结果是原始值（不是一个对象），则将其转换为一个数字。
2. 否则，调用 toString() 方法。如果结果是原始值，则将其转换为一个数字。
3. 否则，抛出一个类型错误

示例：

> 3 * { valueOf: function () { return 5 } }
15