理解javascript類數組

什麼是類數組

javascript中一些看起來像卻不是數組的對象，叫作類數組。也就是說，爲一些常規對象增長一些屬性能夠使其變成類數組對象。

類數組的特徵：

1. 有索引（數字）屬性和length屬性的對象
2. 不具備數組的方法。間接調用數組的一些方法，好比push()能夠動態的增加length的值。

實際上，類數組的定義只有一條，具備 length屬性。

舉個例子：

var array = ['name', 'age', 'sex'];//數組

var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}//類數組

javascript中常見的比較典型的類數組有兩個：arguments對象和一些DOM方法的返回值（如document.getElementsByTagName()）

類數組使用數組方法的兩種方式

類數組雖然和數組相似，可是不能直接使用數組的方法，能夠像使用數組同樣，使用類數組。

在ECMAScript5中，全部的數組方法都是通用的 。既然類數組對象沒有繼承Array.prototype，固然不能再類數組對象上直接調用數組方法。儘管如此，能夠使用Function.call方法間接調用；或者在類數組中自定義數組方法，使函數體指向Array.prototype中對應的方法體。

• 使用Function.call方法間接使用數組的方法

var a = {
   '0': 'a',
   '1': 'b',
   '2': 'c',
   '3': 'd',
   'length': 4
}//類數組對象

Array.prototype.join.call(a, '-') //"a-b-c-d"
Array.prototype.slice.call(a, 0) //["a", "b", "c", "d"] 真正的數組
Array.prototype.map.call(a, function(item){
   return item.toUpperCase()
}) //["A", "B", "C", "D"]

Array.prototype.push.call(a, '1','23')
console.log(a) //{0: "a", 1: "b", 2: "c", 3: "d", 4: "1", 5: "1", 6: "23", length: 7}

• 在類數組對象中添加數組的方法。經過對象的屬性名模擬數組的特性。

一道題目：

var obj = {
    '2': 'a',
    '3': 'd',
    'length': 2,
    'push': Array.prototype.push
}
obj.push('c');
obj.push('d');
console.log(obj)//{'2': 'c', '3': 'd', length: 2, push: f}

首先必定要明白push()方法的實現原理。在這裏，若是讓類數組強行調用push方法，則會根據length屬性值的位置進行屬性的擴充。

//push()`方法的實現原理
Array.prototype.push = function () {
  for(var i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i];
  }
  return this.length;
}

//類數組使用push方法, length屬性值設爲3
var arrayLike = {
    haha: '2rr',
    hehe: 'enen',
    length: 3,
    push : Array.prototype.push
}
arrayLike.push(34);
console.log(arrayLike);

//改變length屬性值
var arrayLike = {
    haha: '2rr',
    hehe: 'enen',
    length: 6,
    push : Array.prototype.push
}
arrayLike.push(34, 'hobby');
console.log(arrayLike);

打印結果：

將類數組轉化爲真正的數組

有時候處理類數組最好的辦法是將其轉換成真正的數組。

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)