Array-Like Objects 詳解

什麼是 Array-Like Objects

顧名思義， 就是 類數組的對象。類數組對象具備數組的屬性length，可是沒有 數組 的一些方法, 好比 push。以下

const arrayLike = {
  0: "1",
  1: "2",
  length: 2
}

好比 arguments 就是一個 Array-Like Objects。

function sum() {
  console.log(arguments)
}

sum( 1, 2, 3 )

看起來是一個數組，但咱們能夠看見上面截圖中的 arguments 的隱式原型 arguments._ _proto__ 中的方法和數組確實不同的。
咱們來看看一個正常的數組的隱式原型是啥樣的。

截圖只展現了一部分，可是咱們能夠看見有明顯的不一樣，因此說 arguments是一個 類數組對象 Array-Like Objects。
此時咱們對 arguments 這個類數組對象進行 push 等數組的操做是會報錯的。

那麼咱們怎麼將 array-like 轉換成 array 呢？

Array-Like 轉 Array

方法一： 遍歷迭代

由於 Array-Like Objects 是有長度的，因此咱們能夠對其進行遍歷， 將其每個元素塞進新的數組

function sum() {
  let arr = []
  for(let i = 0; i < arguments.length; i++) {
    arr.push(arguments[i])
  }
  arguments = arr
  arguments.push(4) // 此時的 argument 已是數組了，能夠進行數組的 push 操做
  console.log(arguments) // [ 1, 2, 3, 4 ]
} 
sum( 1, 2, 3 )

方法二： 使用 Array.prototype.slice.call()

function sum() {
  arguments = Array.prototype.slice.call(arguments);
  //  arguments = [].slice.call(arguments);
  arguments.push(4) // 此時的 arguments 已是數組了，能夠進行數組的 push 操做
  console.log(arguments) // [ 1, 2, 3, 4 ]
} 
sum( 1, 2, 3 )

同理，使用 Array.prototype.slice.apply()、Array.prototype.slice.bind() 也是同樣的。

方法三： Array.from()

function sum() {
  arguments = Array.from(arguments);
  arguments.push(4); // 此時的 arguments 已是數組了，能夠進行數組的 push 操做
  console.log(arguments); // [ 1, 2, 3, 4 ]
} 

sum( 1, 2, 3 )

補充：
評論區小夥伴提出的 es6 解構也能實現，更簡潔優雅

function sum() {
  arguments = [ ...arguments];
  arguments.push(4); // 此時的 arguments 已是數組了，能夠進行數組的 push 操做
  console.log(arguments); // [ 1, 2, 3, 4 ]
} 

sum( 1, 2, 3 )