JavaScript 数据类型与类型转换

在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。 如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。 在 JS 中，数据类型可以分为 `原始类型` 和 `对象类型`。 ### 原始类型 直接存储值，不可变（值的地址不可变），共 7 种： 1、`number` 数值类型，包括整数、浮点数、Infinity、NaN。 ```js const num1 = 123; const num2 = 123.456; const num3 = Infinity; const num4 = NaN; const num5 = new Number(456); // 使用构造函数声明，获得一个 Number 对象 console.log(typeof num5); // object const num6 = Number(456); // 函数式声明 Number 类型 console.log(typeof num6); // number ``` 2、`string` 字符串类型。单双引号声明的字符串不允许换行，可使用反引号申明多行字符串和模版字符串。 ```js const str1 = 'hello'; // JS 中声明字符串允许单引号和双引号 const str1_1 = '\'hello\''; // 单引号中还有单引号需要使用反斜线转义字符串 const str2 = " world"; const str3 = str1 + str2; // 字符串拼接，获得 hello world const str4 = `前端路引 ${str1}${str2}`; // 多行模版字符串声明，允许有换行和变量存在， ${str1}${str2} 表示拼接两个变量 const str5 = new String('前端路引'); console.log(typeof str5); // object const str6 = String('前端路引'); console.log(typeof str6); // number ``` 3、`boolean` 布尔值（true/false）。 ```js const bool1 = true; const bool2 = false; const bool3 = new Boolean(true); console.log(typeof bool3); // object const bool4 = Boolean(true); console.log(typeof bool4); // boolean ``` 4、`null` 表示空值。 ```js const empty = null; console.log(typeof empty); // object ``` 5、`undefined` 未定义的值。 ```js let u1; // 未声明变量，默认为 undefined const u2 = undefined; // 显示使用 undefined 声明变量 ``` 6、`symbol` 唯一且不可变的值（符号）。就算使用 Symbol 声明的内容一样，但是两个变量其实是不相等的！！ ```js const sym1 = Symbol('前端路引'); // 带描述的符号 const sym2 = Symbol('前端路引'); console.log(sym1 === sym2); // false const sym3 = Symbol.for('前端路引'); // 全局符号 const sym4 = Symbol.for('前端路引'); console.log(sym3 === sym4); // true console.log(Symbol.keyFor(sym3)); // 前端路引 const sym5 = Symbol(); // 不带描述的符号 ``` 7、`bigint` 大整数（以 n 结尾，如 123n），一般用于表示大于 `2^53 - 1` 的整数，ES2020+ 引入的新的数据类型，使用时需注意兼容性。 ```js const big1 = 123n; const big2 = BigInt(123); console.log(big1 === big2); // true console.log(typeof big1); // bigint console.log(big1 === 123) // false console.log(big1 === 123n); // true ``` ### 对象类型 存储引用（内存地址），可变，包含所有非原始类型的值： 1、普通对象 ```js const obj1 = {}; // 创建一个空对象 const obj2 = { name: '前端路引', age: 1 }; // 带属性的对象 const obj3 = new Object(); // 使用构造函数创建对象 const obj4 = Object({name: '前端路引'}); ``` 2、数组 ```js const arr1 = []; // 空数组 const arr2 = [1, 2, 3]; // 带元素的数组 const arr3 = new Array(); const arr4 = Array(10).fill('前端路引'); // 创建一个长度为 10 的数组，并填充内容 ``` 3、函数 ```js function func1() { console.log('Function 1'); } const func2 = function() { console.log('Function 2'); }; const func3 = () => { console.log('Function 3'); }; ``` 除了基础的三种基础对象类型外，JS 还内置了很多其他对象，比如 Date、RegExp、Error、Map、Set、WeakMap、WeakSet、Promise、Proxy、ArrayBuffer 等。 ## 类型转换 JS 的类型转换分为隐式转换（明确表明由 A 转为 B）和显式转换（自动发生的类型转换）。 ### 显式转换 通过对象方法强制转换： 1、转字符串 ```js String(123); // "123" [1,2].toString(); // "1,2" ``` 2、转数字 ```js Number("123"); // 123 Number("abc"); // NaN parseInt("12px");// 12 ``` 3、转布尔 ```js Boolean(""); // false Boolean({}); // true ``` ### 隐式转换 一半多发生于运算符，比如： 1、字符串拼接 ```js console.log('1' + 1); // 11 console.log(1 + '1'); // 11 ``` 2、数学运算 ```js console.log('1' - 1); // 0 console.log(1 - '1'); // 0 console.log('1' * 1); // 1 console.log(1 * '1'); // 1 console.log('1' / 1); // 1 console.log(1 / '1'); // 1 ``` 3、逻辑运算 ```js if (0) { // 0 为 false，将不会执行代码块 console.log('0'); } ``` ### 常见转换规则 | 原始值 | 转字符串 | 转数字 | 转布尔值 | | --- | --- | --- | --- | | `true` | "true" | 1 | true | | `false` | "false" | 0 | false | | `0` | "0" | 0 | false | | `""` | "" | 0 | false | | `"123"` | "123" | 123 | true | | `null` | "null" | 0 | false | | `undefined` | "undefined" | NaN | false | | `NaN` | "NaN" | NaN | false | | `[]` | "" | 0 | true | | `[5]` | "5" | 5 | true | | `{}` | "[object Object]" | NaN | true | ## 常见陷阱与最佳实践 1、**`==` vs `===`** - `==` 会进行类型转换： `0 == false` 为 `true`。 - `===` 严格比较类型和值，推荐使用。 2、**`NaN`的判断** - `NaN === NaN` 为 `false`，使用 `Number.isNaN(value)` 或 `Object.is(value, NaN)`。 3、**对象转换** - 对象转原始值时，优先调用 `valueOf()`，再 `toString()`。 - `{} + []` 可能被解析为代码块，导致结果意外。 4、**parseInt基数** - 总是指定基数：`parseInt("08", 10)` 避免八进制误解。 ## 写在最后 由于 JavaScript 属于弱类型语言，所以在编码时候特别需要注意类型转换问题。特常见问题：后端返回的数据类型是字符串 `'1'`，在前端当做数字 `1` 使用，这时候分分钟踩雷。