亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

理解javascript類數(shù)組

yzzz / 2365人閱讀

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

什么是類數(shù)組

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

類數(shù)組的特征：

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

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

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

舉個(gè)例子：

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

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

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

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

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

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

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

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

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ù)組對(duì)象中添加數(shù)組的方法。通過(guò)對(duì)象的屬性名模擬數(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()方法的實(shí)現(xiàn)原理。在這里，如果讓類數(shù)組強(qiáng)行調(diào)用push方法，則會(huì)根據(jù)length屬性值的位置進(jìn)行屬性的擴(kuò)充。

//push()`方法的實(shí)現(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í)候處理類數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93093.html

相關(guān)文章

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

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

    Towers 評(píng)論0 收藏0

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

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

    wayneli 評(píng)論0 收藏0

  • JS程序

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

    melody_lql 評(píng)論0 收藏0

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

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

    wangshijun 評(píng)論0 收藏0

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

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

    周國(guó)輝 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<