JavaScript 類數組對象與 arguments

在 JavaScript 中存在一種特殊的對象，咱們稱之爲類數組對象，其性質與數組類似。咱們常常會遇到各類類數組對象，最多見的即是 argumengs。

類數組對象

所謂類數組對象，就是指能夠經過索引屬性訪問元素而且擁有 length 屬性的對象。

一個簡單的類數組對象是長這樣的

var arrLike = {
  0: 'name',
  1: 'age',
  2: 'job',
  length: 3
}
複製代碼

而它所對應的數組應該是這樣子的

var arr = ['name', 'age', 'job'];
複製代碼

咱們說類數組對象與數組的性質類似，是由於類數組對象在訪問、賦值、獲取長度上的操做與數組是一致的。

數組與類數組對象的訪問

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
複製代碼

能夠看出，在訪問、賦值、獲取長度時，對類數組對象的操做與對數組是一致的。那麼，類數組對象與數組的區別是在哪裏呢？

類數組對象與數組的區別是類數組對象不能直接使用數組的方法。

以下類數組對象使用數組方法時會報錯

arrLike.push('hobby');  // Uncaught TypeError: arrLike.push is not a function
複製代碼

那麼咱們但願類數組對象可以和數組同樣使用數組的方法，應該怎麼作呢？咱們通常是經過 Function.call 或者 Function.apply 方法來間接調用。

// 使用 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
複製代碼

在實際的開發過程當中，爲了方便對數據的操做，咱們還常常會經過 Array.prototype.slice 或 Array.prototype.splice 等方法把類數組對象轉換成真正的數組。

// 使用 call
console.log(Array.prototype.slice.call(arrLike,0));
console.log(Array.prototype.splice.call(arrLike,0));  // 會改變原先的類數組對象
複製代碼

// 使用 apply
console.log(Array.prototype.slice.apply(arrLike,[0]));
console.log(Array.prototype.splice.apply(arrLike,[0]));  // 會改變原先的類數組對象
複製代碼

須要注意的是，Array.prototype.slice 方法不會改變原先類數組對象，而 Array.prototype.splice 會改變原先的類數組對象，這一點跟數組調用 slice 或 splice 方法時的行爲是一致的。

arguments

在函數體中定義了 Arguments 對象，其包含函數的參數和其它屬性，以 arguments 變量來指代。

舉個例子

function fn(name, age, job) {
    console.log(arguments);
}

fn('ttsy', '25', 'front end')
複製代碼

在控制檯上咱們能夠看到上述函數打印的結果以下

能夠看到 arguments 中包含了函數傳遞的參數、length、和 callee 屬性。

length 屬性表示的是實參的長度，即調用函數的時候傳入的參數個數。

function fn(name, age, job) {
    console.log(arguments.length);  // 2
}

fn('ttsy', '25')
複製代碼

callee 屬性則指向的函數自身，咱們能夠經過它來調用自身函數。

arguments 是一個經典的類數組對象，咱們能夠經過上述的 Function.call 或者 Function.apply 方法來間接調用數組的方法，也能夠直接經過 Array.prototype.slice 或 Array.prototype.splice 等方法把類數組對象轉換成真正的數組。

不定時分享我的在前端方面的學習經驗，以爲還不錯的小夥伴，能夠關注一波公衆號哦。