數(shù)據(jù)類型回顧

JavaScript 的數(shù)據(jù)類型大致分為兩類：原始類型和復(fù)雜類型

原始類型：

• undefined：未定義
• number：數(shù)字
• boolean：布爾值
• string：字符串
• null：空值
• symbol：符號(hào)(ES6 新增)
• bigint：大整數(shù)(ES2020 新增)

復(fù)雜類型：

• Object：對(duì)象
• Array：數(shù)組
• Function：函數(shù)
• Date：日期
• RegExp：正則表達(dá)式

類型判斷方法詳解

typeof 操作符

typeof 是最基礎(chǔ)且常用的類型判斷方法，使用簡(jiǎn)單，參閱 MDN 文檔

語(yǔ)法：typeof 后面跟一個(gè)值或表達(dá)式，返回一個(gè)字符串，表示操作數(shù)的類型

可能返回的數(shù)據(jù)類型為：undefined、boolean、number、string、object、function、symbol、bigint

// 原始類型判斷
typeof "hello"; // "string"
typeof 123; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof 123n; // "bigint"

// 引用類型判斷的局限性
typeof []; // "object"
typeof {}; // "object"
typeof null; // "object" (這是一個(gè)歷史遺留的bug)
typeof new Date(); // "object"
typeof /regex/; // "object"

typeof function () {}; // "function"

注意，typeof 操作符一般用于判斷原始類型，對(duì)于引用類型的判斷存在局限性：

• 對(duì)引用值的判斷有誤，一般會(huì)返回固定的字符串 object
• null 會(huì)被錯(cuò)誤的判斷為 object 類型

instanceof 操作符

instanceof 用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上，返回一個(gè)布爾值，參閱 MDN 文檔

也就是判斷一個(gè)實(shí)例對(duì)象是否屬于某個(gè)構(gòu)造函數(shù)

語(yǔ)法為

object instanceof constructor;

// object：實(shí)例對(duì)象
// constructor：構(gòu)造函數(shù)

比如下面的例子

const arr = [1, 2, 3];

console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true
console.log(arr instanceof Function); // false

一個(gè)構(gòu)造函數(shù)的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person("張三", 20);

console.log(person instanceof Person); // true

在這個(gè)例子中，實(shí)例對(duì)象 person 會(huì)通過(guò) __proto__ 屬性向上查找原型鏈，直到找到 Person.prototype 為止，如果找到則返回 true，如果找到頂部 null 都沒(méi)有找到，則返回 false

實(shí)例對(duì)象的 __proto__ 屬性指向構(gòu)造函數(shù)的 prototype 對(duì)象

注意，instanceof 操作符只能用于判斷引用類型，不能用于判斷原始類型

還存在一個(gè)隱患是：如果其原型鏈被更改，可能導(dǎo)致判斷不準(zhǔn)確

Object.prototype.constructor

除了 null 和 undefined 以外，所有引用類型都有 constructor 屬性，用于返回對(duì)象的構(gòu)造函數(shù)，參閱 MDN 文檔

我們繼續(xù)以 instanceof 章節(jié)的構(gòu)造函數(shù)示例來(lái)看：

所以，更新的圖示如下：

實(shí)例對(duì)象的 __proto__ 屬性指向構(gòu)造函數(shù)的 prototype 對(duì)象

在圖示中，person 的 __proto__ 會(huì)等于 Person.prototype，所以 person 實(shí)例對(duì)象上也有一個(gè) constructor 屬性

而且，無(wú)論一個(gè)變量是通過(guò)構(gòu)造函數(shù)方式還是字面量方式，都會(huì)有一個(gè) constructor 屬性

字面量方式在通過(guò)引擎解析時(shí)，JavaScript 后臺(tái)會(huì)創(chuàng)建一個(gè)相應(yīng)的原始包裝類型對(duì)象，暴露出操作原始值的各種方法

const name = "十五";
console.log(name.constructor === String); // true

const age = 18;
console.log(age.constructor === Number); // true

const arr = [1, 2, 3];
console.log(arr.constructor === Array); // true

基本上 constructor 屬性能夠判斷出除了 null 和 undefined 外的所有類型

Object.prototype.toString()

一個(gè)通用且準(zhǔn)確的類型判斷方法

Object.prototype 表示所有對(duì)象的原型對(duì)象，這個(gè)對(duì)象上擁有一個(gè) toString()方法，用于返回對(duì)象的字符串表示形式

然后搭配 call() 方法，用于改變方法內(nèi)部的 this 指向

call()：函數(shù)實(shí)例擁有的一個(gè)方法，傳入的第一個(gè)參數(shù)可以改變函數(shù)內(nèi)部的 this 指向

基本用法：

const toString = Object.prototype.toString;

const name = "十五";
const age = 18;

console.log(toString.call(name)); // [object String]
console.log(toString.call(age)); // [object Number]

針對(duì)性的類型判斷方法

Array.isArray()

Array.isArray() 方法用于判斷傳入的值是否是一個(gè)數(shù)組

const arr = [1, 2, 3];

console.log(Array.isArray(arr)); // true

Number.isNaN()

Number.isNaN() 方法用于判斷傳入的值是否為 NaN

NaN：Not a Number，無(wú)法表示為數(shù)字的值

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("十五")); // false
console.log(Number.isNaN(123)); // false

注意，全局的 isNaN() 與 Number.isNaN() 的區(qū)別在于前者會(huì)強(qiáng)制進(jìn)行類型轉(zhuǎn)換，后者則不會(huì)(全等判斷)

在實(shí)踐項(xiàng)目中的應(yīng)用

封裝判斷類型的工具函數(shù)

在真實(shí)的項(xiàng)目場(chǎng)景中，我們往往可以統(tǒng)一封裝一些工具函數(shù)，用于判斷類型

比如在 utils 文件夾下新建一個(gè) judge.js 文件，用于編寫一些判斷類型的工具函數(shù)

這里默認(rèn)你使用了 TypeScript

/**
 * 判斷是否為字符串
 * @param value 需要判斷的值
 * @returns 布爾值 | true 表示是字符串，false 表示不是字符串
 */
export const isString = (value: unknown): value is string => {
  return typeof value === "string";
};

/**
 * 通用且精確的類型判斷
 * @param value 需要判斷的值
 * @param type 類型
 * @returns 布爾值 | true 表示符合類型，false 表示不符合
 */
const isType = (value: unknown, type: string) => {
  return (
    Object.prototype.toString.call(value).slice(8, -1).toLowerCase() === type
  );
};

借助第三方庫(kù)

Lodash 是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)

它提供了許多有用的工具函數(shù)，包括類型判斷函數(shù)，如 isString、isNumber、isArray 等

總結(jié)

上面我們?cè)敿?xì)介紹了 JavaScript 中的數(shù)據(jù)類型判斷方法，包括 typeof、instanceof 、constructor 和 Object.prototype.toString()，你需要注意的是：

• 選擇合適的判斷方法

• 判斷原始類型時(shí)，優(yōu)先使用 typeof
• 判斷繼承關(guān)系時(shí)，使用 instanceof
• 需要通用、準(zhǔn)確的判斷方式時(shí)，使用 Object.prototype.toString.call()

• 實(shí)際項(xiàng)目場(chǎng)景下的應(yīng)用

• 考慮封裝工具函數(shù)
• 借助成熟的第三方庫(kù)，如 Lodash

以上就是JavaScript判斷數(shù)據(jù)類型的四種方式總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript判斷數(shù)據(jù)類型的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論