判斷一個對象是不是數組，有幾種辦法？

Cruise_Chan 發布于2019-08-22 15:10 / 3035人閱讀

摘要：這是一個出現過無數次的話題，這里再次重寫僅作為個人的學習筆記，謝謝觀看。

這是一個出現過無數次的話題，這里再次重寫僅作為個人的學習筆記，謝謝觀看。

0、typeof

typeof 運算符的主要作用就是用來檢測數據的類型，一般情況下我們都是使用它來判斷數據類型，但是這里，我把typeof 放在0的位置，因為 typeof 不能檢測到數組類型！typeof 所能識別的類型只有原始類型（Undefined，Null，Boolean，Number，String，Symbol ）以及 function 和 object。

需要注意的是null，null所檢測出來的結果是"object"，因為在js中，null除了作為空引用的存在，它也是對象整個原型鏈上最頂端的存在，即

Object.prototype.__proto__ === null;//true

其他使用typeof的場景：

// Numbers
typeof 3.14 === "number";
typeof Math.LN2 === "number"; 
typeof Infinity === "number"; 
typeof NaN === "number"; //盡管NaN是"Not-A-Number"的縮寫

// Strings
typeof "bla" === "string"; 
typeof (typeof 1) === "string"; //typeof總是返回一個字符串

// Booleans
typeof true === "boolean";

// Symbols
typeof Symbol() === "symbol";
typeof Symbol.iterator === "symbol";

// Undefined
typeof undefined === "undefined";

// null
typeof null === "object";//從一開始出現JavaScript就是這樣的

// function
typeof function(){} === "function";
typeof class C{} === "function"

// Objects
typeof {a:1} === "object";

// 下面的結果是什么？
typeof new Boolean(true) === "object";
typeof new Number(1) === "object";
typeof new String("abc") === "object";
//new 所創建的都是對象，賦值給變量是執行了內部valueOf()或者toString()函數

最后，typeof不能檢測到數組類型！

1、驗證原型對象:

從原型鏈上尋找（認祖歸宗）

1、Object.getPrototypeOf(obj) == Array.prototype

getPrototypeOf: 這是Object自帶的一個API，作用是獲取一個對象的原型對象

2、var bool = Array.prototype.isPrototypeOf(obj)

每個對象都有一個isPrototypeOf的API，繼承自Object.prototype，用來判斷father（Array）是否是child（obj）的父對象

2、驗證構造函數:

從構造函數上判斷（它的親娘）

1、obj.constructor == Array

構造函數的prototype指向原型對象，同時，原型對象有constructor指回構造函數對象，constructor只在原型對象上有

2、var bool = obj instanceof Array

instance: 判斷對象（obj）是否由構造函數（Array）創建出來

這種方法有一個問題，就是驗證不夠嚴格。即使對象創建時不是使用數組創建的，但是只要原型鏈上有數組類型，也認為是數組，如下面一段代碼：

function Test(){}
Test.prototype = Array.prototype;
let test = new Test();
test instanceof Array;//true

3、檢查內部屬性class + call或apply:

這個class不是es6中對象聲明的class

這個class是每個對象中記錄對象創建時使用的類型的屬性，一旦對象被創建，class屬性就無法被修改！

獲得class的唯一的辦法就是調用Object.prototype中的toString()方法

輸出結果有"[object Object]"，"[object Function]"等

問題: 幾乎所有內置對象的原型對象都重寫了Object中的toString方法，所有內置對象的子對象，都無法直接調到Object的toString。

let arr = [1];
arr.toString();//"1"
let date = new Date();
date.toString();//"Wed Mar 07 2018 16:22:16 GMT+0800 (中國標準時間)"

雖然直接使用不行，但是我們可以利用js的call和apply函數來解決這個問題

Object.prototype.toString.call(obj)=="[object Array]"

使用這個方法判斷其他類型：

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

4、ES5中的API：Array.isArray(obj)

這是ES5出的一個API，專門用來判斷一個對象是不是數組的，所以，看到這里有沒有感覺前面都白看了....

他的用法也很簡單：

var arr = [1,2,3,4];
Array.isArray(arr);//true

寫在最后

如果文中有什么錯誤的地方，還請大家給予指出，另外大家如果還有什么別的方法的話，也可以在評論區寫下或私信我，大家集思廣益，相互學習，共同進步。

云服務器 GPU云服務器網絡專線有幾種負載均衡有幾種程序語言有幾種深度學習有幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93237.html

2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

JeOam 2019-08-02 14:28 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

QLQ 2019-08-26 13:33 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0