技術標籤：前端javascript面試js

在 Javascript 中什麼是偽陣列？如何將偽陣列轉化為標準陣列？

1、前言

​ 今天博主JavaScript高階進階學完了，於是在度娘上找了幾套面試題，發現這個題不知道怎麼答，並且感覺這道面試圖也挺經典的，所以拿出來跟大家一起學習一下，如果這真是面試題估計我就涼涼了，所以還請各位博友認真對待，那麼我們開始嘍！

2、什麼是偽陣列（NodeList）？

​ 偽陣列（NodeList），又稱類陣列，指無法直接呼叫陣列的方法，或期望length屬性有什麼特殊的行為，但仍可以使用對標準陣列遍歷的方法來遍歷它們，比如for迴圈。典型的是函式arguments

偽陣列的特徵：

1.	具有`length`屬性
2.	按索引方式儲存資料
3.	不具有陣列的方法

3、偽陣列轉換為標準陣列

​ 通過上面的講解，相信大家也已經知道了偽陣列，以及偽陣列的特徵，那麼在開發中，我們需要將偽陣列轉換為陣列來直接使用，那該怎麼辦呢？這裡給大家介紹兩套方案，如下：

方案1：

 window.onload = function() {
            function
 
 nodeList() {
               return Array.prototype.slice.call(arguments);
            }
            let arr = nodeList(1, 2, 3, 4, 5, 6, 7);
            arr.push(20);
            console.log(arr);
        }

分析：

1.	從這行code`Array.prototype.slice.call(arguments)`我們發現使用到了`call()`方法，`call()`方法是任何函式都具備的非繼承而來的方法，其作用是修改函式內的this指向
2.	`Array.prototype.slice`這行code是通過`Array`建構函式呼叫其原型物件中的`slice()`方法
3.	`slice(start,end)`方法可以從已有的陣列中返回選定的元素陣列
4.	`start`引數：必須，規定從何處開始選取。如果是負數，那麼它規定從陣列尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
5.	`end`引數：可選，規定從何處結束選取。該引數是陣列片段結束處的下標索引如果沒有指定該引數，那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數，那麼它規定的是從陣列尾部開始算起的元素。
6.	那麼`Array.prototype.slice.call(arguments)`的意思就是：通過`Array`陣列建構函式呼叫原型物件中的`slice()`方法，並通過`call()`方法改變其`slice()`方法的內部this指向，修改為`arguments`，即偽陣列物件。
7.	通過這樣的方法，我們就可以返回一個數組物件，這樣就將偽陣列轉換為標準陣列了
 

方案2：

​ 通過上面的方法將偽陣列轉換為標準陣列，對於還沒有學過原型物件的博友可能會有一點不知所云。不管沒關係，在 JavaScript ES6 中，Array建構函式為大家提供了一個方法，專門用於將偽陣列（類陣列）轉換為真正的陣列。

​ from()方法用於通過擁有length屬性的物件或可迭代的物件來返回一個數組。可能有一點繞，簡單來說就是，from()方法是將一個偽陣列物件或者可迭代物件轉換成一個正真的陣列。

瀏覽器支援：

語法格式：

Array.from(object,mapFunction,thisValue);

引數說明：

1.	`object`：必須，要轉換為陣列的物件。
2.	`mapFunction`：可選，陣列中每個元素要呼叫的函式。
3.	`thisValue`：可選，對映函式（mapFunction）中的this物件

window.onload = function() {
            function nodeList() {
                return Array.from(arguments);
            }
            let arr = nodeList(1, 2, 3, 4, 5, 6, 7);
            arr.push(20);
            console.log(arr);
        }

當然，除了這兩種方法肯定還有其他的方法，但是博主今天只學會了這兩種，所以非常抱歉。後期如果發現新的方法，將第一時間給大家分享。感謝您的捧場，祝您事業有成，工作順利！