首頁 > web前端 > 前端問答 > es6怎麼判斷一個變數是否為數組

es6怎麼判斷一個變數是否為數組

青灯夜游
發布: 2023-01-18 18:17:21
原創
1408 人瀏覽過

判斷方法:1、利用Array物件的isArray()函數來判斷變數是不是數組,語法“Array.isArray(obj)”,如果是數組傳回true,否則傳回false。 2.透過「Object.prototype.toString()」來判斷,語法「Object.prototype.toString.apply(a) === '[object Array]'」。

es6怎麼判斷一個變數是否為數組

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

JS的弱型機制導致判斷變數類型是初級前端開發者面試時的必考題,一般我都會將其作為考察候選人第一題,然後基於此展開。

在ES5中判斷變數是否為陣列

#在ES5中,我們至少有以下5種方式去判斷一個值是否數組:

var a = []; 
// 1.基于instanceof 
a instanceof Array; 
// 2.基于constructor 
a.constructor === Array; 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 
// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';
登入後複製

以上,除了Object.prototype.toString外,其它方法都無法正確判斷變數的型別。

要知道,程式碼的運作環境十分複雜,一個變數可能使用渾身解數去迷惑它的創造者。且看:

var a = {
    __proto__: Array.prototype
}; 
// 分别在控制台试运行以下代码 
// 1.基于instanceof 
a instanceof Array; // => true 
// 2.基于constructor 
a.constructor === Array; // => true 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); // => true 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; // => true
登入後複製

以上,4種方法將全部回傳true,為什麼呢?我們只是手動指定了某個對象的__proto__屬性為Array.prototype,便導致了該對象繼承了Array對象,這種毫不負責任的繼承方式,使得基於繼承​​的判斷方案瞬間土崩瓦解。

不僅如此,我們還知道,Array是堆數據,變數指向的只是它的引用位址,因此每個頁面的Array物件所引用的位址都是不一樣的。 iframe中宣告的數組,它的建構子是iframe中的Array物件。如果在iframe宣告了一個陣列x,將其賦值給父頁面的變數y,那麼在父頁面使用y instanceof Array ,結果一定是false的。而最後一種回傳的是字串,不會有引用問題。實際上,多頁面或系統之間的互動只有字串能夠暢行無阻。

在ES6中判斷變數是否為陣列

#鑑於陣列的常用性,在ES6中新增了Array.isArray方法,使用此方法判斷變數是否為數組,則非常簡單,如下:

Array.isArray([]); // => true 
Array.isArray({0: 'a', length: 1}); // => false
登入後複製

實際上,透過Object.prototype.toString去判斷一個值的型別,也是各大主流函式庫的標準。因此Array.isArray的polyfill通常長這樣:

if (!Array.isArray){ 
    Array.isArray = function(arg){ 
        return Object.prototype.toString.call(arg) === '[object Array]'; 
    }; 
}
登入後複製

【相關推薦:javascript學習教學

以上是es6怎麼判斷一個變數是否為數組的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板