iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 18

JS 18 - 陣列也有贗品?如何辨識偽造的陣列?

  • 分享至 

  • xImage
  •  

大家好!

昨天我們建立了看似陣列的物件,其實它就是接下來要介紹的偽陣列物件(Array-like Object)。
我們進入今天的主題吧!


偽陣列

因為偽陣列不是真正的陣列,因此定義也是見仁見智,但是一般都有下列特性:

typeof arrarlike; // 'object'
typeof arraylike.length; // 'number'

對了,既然有 ArrayisArray 這個靜態方法,那麼有沒有辨識偽陣列的方法呢?
這是當然的,實作就像這樣:

Felix.isArrayLike = function (item) {
    return (
        Array.isArray(item) || (
            !!item &&
            typeof item === 'object' &&
            typeof item.length === 'number' && (
                item.length === 0 || (
                    item.length > 0 &&
                    item.length - 1 in item
                )
            )
        )
    );
};

試試看:

/* 偽陣列就是偽陣列 */
Felix.isArrayLike(new Felix('body')); // true

/* 陣列也屬於偽陣列 */
Felix.isArrayLike([]); // true

/* 物件不屬於偽陣列 */
Felix.isArrayLike({}); // false

偽陣列的 forEach 方法

Array 有一個 forEach 靜態方法,用途就像是用迴圈將陣列的元素逐一操作。
偽陣列就沒有這個方法了,但是我們也能靠自己實作一個:

Felix.forEach = function (obj, callback, args) {
    var i;
    if (this.isArrayLike(obj)) {
        for (i = 0; i < obj.length; i++) {
            if (callback.apply(obj[i], args) === false) break;
        }
    } else {
        for (i in obj) {
            if (callback.apply(obj[i], args) === false) break;
        }
    }
    return obj;
};

如果是陣列或偽陣列,就將元素遍歷一次(不含 length);如果是物件,則將所有屬性都遍歷一次。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 17 - 繼承和瀏覽器的小問題
下一篇
JS 19 - 我要一份能控制網頁內容的三人全家桶!
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言