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

資訊專欄INFORMATION COLUMN

JavaScript深入之類數(shù)組對(duì)象與arguments

AlienZHOU / 3319人閱讀

摘要：在客戶端中，一些方法等也返回類數(shù)組對(duì)象。對(duì)象接下來重點(diǎn)講講對(duì)象。在函數(shù)體中，指代該函數(shù)的對(duì)象。下一篇文章深入之創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)深入系列深入系列目錄地址。

JavaScript深入系列第十三篇，講解類數(shù)組對(duì)象與對(duì)象的相似與差異以及arguments的注意要點(diǎn)
類數(shù)組對(duì)象

所謂的類數(shù)組對(duì)象:

擁有一個(gè) length 屬性和若干索引屬性的對(duì)象

舉個(gè)例子：

var array = ["name", "age", "sex"];

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

即便如此，為什么叫做類數(shù)組對(duì)象呢？

那讓我們從讀寫、獲取長(zhǎng)度、遍歷三個(gè)方面看看這兩個(gè)對(duì)象。

讀寫 
console.log(array[0]); // name
console.log(arrayLike[0]); // name

array[0] = "new name";
arrayLike[0] = "new name";
長(zhǎng)度 
console.log(array.length); // 3
console.log(arrayLike.length); // 3
遍歷 
for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

是不是很像？

那類數(shù)組對(duì)象可以使用數(shù)組的方法嗎？比如：

arrayLike.push("4");

然而上述代碼會(huì)報(bào)錯(cuò): arrayLike.push is not a function

所以終歸還是類數(shù)組吶……

調(diào)用數(shù)組方法

如果類數(shù)組就是任性的想用數(shù)組的方法怎么辦呢？

既然無法直接調(diào)用，我們可以用 Function.call 間接調(diào)用：

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

Array.prototype.join.call(arrayLike, "&"); // name&age&sex

Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到類數(shù)組轉(zhuǎn)數(shù)組

Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]
類數(shù)組轉(zhuǎn)對(duì)象

在上面的例子中已經(jīng)提到了一種類數(shù)組轉(zhuǎn)數(shù)組的方法，再補(bǔ)充三個(gè)：

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)

那么為什么會(huì)講到類數(shù)組對(duì)象呢？以及類數(shù)組有什么應(yīng)用嗎？

要說到類數(shù)組對(duì)象，Arguments 對(duì)象就是一個(gè)類數(shù)組對(duì)象。在客戶端 JavaScript 中，一些 DOM 方法(document.getElementsByTagName()等)也返回類數(shù)組對(duì)象。

Arguments對(duì)象

接下來重點(diǎn)講講 Arguments 對(duì)象。

Arguments 對(duì)象只定義在函數(shù)體中，包括了函數(shù)的參數(shù)和其他屬性。在函數(shù)體中，arguments 指代該函數(shù)的 Arguments 對(duì)象。

舉個(gè)例子：

function foo(name, age, sex) {
    console.log(arguments);
}

foo("name", "age", "sex")

打印結(jié)果如下：

我們可以看到除了類數(shù)組的索引屬性和length屬性之外，還有一個(gè)callee屬性，接下來我們一個(gè)一個(gè)介紹。

length屬性

Arguments對(duì)象的length屬性，表示實(shí)參的長(zhǎng)度，舉個(gè)例子：

function foo(b, c, d){
    console.log("實(shí)參的長(zhǎng)度為：" + arguments.length)
}

console.log("形參的長(zhǎng)度為：" + foo.length)

foo(1)

// 形參的長(zhǎng)度為：3
// 實(shí)參的長(zhǎng)度為：1
callee屬性

Arguments 對(duì)象的 callee 屬性，通過它可以調(diào)用函數(shù)自身。

講個(gè)閉包經(jīng)典面試題使用 callee 的解決方法：

var data = [];

for (var i = 0; i < 3; i++) {
    (data[i] = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}

data[0]();
data[1]();
data[2]();

// 0
// 1
// 2

接下來講講 arguments 對(duì)象的幾個(gè)注意要點(diǎn)：

arguments 和對(duì)應(yīng)參數(shù)的綁定 
function foo(name, age, sex, hobbit) {

    console.log(name, arguments[0]); // name name

    // 改變形參
    name = "new name";

    console.log(name, arguments[0]); // new name new name

    // 改變arguments
    arguments[1] = "new age";

    console.log(age, arguments[1]); // new age new age

    // 測(cè)試未傳入的是否會(huì)綁定
    console.log(sex); // undefined

    sex = "new sex";

    console.log(sex, arguments[2]); // new sex undefined

    arguments[3] = "new hobbit";

    console.log(hobbit, arguments[3]); // undefined new hobbit

}

foo("name", "age")

傳入的參數(shù)，實(shí)參和 arguments 的值會(huì)共享，當(dāng)沒有傳入時(shí)，實(shí)參與 arguments 值不會(huì)共享

除此之外，以上是在非嚴(yán)格模式下，如果是在嚴(yán)格模式下，實(shí)參和 arguments 是不會(huì)共享的。

傳遞參數(shù)

將參數(shù)從一個(gè)函數(shù)傳遞到另一個(gè)函數(shù)

// 使用 apply 將 foo 的參數(shù)傳遞給 bar
function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
   console.log(a, b, c);
}

foo(1, 2, 3)
強(qiáng)大的ES6

使用ES6的 ... 運(yùn)算符，我們可以輕松轉(zhuǎn)成數(shù)組。

function func(...arguments) {
    console.log(arguments); // [1, 2, 3]
}

func(1, 2, 3);
應(yīng)用

arguments的應(yīng)用其實(shí)很多，在下個(gè)系列，也就是 JavaScript 專題系列中，我們會(huì)在 jQuery 的 extend 實(shí)現(xiàn)、函數(shù)柯里化、遞歸等場(chǎng)景看見 arguments 的身影。這篇文章就不具體展開了。

如果要總結(jié)這些場(chǎng)景的話，暫時(shí)能想到的包括：

參數(shù)不定長(zhǎng)

函數(shù)柯里化

遞歸調(diào)用

函數(shù)重載
...

歡迎留言回復(fù)。

下一篇文章

JavaScript深入之創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

深入系列

JavaScript深入系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列預(yù)計(jì)寫十五篇左右，旨在幫大家捋順JavaScript底層知識(shí)，重點(diǎn)講解如原型、作用域、執(zhí)行上下文、變量對(duì)象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點(diǎn)概念。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star，對(duì)作者也是一種鼓勵(lì)。

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

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

相關(guān)文章

  • JavaScript深入之new的模擬實(shí)現(xiàn)

    摘要：深入系列第十二篇，通過的模擬實(shí)現(xiàn)，帶大家揭開使用獲得構(gòu)造函數(shù)實(shí)例的真相一句話介紹運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一也許有點(diǎn)難懂，我們?cè)谀M之前，先看看實(shí)現(xiàn)了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實(shí)現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實(shí)例的真相 new 一句話介紹 new: new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具...

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

  • JavaScript深入系列15篇正式完結(jié)！

    摘要：寫在前面深入系列共計(jì)篇已經(jīng)正式完結(jié)，這是一個(gè)旨在幫助大家，其實(shí)也是幫助自己捋順底層知識(shí)的系列。深入系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點(diǎn)贊，鼓勵(lì)指正。 寫在前面 JavaScript 深入系列共計(jì) 15 篇已經(jīng)正式完結(jié)，這是一個(gè)旨在幫助大家，其實(shí)也是幫助自己捋順 JavaScript 底層知識(shí)的系列。重點(diǎn)講解了如原型、作用域、執(zhí)行上下文、變量對(duì)象、this、...

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

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

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

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

  • 深入淺出JavaScript之call()、apply()方法

    摘要：的作用在中，方法和方法都是為了改變函數(shù)運(yùn)行時(shí)上下文而存在的，換句話說就是為了改變函數(shù)體內(nèi)部的指向。歡迎前端大牛糾正錯(cuò)誤，如有錯(cuò)誤我會(huì)及時(shí)改正。 寫在前面： 隔了很長(zhǎng)時(shí)間了，也不知道寫點(diǎn)什么。最近一直在研究ES6，一直想寫出來的文章能對(duì)初學(xué)者或者是在學(xué)習(xí)JS路上有所幫助的。這就是我的初衷。 call、apply的作用 在JavaScript中，call()方法和apply()方法都是為了...

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

  • 老生常談javascript之call，apply的區(qū)別

    摘要：剛開始看到的函數(shù)和時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對(duì)之處希望各位多多指正，共同進(jìn)步。。。 剛開始看到j(luò)avascript的函數(shù)apply和call時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對(duì)之處希望各位多多指正，共同進(jìn)步。。。本文將從三個(gè)方面介紹apply，ca...

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

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

0條評(píng)論

閱讀需要支付1元查看
<