成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

理解javascript類數(shù)組

yzzz / 2335人閱讀

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

什么是類數(shù)組

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

類數(shù)組的特征：

有索引（數(shù)字）屬性和length屬性的對象

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

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

舉個例子：

var array = ["name", "age", "sex"];//數(shù)組

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

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

類數(shù)組使用數(shù)組方法的兩種方式

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

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

使用Function.call方法間接使用數(shù)組的方法

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

Array.prototype.join.call(a, "-") //"a-b-c-d"
Array.prototype.slice.call(a, 0) //["a", "b", "c", "d"] 真正的數(shù)組
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}

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

一道題目：

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()方法的實現(xiàn)原理。在這里，如果讓類數(shù)組強行調(diào)用push方法，則會根據(jù)length屬性值的位置進行屬性的擴充。

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

//類數(shù)組使用push方法, length屬性值設(shè)為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);

打印結(jié)果：

將類數(shù)組轉(zhuǎn)化為真正的數(shù)組

有時候處理類數(shù)組最好的辦法是將其轉(zhuǎn)換成真正的數(shù)組。

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)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93093.html

相關(guān)文章

  • 深入理解JavaScript類數(shù)組

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

    Towers 評論0 收藏0

  • 類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的簡單理解

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

    wayneli 評論0 收藏0

  • JS程序

    摘要：設(shè)計模式是以面向?qū)ο缶幊虨榛A(chǔ)的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計模式必須要先搞懂面向?qū)ο缶幊?，否則只會讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識只有分享才有存在的意義。 是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

    melody_lql 評論0 收藏0

  • 理解數(shù)組，對象，類數(shù)組對象

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

    wangshijun 評論0 收藏0

  • 通俗的方式理解動態(tài)類型，靜態(tài)類型；強類型，弱類型

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

    周國輝 評論0 收藏0

發(fā)表評論

0條評論

yzzz

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<