首页 › JavaScript论坛 › 浅析JavaScript判断变量数据类型有哪些方法

掐趾神蒜 發表於 2026-1-9 09:33:10

浅析JavaScript判断变量数据类型有哪些方法

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1.JavaScript 的原生值 (primitive values)</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">1.1 字符串 String</a></li><li><a href="#_lab2_0_1">1.2 布尔值 Boolean</a></li><li><a href="#_lab2_0_2">1.3 Number</a></li><li><a href="#_lab2_0_3">1.4 BigInt</a></li><li><a href="#_lab2_0_4">1.5 Undefined</a></li><li><a href="#_lab2_0_5">1.6 Null</a></li><li><a href="#_lab2_0_6">1.7 Symbol</a></li></ul><li><a href="#_label1">2.JavaScript中的对象(objects)</a></li><ul class="second_class_ul"></ul><li><a href="#_label2">3. 如何辨别一个变量的数据类型</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_7">3.1 使用typeof判断变量的数据类型</a></li><li><a href="#_lab2_2_8">3.2 判断变量是对象还是数组</a></li></ul></ul></div><p>JavaScript 有其内建的数据类型。其中又分为原生值（primitive values）和对象（objects）。</p>
<p class="maodian"><a name="_label0"></a></p><h2>1.JavaScript 的原生值 (primitive values)</h2>
<p>截至目前，JavaScript 的资料型别中，有七个原生值。这七个原生值以外的，全都是属于对象。</p>
<p>原生值是不可变的(immutable)，意思是我们不能改变那个值本身。比如当我们&ldquo;修改&rdquo;原始值时，实际上是让变量重新绑定到一个新的值，而不是在原值上进行修改。</p>
<div class="jb51code"><pre class="brush:js;">let greeting = "Hi";
greeting = "Hello"; // 此时虽然打印 greeting 是 Hello，但是 Hi 这个值本身是没变的，只是 greeting 指向了Hello 这个新值
</pre></div>
<p>JavaScript 的型别中的七个原生值包含：</p>
<ul><li>String</li><li>Boolean</li><li>Null</li><li>Undefined</li><li>Number</li><li>BigInt</li><li>Symbol</li></ul>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>1.1 字符串 String</h3>
<p>String (字符串)</p>
<p>字串是最常见的原生值之一。如前面提到，在JavaScript 当中字串本身是不可变的。当我们用<code>substring()</code>来撷取字串，或用<code>concat()</code>来把两个字串合为一，这些都是会回传另一个字串，而非改变原本的字串。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>1.2 布尔值 Boolean</h3>
<p>Boolean (布尔值)</p>
<p>有<code>true</code>与<code>false</code>两个值的布林值，也是JavaScript 的原生值。</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>1.3 Number</h3>
<p>JavaScript 与一些语言不同，没有分整数与浮点数，而是都用<code>number</code>这个原生值。不论整数或浮点数，都是<code>number</code>这个型别。在JavaScript 当中，<code>+Infinity</code>, <code>-Infinity</code>, 与 NaN 都是<code>number</code>这个型别，所以我们用<code>typeof</code>来检查的话，会得到<code>number</code>。</p>
<div class="jb51code"><pre class="brush:js;">console.log(typeof NaN); // number
</pre></div>
<p>而<code>number</code>在JavaScript 是双精度浮点数，所以精确度是介于<code>-(2^53 &minus; 1)</code>与<code>2^53 &minus; 1</code>之间。在这个范围之外，就会有精准度的问题，这时候要用另一个原生值<code>BigInt</code>。</p>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>1.4 BigInt</h3>
<p>上面提到在JavaScript 的整数与浮点数，都是用<code>number</code>这个型别，这其实只说了一半。因为JavaScript 的<code>number</code>精准度有其限制，虽然多数情况很够用(<code>2^53 - 1</code>会是9007199254740991，我们很少用到比这大的数)。但有些时候会需要更往下的精准度。这时就可以用<code>BigInt</code>数值的型别。</p>
<p><code>BigInt</code>可以让我们任意选择其精准度，就可以避免一些<code>number</code>会遇到的问题。它跟<code>number</code>一样可以用<code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, 与 <code>%</code>等运算子，不过要注意不可以拿<code>BigInt</code>跟<code>number</code>型别的值交互使用，这会出现<code>TypeError</code>。</p>
<p class="maodian"><a name="_lab2_0_4"></a></p><h3>1.5 Undefined</h3>
<p><code>undefined</code>是一个类型，它本身也是一个值。</p>
<p>假如某个变量未声明就是用，会出现索引错误ReferenceError</p>
<div class="jb51code"><pre class="brush:js;">console.log(a);

ReferenceError: a is not defined
</pre></div>
<p>用 let / const 声明了，但在声明前使用</p>
<div class="jb51code"><pre class="brush:js;">console.log(a);
let a = 1;

ReferenceError: Cannot access 'a' before initialization
</pre></div>
<p>某个变量声明但是没有赋值</p>
<div class="jb51code"><pre class="brush:js;">let greeting;
console.log(greeting); // undefined
</pre></div>
<p class="maodian"><a name="_lab2_0_5"></a></p><h3>1.6 Null</h3>
<p><code>null</code>是很容易跟<code>undefined</code>搞混的原生值。<code>undefined</code>是因为某变数还没有赋值，所以对JavaScript 来说，它不知道该变数的值是什么，所以要读取该变数时，会是<code>undefined</code>。不过 则<code>null</code>是我们赋予某个变数<code>null</code>这一个值。</p>
<p class="maodian"><a name="_lab2_0_6"></a></p><h3>1.7 Symbol</h3>
<p>最后一个JavaScript 原生值是<code>Symbol</code>，它是一个独特(unique) 值，多半会搭配物件一起使用，作为物件的键(key)。</p>
<div class="jb51code"><pre class="brush:js;">const sym = Symbol("ExplainYYDS");
const obj = { : "Interview Preps for Software Engineers" };
obj; // Interview Preps for Software Engineers
</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>2.JavaScript中的对象(objects)</h2>
<p>除了上述的七个原生值以外的存在，在JavaScript 当中都是对象。</p>
<p>JavaScript 圈有一个梗，数组是对象，函数是对象，对象是对象。</p>
<p class="maodian"><a name="_label2"></a></p><h2>3. 如何辨别一个变量的数据类型</h2>
<p class="maodian"><a name="_lab2_2_7"></a></p><h3>3.1 使用typeof判断变量的数据类型</h3>
<p>要辨别一个变数的数据类型，最常见的方式是透过<code>typeof</code>这个方法。举例来说<code>typeof</code>判断字符串。</p>
<div class="jb51code"><pre class="brush:js;">let greeting = "hi";
console.log(typeof greeting); // 'string'
</pre></div>
<p>typeof 的两个注意点</p>
<ul><li>typeof 原生值，返回的是该原生值的类型标识字符串，但是 typeof null 结果不是 null，而是object，这个历史遗留的 bug，修复成本太高了</li><li>typeof 数组的结果是 object ，tpyeof 函数的结果是 function</li></ul>
<div class="jb51code"><pre class="brush:js;">console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof function () {}); // function
</pre></div>
<p>补充<code>typeof</code>结果的表格</p>
Type of val	Result
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Object (native and does not implement [])	"object"
Object (native or host and does implement [])	"function"
Object (host and does not implement [])	Implementation-defined except may not be "undefined", "boolean", "number", or "string".
<p>因为 typeof 无法判断数组和对象，所以需要新的方法去判断某个变量是对象还是数组。</p>
<p class="maodian"><a name="_lab2_2_8"></a></p><h3>3.2 判断变量是对象还是数组</h3>
<p><code>Array.isArray()</code>是可以协助我们的方法。如果是数组，会回传<code>true</code>；但若是一般对象，则会回传<code>false</code>。举例来说：</p>
<div class="jb51code"><pre class="brush:js;">Array.isArray(); // true
Array.isArray({ foo: 123 }); // false
</pre></div>
<p>我们也可以透过<code>Object.prototype.toString()</code>的方法帮助我们辨别数组、函数与一般对象。</p>
<div class="jb51code"><pre class="brush:js;">const arr = ;
const fn = () =&gt; {
return 123;
};
const obj = { foo: 123 };

console.log(Object.prototype.toString.call(arr)); //
console.log(Object.prototype.toString.call(fn)); //
console.log(Object.prototype.toString.call(obj)); //
</pre></div>

查看完整版本: 浅析JavaScript判断变量数据类型有哪些方法