類數(shù)組對象

所謂的類數(shù)組對象：擁有一個length屬性和若干索引屬性的對象

var arr = ['name', 'age', 'sex']

var arrLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

我們從讀寫、獲取長度、遍歷三個方面看看這兩個對象。

讀寫

console.log(arr[0])  // name
console.log(arrLike[0])  // name

arr[0] = 'new name'
arrLike[0] = 'new name'

長度

console.log(arr.length)  // 3
console.log(arrLike.length)  // 3

遍歷

for(var i = 0, len = arr.length; i<len; i++) {
    console.log(arr[i])
    // name age sex
}

for(var i = 0, len = arrLike.length; i<len; i++) {
    console.log(arr[i])
    // name age sex
}

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

類數(shù)組可以調(diào)用數(shù)組的方法嗎？

arrLike.push('city')
// arrLike is not a function

類數(shù)組無法直接調(diào)用數(shù)組方法，我們可以用Function.call間接調(diào)用

console.log(Array.prototype.join.call(arrLike, '&'))  // name&age&sex
console.log(Array.prototype.slice.call(arrLike)) // ['name','age','sex']
// slice可以做到類數(shù)組轉(zhuǎn)數(shù)組
console.log(Array.prototype.map.call(arrLike, function(item){
    return item.toUpperCase()
}))  // ['NAME','AGE','SEX']

類數(shù)組轉(zhuǎn)數(shù)組

上面的例子已經(jīng)提到一種類數(shù)組轉(zhuǎn)數(shù)組的方法，再補充完善下：

console.log(Array.prototype.slice.call(arrLike))
console.log(Array.prototype.splice.call(arrLike, 0))
// ES6
console.log(Array.from(arrLike))
console.log(Array.prototype.concat.apply([], arrLike))

Arguments對象

Arguments對象就是一個類數(shù)組對象，Arguments對象只定義在函數(shù)體內(nèi)，包括了函數(shù)的參數(shù)和其他參數(shù)。在函數(shù)體中，arguments指代該函數(shù)的Arguments對象。

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

打印結(jié)果：

image-20200512095611667

我們看到除了類數(shù)組的索引屬性和length屬性之外，還有一個callee屬性。

length屬性

Arguments對象的length屬性，表示實參的長度

function foo(name, age, sex) {
    // 實參長度
    console.log(arguments.length)  // 1
}
// 形參長度
console.log(foo.length)  // 3
foo('name')

callee屬性

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

通過下面閉包的例子來看下callee的解決方法：

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

arguments和對象參數(shù)的綁定

function foo(name, age, sex, hobbit) {
    console.log(name, arguments[0])  // name, name
    // 改變形參
    arguments[0] = 'new name'
    console.log(name, arguments[0])  // new name, new name
    // 改變arguments
    arguments[1] = 'new age'
    console.log(name, arguments[1])  // new name, new age
    // 未傳入的是否會被綁定
    sex = 'new sex'
    console.log(sex, arguments[2]) // undefined, new sex
    arguments[3] = 'new hobbit'
    console.log(hobbit, arguments[3])  //  undefined, new hobbit
}

foo('name', 'age')

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

以上都是非嚴(yán)格模式下，在嚴(yán)格模式下，實參和arguments是不會共享的。

傳遞參數(shù)

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

function foo(){
    bar.apply(this, arguments)
}
function bar(a,b,c){
    console.log(a,b,c)
}
foo(1,2,3)  // 1,2,3

ES6展開運算符

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

應(yīng)用

arguments的應(yīng)用其實很多，例如：

1. 參數(shù)不定長
2. 函數(shù)柯里化
3. 遞歸調(diào)用
4. 函數(shù)重載
5. ......