在 JavaScript 中存在一種特殊的對象,我們稱之為類數(shù)組對象,其性質(zhì)與數(shù)組相似架谎。我們經(jīng)常會遇到各種類數(shù)組對象,最常見的便是 argumengs辟躏。
類數(shù)組對象
所謂類數(shù)組對象谷扣,就是指可以通過索引屬性訪問元素并且擁有 length 屬性的對象。
一個簡單的類數(shù)組對象是長這樣的
var arrLike = {
0: 'name',
1: 'age',
2: 'job',
length: 3
}
而它所對應(yīng)的數(shù)組應(yīng)該是這樣子的
var arr = ['name', 'age', 'job'];
我們說類數(shù)組對象與數(shù)組的性質(zhì)相似捎琐,是因?yàn)轭悢?shù)組對象在訪問会涎、賦值、獲取長度上的操作與數(shù)組是一致的瑞凑。
數(shù)組與類數(shù)組對象的訪問
console.log(arr[0]); // name
console.log(arrLike[0]); // name
數(shù)組與類數(shù)組對象的賦值
arr[0] = 'new name';
arrLike[0] = 'new name';
獲取數(shù)組與類數(shù)組對象的長度
console.log(arr.length); // 3
console.log(arrLike.length); // 3
可以看出末秃,在訪問、賦值籽御、獲取長度時练慕,對類數(shù)組對象的操作與對數(shù)組是一致的。那么技掏,類數(shù)組對象與數(shù)組的區(qū)別是在哪里呢铃将?
類數(shù)組對象與數(shù)組的區(qū)別是類數(shù)組對象不能直接使用數(shù)組的方法。
如下類數(shù)組對象使用數(shù)組方法時會報錯
arrLike.push('hobby'); // Uncaught TypeError: arrLike.push is not a function
那么我們希望類數(shù)組對象能夠和數(shù)組一樣使用數(shù)組的方法哑梳,應(yīng)該怎么做呢劲阎?我們一般是通過 Function.call 或者 Function.apply 方法來間接調(diào)用。
// 使用 call
Array.prototype.push.call(arrLike, 'hobby');
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.call(arrLike, '&')
console.log(arrLikeStr); // name&age&job&hobby
// 使用 apply
Array.prototype.push.apply(arrLike, ['hobby']);
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.apply(arrLike, ['&'])
console.log(arrLikeStr); // name&age&job&hobby
在實(shí)際的開發(fā)過程中鸠真,為了方便對數(shù)據(jù)的操作悯仙,我們還經(jīng)常會通過 Array.prototype.slice 或 Array.prototype.splice 等方法把類數(shù)組對象轉(zhuǎn)換成真正的數(shù)組。
// 使用 call
console.log(Array.prototype.slice.call(arrLike,0));
console.log(Array.prototype.splice.call(arrLike,0)); // 會改變原先的類數(shù)組對象
// 使用 apply
console.log(Array.prototype.slice.apply(arrLike,[0]));
console.log(Array.prototype.splice.apply(arrLike,[0])); // 會改變原先的類數(shù)組對象
需要注意的是弧哎,Array.prototype.slice 方法不會改變原先類數(shù)組對象雁比,而 Array.prototype.splice 會改變原先的類數(shù)組對象,這一點(diǎn)跟數(shù)組調(diào)用 slice 或 splice 方法時的行為是一致的撤嫩。
arguments
在函數(shù)體中定義了 Arguments 對象偎捎,其包含函數(shù)的參數(shù)和其它屬性,以 arguments 變量來指代序攘。
舉個例子
function fn(name, age, job) {
console.log(arguments);
}
fn('ttsy', '25', 'front end')
在控制臺上我們可以看到上述函數(shù)打印的結(jié)果如下
可以看到 arguments 中包含了函數(shù)傳遞的參數(shù)茴她、length、和 callee 屬性程奠。
length 屬性表示的是實(shí)參的長度丈牢,即調(diào)用函數(shù)的時候傳入的參數(shù)個數(shù)。
function fn(name, age, job) {
console.log(arguments.length); // 2
}
fn('ttsy', '25')
callee 屬性則指向的函數(shù)自身瞄沙,我們可以通過它來調(diào)用自身函數(shù)己沛。
arguments 是一個經(jīng)典的類數(shù)組對象慌核,我們可以通過上述的 Function.call 或者 Function.apply 方法來間接調(diào)用數(shù)組的方法,也可以直接通過 Array.prototype.slice 或 Array.prototype.splice 等方法把類數(shù)組對象轉(zhuǎn)換成真正的數(shù)組申尼。