js類陣列轉陣列方法(偏小白)

2021-10-04 13:54:47 字數 2841 閱讀 3033

類陣列(類似於乙個陣列的物件):是相當於乙個物件,裡面有陣列的值以及相應的屬性(length)。

類陣列本質上是乙個物件,使用物件模擬出來的乙個陣列,它用陣列下標作為物件屬性的鍵,陣列元素作為物件各字段的值。另外,類陣列物件還有乙個length屬性。除此之外不再有其它像push、pop等陣列屬性和方法。

var arrobj = 

for(var i = 0; i < arrobj.length; i++)

也許你真的和類陣列相遇過

它!就!是!------arguments

每個函式裡面都會存在乙個arguments屬性,它儲存著函式所傳入的實際引數。

console.log(usearguments(1, 2, 3, 4));   // 輸出10

// 定義函式時並沒有標明形參但是函式裡面依然可以通過arguments接收到實參

function usearguments()

return sum;

}

再如,我們平時用到的字串物件實際上也是乙個元素為單個字元的類陣列物件。

那麼類陣列是否可以坐穩陣列這把交椅?答案當然是no,存在即合理(指數組)。當我們需要對類陣列進行push、split、splice等原生陣列操作時,瞬間感到無能為力。「啥玩意兒!這類陣列還這麼倔???!」。

只要我們把類陣列物件裡面的字段乙個乙個取出來放到乙個陣列裡,就可以完成類陣列向陣列的轉化了。從而實現所需的陣列操作。

那麼接下來我們就來好好調教調教它,嗷~

首先我們知道陣列裡有乙個方法——slice(),它是用來獲取子陣列的乙個方法,有時候也常用來做陣列深拷貝的操作。通過這個方法,我們可以把類陣列調教為真正的陣列,大概思路如下:

呼叫(訪問)到slice()方法

將slice()方法裡的this物件替換成所要轉化的類陣列物件

那麼怎麼才能訪問到slice()呢?因為這個方法是存在於陣列裡的,所以訪問的方法大概有兩種:

實現起來的話就像這樣:

.slice();   // 方法一

array.prototype.slice(); // 方法二

// 方法二需要結合到原型鏈的概念,如果這裡有點懵建議先了解一下原型鏈

那麼訪問到了slice(),接下來實現第 2 點。

有小同學可能要冒問號了,為啥替換this物件就可以完美調教了呢??

我們來看一下slice()這個方法的大概實現原理:

array.prototype.slice = function(start,end)

return result;

}

引自

可以看到,方法裡面是對this進行操作,也就是說誰用它,誰就是這個this。

嘿嘿,這會兒我們可以想,只要想辦法把這個this換成類陣列,不就可以對類陣列進行操作了嗎?

吃完栗子之後,我們發現

通過引數,我們把函式裡面所要操作的ths物件給替換了

bind()執行完後還是乙個函式,所以需要加乙個()來執行bind返回的函式

我們再來乙個有後續引數的栗子

同樣從例子可以發現

除了第乙個引數,後續的引數只需完全照搬原來函式的引數

出第乙個引數obj外,後續引數傳入函式後和直接呼叫fn()本身沒什麼兩樣

首位呼應一下:這樣就達到了this的偷梁換柱,而不影響函式原來引數的效果(乾笑哈哈哈~)

害,總該結束了

現在結合前面所講的一堆,可以得出類陣列轉化成真陣列的方法應該如下:

var arrobj = 

// 以call為例,其它兩兄弟靈活使用

var way1 = .slice.call(arrobj); // 方法一

var way2 = array.prototype.slice.call(arrobj); // 方法二

囉嗦了那麼多,只為了能受惠於更多的小白,對於大佬們可以挑著看哈

謝謝捧場~~

js中反轉陣列方法 JS陣列中方法使用大全!!!

今天學到了陣列的使用方法 給大家分享一下!陣列源於五種型別undefined null boolean number和string。object型別 array型別 date型別 regexp型別 function型別 基本包裝型別 boolean型別 number型別和string型別 單體內建物...

js陣列方法

array.json 方法將陣列中所有元素都轉化為字串並連線在一起 預設逗號 返回生成的字串,原陣列不改變 例 var a 1 2,3 a.join 1,2,3 a.join 1 2 3 array.reverse 方法將陣列中的元素顛倒順序 返回逆序的陣列,原陣列改變 例 var a 1,2,3 ...

JS陣列方法

tostring var ary 1,2,3,4,5,6 var str ary.tostring console.log str console.log typeof str push 陣列尾部新增陣列 pop 從陣列尾部刪除乙個元素 unshift 在陣列的第乙個元素前面插入乙個或多個元素 sh...