將偽數組轉化為真數組的幾種方法

什么是偽數組?

1.具有length屬性，可以獲取長度。
2.具有索引，可以通過遍歷獲取所有元素。
3.不可以使用數組的內置方法和屬性。

 

為什么偽數組不能使用數組的內置方法和屬性呢？我們不妨打印看一下偽數組在控制台的輸出：

 

 

 

 

 

我們可以看到偽數組的__proto__指向的是一個Object對象，當然不能使用數組的內置方法和屬性了。

 

我們再來看看真數組在控制台的輸出：

 

 

 

 

可以看到，真數組的__proto__指向的是一個Array數組。

常見的偽數組

1.函數的內置對象arguments，它是所有實參組成的偽數組。
2.DOM對象組成的偽數組，通過document.querySelectorAll等獲得的dom對象列表。
3.jQuery對象組成的偽數組，通過$('選擇器')獲取到的包含dom對象列表和jQuery方法的jQuery對象。

將偽數組轉化為真數組的幾種方法

方法一：最簡單的，先准備一個新的空數組，然后遍歷偽數組，將偽數組中的值通過索引逐個添加到新數組當中。

let newArr = [];
for(let i = 0; i < arguments.length; i++){
  newArr[i] = arguments[i];
}

　　

方法二：利用擴展運算符(...)將偽數組轉化為真數組 - ES6語法

let divs = document.querySelectorAll('div');
let arr = [...divs];

 

方法三：利用Array的原型對象的slice方法，配合call()方法修改slice中this指向

let arr = [].slice.call(divs);

 

方法四：利用Array.from方法 - ES6

let arr = Array.from(divs);

 

注意：Array.from方法是從一個類似數組或可迭代對象創建一個新的，淺拷貝的數組實例。(MDN)
這里簡單的說一下淺拷貝和深拷貝：
淺拷貝只會復制對象的第一層數據，如果是其他層，復制的是地址。
深拷貝會將整個對象的數據復制給新對象。

也就是說，用Array.from方法返回的新數組是一個淺拷貝數組，如果改變了新數組當中深層次對象的數據，那么原來的對象當中的數據也會跟着被修改。
舉個例子：

let arrayLike = {
  '0': '1',
  '1': '2',
  '2': {
    name: 'pink',
    sex: {
      nan: '男',
      nv: '女'
    }
  },
  'length': 3
}
let ary = Array.from(arrayLike);
console.log(ary);
//修改第一層的數據
ary[0] = '10';
//我們修改一下新數組深層的數據
ary[2].name = 'green';
ary[2].sex.nan = 'nan';
//再打印一下arrayLike，看里面深層數據是否發生了改變
console.log(arrayLike);

 

 

 

打印結果如圖：

 

 

 

 

可見當我們修改了ary數組的第一層數據時，arrayLike沒有改變，但是當我們修改ary數組深層數據的時候，arrayLike里深層的數據也相應的改變了，這是因為淺拷貝時深層數據是拷貝的地址，所以新數組和原來的偽數組深層的數據，在內存當中的地址是一樣的，修改新數組的深層數據，當然也會修改原偽數組的深層數據。

作者：火星的天秤座
鏈接：https://www.jianshu.com/p/8e1660a2162c
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。