最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript常用類型判斷的4種方法

 更新時間:2026年03月23日 08:35:24   作者:不甜情歌  
在JavaScript世界里,類型判斷就像給變量驗(yàn)明正身,只有摸清每個變量的身份,才能避免代碼里的烏龍事件,所以本文結(jié)合實(shí)操代碼給大家介紹了JavaScript類型判斷不用愁的4種方法,需要的朋友可以參考下

在JavaScript世界里,“類型判斷”就像給變量“驗(yàn)明正身”——只有摸清每個變量的“身份”,才能避免代碼里的“烏龍事件”。今天就結(jié)合實(shí)操代碼,把typeof、instanceof、Object.prototype.toString.call()、Array.isArray()這幾個方法講明白,新手也能輕松拿捏~

一、先搞懂:JS的兩種數(shù)據(jù)類型

在開始判斷之前,我們先明確JS的基礎(chǔ)分類,這是判斷類型的前提

1. 原始類型(基本類型)—— 不可再分的“最小單元”

原始類型是JS中最基礎(chǔ)的數(shù)據(jù)類型:

// 原始類型示例(你的代碼片段)
let n = 123;        // number(數(shù)字類型)
let s = 'hello';    // string(字符串類型)
let f = true;       // boolean(布爾類型)
let u = undefined;  // undefined(未定義類型)
let nu = null;      // null(空值類型)
let sy = Symbol(1); // Symbol(唯一標(biāo)識類型)
let big = 123123123n; // BigInt(大整數(shù)類型,解決普通數(shù)字精度問題)

2. 引用類型(復(fù)雜類型)—— 由原始類型組合而成

引用類型是“容器”,里面可以裝原始類型或其他引用類型:

// 引用類型示例(你的代碼片段)
let arr = [];               // Array(數(shù)組)
let obj = {};               // Object(普通對象)
let fn = function() {};     // Function(函數(shù))
let date = new Date();      // Date(日期對象)

關(guān)鍵區(qū)別:引用類型存的是“地址”(指針),而原始類型存的是“具體值”——這也是后續(xù)類型判斷出現(xiàn)差異的核心原因!

二、常用類型判斷方法詳解

下面結(jié)合代碼,逐一拆解4種常用判斷方法,優(yōu)缺點(diǎn)、使用場景一次性說清,附代碼驗(yàn)證和補(bǔ)充解釋~

1. typeof —— 最常用,但有“小盲區(qū)”

typeof是最基礎(chǔ)的判斷方法,用法超簡單:typeof 變量(或typeof(變量))??

typeof:判斷除null外的所有原始類型

console.log(typeof n);    // number
console.log(typeof(s));   // string
console.log(typeof f);    // boolean
console.log(typeof u);    // undefined
console.log(typeof sy);   // symbol
console.log(typeof big);  // bigint

typeof,原始類型里除了null,它都能精準(zhǔn)判斷

typeof的“盲區(qū)”:判斷引用類型+null的坑

console.log(typeof(nu));  // object(坑!明明是null)
console.log(typeof(arr)); // object(坑!明明是數(shù)組)
console.log(typeof(obj))  // object(正確,但不夠精準(zhǔn))
console.log(typeof(date)) // object(坑!明明是日期)
console.log(typeof(fn))   // function(唯一能正確判斷的引用類型)

為什么會這樣?

typeof是通過“二進(jìn)制編碼”判斷類型的:二進(jìn)制前三位是0的,會統(tǒng)一識別為object。

所有引用類型(數(shù)組、對象、日期等)的二進(jìn)制前三位都是0,所以typeof判斷它們都返回object;而null的二進(jìn)制全是0,也被誤判為object,這是JS的歷史遺留bug,至今沒修復(fù)~

2. instanceof —— 引用類型“專屬判斷器”

typeof搞不定引用類型,instanceof就登場了!它的用法是:變量 instanceof 構(gòu)造函數(shù),核心是“通過隱式原型鏈查找”判斷歸屬

function myinstanceof(L, R) {
  // 先排除原始類型(除了null,null在這里會被過濾)
  if (typeof(L) !== 'object' && typeof(L) !== 'function' || L == null) {
    return false
  }
  // 沿著隱式原型鏈(__proto__)一直往上找
  while (L.__proto__ !== null) { 
    // 如果找到構(gòu)造函數(shù)的原型(R.prototype),就返回true
    if (L.__proto__ === R.prototype) {
      return true
    }
    L = L.__proto__ // 沒找到,繼續(xù)往上找
  }
  return false // 找到最頂層(Object.prototype.__proto__ = null),仍沒找到,返回false
}

console.log(myinstanceof([], Array));  // true(數(shù)組是Array構(gòu)造的)
console.log(myinstanceof([], Object)); // true(數(shù)組的原型鏈最終指向Object)
console.log(myinstanceof(null, Object));// false(null不是對象,被提前過濾)

instanceof的“短板”:搞不定原始類型

比如let n = 123(number類型),用instanceof判斷會返回false,因?yàn)樵碱愋蜎]有原型鏈,無法通過原型查找判斷歸屬:

console.log(123 instanceof Number); // false(原始類型number,不是Number對象)
console.log(new Number(123) instanceof Number); // true(這是Number對象,屬于引用類型)

3. Object.prototype.toString.call(x) —— 全能判斷王

如果說typeof有盲區(qū),instanceof有短板,那這個方法就是“全能選手”,能精準(zhǔn)判斷所有類型??

核心原理

Object.prototype.toString.call(x)的執(zhí)行邏輯,你注釋里寫的很完整,我們補(bǔ)充得更易懂一點(diǎn):

  1. 調(diào)用Object.prototype上的toString方法(注意:不是變量自身的toString,比如數(shù)組的toString會返回字符串,而這個是Object的原生方法);
  2. 將括號里的x(也就是要判斷的變量),作為toString方法里的this值;
  3. 通過ToObject方法,將this值轉(zhuǎn)為對象(如果是原始類型,會自動包裝成對應(yīng)對象,比如123會變成Number對象);
  4. 獲取這個對象的[[class]]內(nèi)部屬性(這個屬性是JS內(nèi)部的,無法直接訪問,它的值就是創(chuàng)建這個對象的構(gòu)造函數(shù)名稱);
  5. 返回格式為“[object 構(gòu)造函數(shù)名稱]”的字符串,比如判斷字符串會返回“[object String]”。

實(shí)操演示

function getType(x) {
  const val = Object.prototype.toString.call(x); // 得到"[object 類型名]"
  const valType = val.slice(8, -1); // 截取字符串,去掉"[object "和"]",得到純類型名
  return valType;
}

// 測試所有類型,精準(zhǔn)無錯!
console.log(getType(n));    // Number(注意:首字母大寫,和typeof的返回值區(qū)分)
console.log(getType(s));    // String
console.log(getType(f));    // Boolean
console.log(getType(u));    // Undefined
console.log(getType(nu));   // Null(終于能正確判斷null了?。?
console.log(getType(sy));   // Symbol
console.log(getType(big));  // BigInt
console.log(getType(arr));  // Array
console.log(getType(obj));  // Object
console.log(getType(fn));   // Function
console.log(getType(date)); // Date

這個方法是唯一能精準(zhǔn)判斷null的方法,而且不管是原始類型還是引用類型,都能返回最準(zhǔn)確的類型名,日常開發(fā)里用它準(zhǔn)沒錯~

4. Array.isArray(x) —— 數(shù)組“專屬判斷”

雖然Object.prototype.toString.call(x)能判斷數(shù)組,但針對數(shù)組,還有一個更簡潔的方法:Array.isArray(x),原理和你寫的x.__proto__ === Array.prototype一致,都是判斷變量的原型是否是Array的原型。

console.log(Array.isArray(arr)); // true
console.log(Array.isArray([]));  // true
console.log(Array.isArray({}));  // false

小技巧:如果只是判斷是否是數(shù)組,用Array.isArray(x)比toString方法更簡潔,性能也更好~

三、總結(jié):不同場景該用哪個方法?

怕記混?一張表格搞定,直接對號入座~

判斷場景推薦方法備注
快速判斷原始類型(除null)typeof簡單高效,新手首選
判斷引用類型(數(shù)組、函數(shù)、日期等)instanceof / Object.prototype.toString.call(x)instanceof適合判斷“是否屬于某個構(gòu)造函數(shù)”,toString適合精準(zhǔn)判斷類型
判斷nullObject.prototype.toString.call(x) / x === nulltypeof會誤判,必須用這兩種方法
判斷數(shù)組Array.isArray(x)最簡潔、最高效
需要精準(zhǔn)判斷所有類型(通用場景)Object.prototype.toString.call(x)全能選手,無盲區(qū)

看到這里,相信你已經(jīng)搞懂JS類型判斷啦!其實(shí)核心就是分清“原始類型”和“引用類型”,再根據(jù)場景選對方法,以后寫代碼,再也不用為“變量是什么類型”發(fā)愁啦!

以上就是JavaScript常用類型判斷的4種方法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript類型判斷方法的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論

胶南市| 西昌市| 岢岚县| 平南县| 丰顺县| 唐山市| 石楼县| 华亭县| 皮山县| 东源县| 怀集县| 南京市| 米泉市| 合作市| 浦江县| 金昌市| 砀山县| 凤冈县| 丹江口市| 杭锦后旗| 翁源县| 泊头市| 宜黄县| 永州市| 察雅县| 朔州市| 中牟县| 醴陵市| 墨竹工卡县| 临洮县| 泸定县| 洛阳市| 天津市| 乌苏市| 日土县| 栾城县| 洛南县| 常宁市| 东乌| 双柏县| 竹山县|