有意思的前端——gogogo

1.一個有趣的類數組案例

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
複製代碼

爲何說是一個類數組的使用案例，咱們先來了解下類數組的概念以及判斷方式

類數組（ArrayLike）： 一組數據，由數組來存，可是若是要對這組數據進行擴展，會影響到數組原型，ArrayLike的出現則提供了一箇中間數據橋樑，ArrayLike有數組的特性， 可是對ArrayLike的擴展並不會影響到原生的數組。

devtools判斷源碼

/**
     * @param {?Object} obj
     * @return {boolean}
     */
    function isArrayLike(obj) {
      if (!obj || typeof obj !== 'object')
        return false;
      try {
        if (typeof obj.splice === 'function') {
          const len = obj.length;
          return typeof len === 'number' && (len >>> 0 === len && (len > 0 || 1 / len > 0));
        }
      } catch (e) {
      }
      return false;
    }
複製代碼

從源碼中咱們能夠了解到，一個object類型，具備splice函數方法，且有一個正整數length做爲屬性，就能夠斷定爲arraylike，能夠使用數組的函數方法。

上面案例輸出的答案是：Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]

緣由：obj執行push的時候，是會根據length來判斷追加的下標，當前length爲2，那麼push的數組下標從2開始，所以，當執行push（1），數組下標爲2的地方值爲1，push(2)，類數組下標爲3的地方值爲2。數組自己0,1兩個下標內沒有值，所以類數組內容是[undefined,undefinded,1,2]，輸出結果就是稀疏數組Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]。

若是將length改成0

var obj = {
    '2': 3,
    '3': 4,
    'length': 0,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
//Object(2) [1, 2, 2: 3, 3: 4, splice: ƒ, push: ƒ]
複製代碼