Web前端入门第 57 问：JavaScript 数据类型与类型转换
<p>在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。</p><p>如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。</p>
<p>在 JS 中，数据类型可以分为 <code>原始类型</code> 和 <code>对象类型</code>。</p>
<h3 id="原始类型">原始类型</h3>
<p>直接存储值，不可变（值的地址不可变），共 7 种：</p>
<p>1、<code>number</code> 数值类型，包括整数、浮点数、Infinity、NaN。</p>
<pre><code class="language-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
</code></pre>
<p>2、<code>string</code> 字符串类型。单双引号声明的字符串不允许换行，可使用反引号申明多行字符串和模版字符串。</p>
<pre><code class="language-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
</code></pre>
<p>3、<code>boolean</code> 布尔值（true/false）。</p>
<pre><code class="language-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
</code></pre>
<p>4、<code>null</code> 表示空值。</p>
<pre><code class="language-js">const empty = null;
console.log(typeof empty); // object
</code></pre>
<p>5、<code>undefined</code> 未定义的值。</p>
<pre><code class="language-js">let u1; // 未声明变量，默认为 undefined
const u2 = undefined; // 显示使用 undefined 声明变量
</code></pre>
<p>6、<code>symbol</code> 唯一且不可变的值（符号）。就算使用 Symbol 声明的内容一样，但是两个变量其实是不相等的！！</p>
<pre><code class="language-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(); // 不带描述的符号
</code></pre>
<p>7、<code>bigint</code> 大整数（以 n 结尾，如 123n），一般用于表示大于 <code>2^53 - 1</code> 的整数，ES2020+ 引入的新的数据类型，使用时需注意兼容性。</p>
<pre><code class="language-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
</code></pre>
<h3 id="对象类型">对象类型</h3>
<p>存储引用（内存地址），可变，包含所有非原始类型的值：</p>
<p>1、普通对象</p>
<pre><code class="language-js">const obj1 = {}; // 创建一个空对象
const obj2 = { name: '前端路引', age: 1 }; // 带属性的对象
const obj3 = new Object(); // 使用构造函数创建对象
const obj4 = Object({name: '前端路引'});
</code></pre>
<p>2、数组</p>
<pre><code class="language-js">const arr1 = []; // 空数组
const arr2 = ; // 带元素的数组
const arr3 = new Array();
const arr4 = Array(10).fill('前端路引'); // 创建一个长度为 10 的数组，并填充内容
</code></pre>
<p>3、函数</p>
<pre><code class="language-js">function func1() {
console.log('Function 1');
}
const func2 = function() {
console.log('Function 2');
};
const func3 = () => {
console.log('Function 3');
};
</code></pre>
<p>除了基础的三种基础对象类型外，JS 还内置了很多其他对象，比如 Date、RegExp、Error、Map、Set、WeakMap、WeakSet、Promise、Proxy、ArrayBuffer 等。</p>
<h2 id="类型转换">类型转换</h2>
<p>JS 的类型转换分为隐式转换（明确表明由 A 转为 B）和显式转换（自动发生的类型转换）。</p>
<h3 id="显式转换">显式转换</h3>
<p>通过对象方法强制转换：</p>
<p>1、转字符串</p>
<pre><code class="language-js">String(123); // "123"
.toString(); // "1,2"
</code></pre>
<p>2、转数字</p>
<pre><code class="language-js">Number("123"); // 123
Number("abc"); // NaN
parseInt("12px");// 12
</code></pre>
<p>3、转布尔</p>
<pre><code class="language-js">Boolean(""); // false
Boolean({}); // true
</code></pre>
<h3 id="隐式转换">隐式转换</h3>
<p>一半多发生于运算符，比如：</p>
<p>1、字符串拼接</p>
<pre><code class="language-js">console.log('1' + 1); // 11
console.log(1 + '1'); // 11
</code></pre>
<p>2、数学运算</p>
<pre><code class="language-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
</code></pre>
<p>3、逻辑运算</p>
<pre><code class="language-js">if (0) { // 0 为 false，将不会执行代码块
console.log('0');
}
</code></pre>
<h3 id="常见转换规则">常见转换规则</h3>
<table>
<thead>
<tr>
<th>原始值</th>
<th>转字符串</th>
<th>转数字</th>
<th>转布尔值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>true</code></td>
<td>"true"</td>
<td>1</td>
<td>true</td>
</tr>
<tr>
<td><code>false</code></td>
<td>"false"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td><code>0</code></td>
<td>"0"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td><code>""</code></td>
<td>""</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td><code>"123"</code></td>
<td>"123"</td>
<td>123</td>
<td>true</td>
</tr>
<tr>
<td><code>null</code></td>
<td>"null"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td><code>undefined</code></td>
<td>"undefined"</td>
<td>NaN</td>
<td>false</td>
</tr>
<tr>
<td><code>NaN</code></td>
<td>"NaN"</td>
<td>NaN</td>
<td>false</td>
</tr>
<tr>
<td><code>[]</code></td>
<td>""</td>
<td>0</td>
<td>true</td>
</tr>
<tr>
<td><code></code></td>
<td>"5"</td>
<td>5</td>
<td>true</td>
</tr>
<tr>
<td><code>{}</code></td>
<td>""</td>
<td>NaN</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="常见陷阱与最佳实践">常见陷阱与最佳实践</h2>
<p>1、<strong><code>==</code> vs <code>===</code></strong></p>
<ul>
<li><code>==</code> 会进行类型转换： <code>0 == false</code> 为 <code>true</code>。</li>
<li><code>===</code> 严格比较类型和值，推荐使用。</li>
</ul>
<p>2、<strong><code>NaN</code>的判断</strong></p>
<ul>
<li><code>NaN === NaN</code> 为 <code>false</code>，使用 <code>Number.isNaN(value)</code> 或 <code>Object.is(value, NaN)</code>。</li>
</ul>
<p>3、<strong>对象转换</strong></p>
<ul>
<li>对象转原始值时，优先调用 <code>valueOf()</code>，再 <code>toString()</code>。</li>
<li><code>{} + []</code> 可能被解析为代码块，导致结果意外。</li>
</ul>
<p>4、<strong>parseInt基数</strong></p>
<ul>
<li>总是指定基数：<code>parseInt("08", 10)</code> 避免八进制误解。</li>
</ul>
<h2 id="写在最后">写在最后</h2>
<p>由于 JavaScript 属于弱类型语言，所以在编码时候特别需要注意类型转换问题。特常见问题：后端返回的数据类型是字符串 <code>'1'</code>，在前端当做数字 <code>1</code> 使用，这时候分分钟踩雷。</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18890277</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18890277
頁:
[1]