javascript中typeof的總結(jié)

先要給出的當(dāng)然是這張值表：

從這張表可以看出，如果需要用typeof來判斷類型，只有‘boolean’、‘number’、’string’、‘function’三種類型是靠譜兒的，用于判斷其他類型會(huì)出現(xiàn)不可預(yù)期的錯(cuò)誤~請謹(jǐn)慎使用~

針對typeof的軟肋，我們有一些比較好的解決方式：

判斷Array 要使用Array.isArray(arr)；

判斷null請使用myVar === null；

判斷某個(gè)全局變量是否存在用typeof window.myVar=== ‘undefined’；

函數(shù)內(nèi)部判斷某個(gè)變量是否存在用typeof myVar === ‘undefined’。

但是通過以上解決方法，我們還是沒有辦法判斷 typeof myVar === ‘undefined’的時(shí)候具體是定義還是未定義

于是我們想出了另外一種解決方案，可以封裝成一個(gè)函數(shù)：

本文中，將簡述JavaScript類型系統(tǒng)和數(shù)據(jù)類型，以及如何使用typeof操作符執(zhí)行類型檢查。
還講解了使用typeof操作符進(jìn)行某些數(shù)據(jù)類型檢查是不完善的，并介紹其他幾種類型檢查的方法。

每種編程語言都有自己的類型系統(tǒng)和數(shù)據(jù)類型，但各種編程語言的數(shù)據(jù)結(jié)構(gòu)常有不同之處。使用JavaScript時(shí)，其引擎會(huì)在腳本執(zhí)行期間隱式強(qiáng)制轉(zhuǎn)換執(zhí)行值的類型。類型檢查對于編寫可預(yù)測的JavaScript程序是非常有必要的。

JavaScript中的typeof操作符就是用于基礎(chǔ)的類型檢查
typeof操作符返回字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型（來自MDN）

一、JavaScript的數(shù)據(jù)類型

在此之前，需要了解JavaScript有哪些數(shù)據(jù)類型，最新標(biāo)準(zhǔn)定義了8種數(shù)據(jù)類型：

7種原始類型：
Boolean
Null
Undefined
Number
String
BigInt
Symbol
其他為引用類型：
Object
數(shù)組array()、函數(shù)function()、正則表達(dá)RegExp特殊的物體：
array是一種特殊的對象，它是一個(gè)有序的編號(hào)值集合
function是一種特殊類型的對象，具有與之關(guān)聯(lián)的可執(zhí)行腳本塊有關(guān)

JavaScript還有幾個(gè)對象類構(gòu)造函數(shù)，用于創(chuàng)建其他類型的對象：

Date—用于創(chuàng)建日期對象
RegExp—用于創(chuàng)建正則表達(dá)式
Error—用于創(chuàng)建JavaScript錯(cuò)誤

二、typeof功能

1、語法

typeof使用一元操作符（只需要一個(gè)操作數(shù)）的計(jì)算結(jié)果作為其操作數(shù)的類型結(jié)果字符串。

另一種替代語法就是將操作數(shù)放入括號(hào)中使用，這種對JavaScript表達(dá)式返回的值進(jìn)行類型檢查非常有用。

typeof 參數(shù)
typeof(參數(shù))

參數(shù)：一個(gè)表示對象或原始值的表達(dá)式，其類型將被返回

typeof "sueRimn"; // 'string'
typeof 22; // 'number'
typeof NaN; // 'number'
typeof Infinity; // 'number'
typeof true; // 'boolean'
typeof false; // 'boolean'
typeof [1, 2]; // 'object'
typeof {age: 22}; // 'object'
typeof null; // 'object'
typeof undefined; // 'undefined' 
typeof String; // 'function'
typeof Boolean; // 'function' 
typeof Number; // 'function'
typeof Object; // 'function'
typeof Function; // 'function'
typeof person; // 'function'

undefined是它自己的JavaScript類型

在ES6之前，typeof不管操作數(shù)是否聲明，總是返回一個(gè)字符串，即對于未聲明的標(biāo)識(shí)符，總是返回而不是拋出錯(cuò)誤。

在ES6中，使用let或const聲明的塊級(jí)作用域變量在初始化之前與typeof操作符使用，將拋出錯(cuò)誤。

原因是：塊級(jí)作用域變量在被初始化之前一直保留在臨時(shí)死區(qū)。

console.log(typeof name === 'undefined'); // ReferenceError
const name = 'sueRimn';

2、一般類型檢查

在JavaScript中執(zhí)行類型檢查主要使用typeof操作符

function add(a, b) {
 if (typeof a !== 'number' || typeof b !== 'number') {
 throw '參數(shù)必須是數(shù)值'
 }
 return a + b;
}

以下是對類型檢查的簡單摘要：

檢測值是否存在在不同環(huán)境是這樣的：

if (typeof window !== 'undefined') {
 // 瀏覽器
};
if (typeof process !== 'undefined') {
 // Node.js
}
if (typeof $ !== 'undefined') {
 // jQuery 
}

3、其他類型檢查

對于某些值需要額外的類型檢查才可以區(qū)分，例如null和[]在使用typeof操作符執(zhí)行type-check時(shí)都是"object"類型，但是區(qū)分它們需要額外的操作。

一些其他數(shù)據(jù)類型值檢查方法：

使用instanceof
檢查對象的constructor屬性
使用對象的toString()方法檢查對象類

（1）檢測是否為空

使用typeof操作符檢查值是否為空并不好，檢查值是否為空的最佳方法是對值與關(guān)鍵字進(jìn)行嚴(yán)格相等比較。

以上代碼呈現(xiàn)的結(jié)果是不一樣的，所以使用嚴(yán)格相等操作符是非常重要的。

（2）檢測NaN

任何涉及NaN的算術(shù)運(yùn)算都將對NaN求值，如果想為任何形式的算術(shù)運(yùn)算使用值，那么需要確保該值不是NaN。

使用typeof操作符檢查NaN值是否返回"number"。要檢查NaN值，可以使用全局函數(shù)isNaN()，或者ES6中的Number.isNaN()函數(shù):

NaN值非常特殊，通過比較，它永遠(yuǎn)不等于任何其他值，包括它自己:

可以使用以下方法在非ES6環(huán)境下檢測NaN：

function isNan(value) {
 return value !== value;
}

最后，你可以利用ES6中的Object.is()函數(shù)來測試值是否為NaN。

以下函數(shù)作用是檢查兩個(gè)值是否相同：

function isNan(value) {
 return Object.is(value, Number.NaN);
}

（3）檢測數(shù)組

使用typeof檢查數(shù)組將返回object。這里介紹幾種檢測數(shù)組的方法，并進(jìn)行對比：

使用constructor屬性（不推薦）

function isArray(value) {
 return typeof value == 'object' && value.constructor === Array;
}

使用instanceof（不推薦，因?yàn)閷ο蟮脑涂梢愿模?/li>

function isArray(value) {
 return value instanceof Array;
}

使用Object.prototype.toString()（推薦，類似于ES6 Array.isArray()）

function isArray(value) {
 return Object.prototype.toString.call(value) === '[object Array]';
}

object.prototype.tostring()方法對于檢查任何JavaScript值的對象類型都非常有用

使用ES6 Array.isArray()

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實(shí)現(xiàn)延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造。也就是說，腳本會(huì)被延遲到整個(gè)頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會(huì)在頁面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁面的加載。

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面，而放入body中，則會(huì)按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會(huì)偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

在線咨詢

上一篇：11 個(gè)可能你沒見過，但非常特別的 HTML 標(biāo)簽
下一篇："決勝移動(dòng)端：H5頁面如何一鍵禁用雙擊放大、雙指縮放與整體

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商