理解javascript類數組

yzzz 發布于2019-08-22 15:01 / 2296人閱讀

摘要：也就是說，為一些常規對象增加一些屬性可以使其變成類數組對象。實際上，類數組的定義只有一條，具有屬性。在中，所有的數組方法都是通用的。

什么是類數組

javascript中一些看起來像卻不是數組的對象，叫做類數組。也就是說，為一些常規對象增加一些屬性可以使其變成類數組對象。

類數組的特征：

有索引（數字）屬性和length屬性的對象

不具有數組的方法。間接調用數組的一些方法，比如push()可以動態的增長length的值。

實際上，類數組的定義只有一條，具有 length屬性。

舉個例子：

var array = ["name", "age", "sex"];//數組

var arrayLike = {
    0: "name",
    1: "age",
    2: "sex",
    length: 3
}//類數組

javascript中常見的比較典型的類數組有兩個：arguments對象和一些DOM方法的返回值（如document.getElementsByTagName()）

類數組使用數組方法的兩種方式

類數組雖然和數組類似，但是不能直接使用數組的方法，可以像使用數組一樣，使用類數組。

在ECMAScript5中，所有的數組方法都是通用的。既然類數組對象沒有繼承Array.prototype，當然不能再類數組對象上直接調用數組方法。盡管如此，可以使用Function.call方法間接調用；或者在類數組中自定義數組方法，使函數體指向Array.prototype中對應的方法體。

使用Function.call方法間接使用數組的方法

var a = {
   "0": "a",
   "1": "b",
   "2": "c",
   "3": "d",
   "length": 4
}//類數組對象

Array.prototype.join.call(a, "-") //"a-b-c-d"
Array.prototype.slice.call(a, 0) //["a", "b", "c", "d"] 真正的數組
Array.prototype.map.call(a, function(item){
   return item.toUpperCase()
}) //["A", "B", "C", "D"]

Array.prototype.push.call(a, "1","23")
console.log(a) //{0: "a", 1: "b", 2: "c", 3: "d", 4: "1", 5: "1", 6: "23", length: 7}

在類數組對象中添加數組的方法。通過對象的屬性名模擬數組的特性。

一道題目：

var obj = {
    "2": "a",
    "3": "d",
    "length": 2,
    "push": Array.prototype.push
}
obj.push("c");
obj.push("d");
console.log(obj)//{"2": "c", "3": "d", length: 2, push: f}

首先一定要明白push()方法的實現原理。在這里，如果讓類數組強行調用push方法，則會根據length屬性值的位置進行屬性的擴充。

//push()`方法的實現原理
Array.prototype.push = function () {
  for(var i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i];
  }
  return this.length;
}

//類數組使用push方法, length屬性值設為3
var arrayLike = {
    haha: "2rr",
    hehe: "enen",
    length: 3,
    push : Array.prototype.push
}
arrayLike.push(34);
console.log(arrayLike);

//改變length屬性值
var arrayLike = {
    haha: "2rr",
    hehe: "enen",
    length: 6,
    push : Array.prototype.push
}
arrayLike.push(34, "hobby");
console.log(arrayLike);

打印結果：

將類數組轉化為真正的數組

有時候處理類數組最好的辦法是將其轉換成真正的數組。

var arrayLike = {0: "name", 1: "age", 2: "sex", length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

云服務器 GPU云服務器 javascript理解如何理解javascript 深入理解javascript 數組排序類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93093.html

深入理解JavaScript類數組

摘要：但是，我們可以借用類數組方法不難看出，此時的在調用數組原型方法時，返回值已經轉化成數組了。很多時候，深入看看源代碼也會讓你對這個理解的更透徹。的前端樂園原文鏈接深入理解類數組起因寫這篇博客的起因，是我在知乎上回答一個問題時，說自己在學前端時把《JavaScript高級程序設計》看了好幾遍。于是在評論區中，出現了如下的對話：showImg(https://segmentfault.c...

Towers 2019-08-19 18:16 評論0 收藏0
類數組對象轉換為數組對象的簡單理解

摘要：將對象轉換為數組對象的限制不知道現在還是否需要考慮這一點之前的版本將實現為對象而非對象，對象不能直接調用方法，因此需要采取其他方式轉化。關于類數組對象 JavaScript中有一些著名的類數組對象，它們看起來很像數組：擁有length屬性元素按序保存在對象中，可以通過索引訪問但實際和數組又不是一回事：沒有數組的很多方法也會有數組沒有的方法 (e.g. NodeLis...

wayneli 2019-08-19 18:39 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
理解數組，對象，類數組對象

摘要：角度實例對象沒有屬性，只有構造函數才有屬性，也就是說構造函數本身保存了對屬性的引用。。的屬性變量和屬性對象將會被該對象引用的構造函數所創建的對象繼承那么將會繼承屬性函數。本文章旨在講解數組，對象，類數組對象之間的聯系。但會穿插一些其他的相關知識。首先理解它們的概念：1、數組（1）什么是數組：簡而言之就是一組有序的數據集合。它的定義方法有三種。 var arr=[值1,值2,值3]; ...

wangshijun 2019-08-21 17:47 評論0 收藏0
通俗的方式理解動態類型，靜態類型；強類型，弱類型

摘要：不允許隱式轉換的是強類型，允許隱式轉換的是弱類型。拿一段代碼舉例在使用調用函數的時候會先生成一個類模板運行時生成，執行的時候會生成類模板，執行的時候會生成類模板。 0 x 01 引言今天和一個朋友討論 C++ 是強類型還是弱類型的時候，他告訴我 C++ 是強類型的，他和我說因為 C++ 在寫的時候需要 int，float 等等關鍵字去定義變量，因此 C++ 是強類型的，我告訴他 C+...

周國輝 2019-08-22 13:40 評論0 收藏0