僞數組及其轉換爲真數組原理

僞數組及其轉換爲真數組原理

什麼是僞數組

定義：

1. 擁有length屬性和數值下標屬性。
2. 不具備數組所具備的方法。

僞數組是一個 Object，而真實的數組是一個 Array

常見的僞數組

• 參數數組：arguments
• DOM對象列表HTMLCollection()：好比經過document.getElementsByTagName獲得的列表
• jquery對象：好比$("div")

舉例

經過document.getElementsByTagName獲得的DOM對象列表是一個僞數組。

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
  <li>test4</li>
</ul>

const lis = document.getElementsByTagName('li');
console.log(lis); // HTMLCollection(4) [li, li, li, li]

• 僞數組是一個Object，而真實的數組是一個Array

console.log(lis instanceof Array);  // false
console.log(lis instanceof Object);  // true

• 擁有length屬性和數值下標屬性

console.log(lis[1]);  // <li>test2</li>
console.log(lis.length); // 4

• 僞數組沒有真實數組的方法

console.log(lis.forEach) //undefined

lis.forEach((ele) => console.log(ele))

真實數組的forEach()方法：

const ll = [1,2,3];
ll.forEach((ele) => console.log(ele))

Array.prototype.slice.call(lis)將僞數組轉換爲真數組

// Array.prototype.slice.call(lis)：將僞數組轉換爲真數組
  const lis2 = Array.prototype.slice.call(lis); // 至關於 lis.slice()
  console.log(lis2 instanceof Array);  //true
  console.log(lis2 instanceof Object);  //true
  console.log(lis2[1]);  // <li>test2</li>
  console.log(lis2.forEach);  // ƒ forEach() { [native code] }

原理

數組的slice()截取數組中指定部分的元素, 生成一個新的數組 [1, 3, 5, 7, 9], slice(0, 3)

// slice2()
Array.prototype.slice2 = function (start, end) {
  start = start || 0
  end = start || this.length
  const arr = []
  for (var i = start; i < end; i++) {
    arr.push(this[i])
  }
  return arr
}