使用JavaScript實現(xiàn)類數(shù)組對象轉換為數(shù)組的方法
更新時間：2025年04月28日 08:28:10 作者：北辰alk
在?JavaScript?開發(fā)中,我們經(jīng)常會遇到"類數(shù)組對象"（array-like?objects）,這些對象看起來像數(shù)組,有?length?屬性,也可以通過索引訪問元素,但它們不具備數(shù)組的方法,本文將詳細介紹如何將類數(shù)組對象轉換為真正的數(shù)組,需要的朋友可以參考下
什么是類數(shù)組對象
類數(shù)組對象是指具有以下特征的對象：
- 具有 length 屬性
- 可以通過數(shù)字索引訪問元素
- 不具備數(shù)組的方法（如 push、slice 等）
常見的類數(shù)組對象包括：
- 函數(shù)中的 arguments 對象
- DOM 操作返回的節(jié)點集合（如 document.getElementsByTagName()）
- 字符串（可以被視為字符的類數(shù)組）
轉換方法詳解
1. 使用 Array.from() 方法（ES6推薦）
ES6 引入了 Array.from() 方法，這是最簡單直接的轉換方式。
// 示例1：轉換arguments對象
function exampleFunction() {
const argsArray = Array.from(arguments);
console.log(argsArray); // 真正的數(shù)組
console.log(Array.isArray(argsArray)); // true
}
exampleFunction(1, 2, 3);
// 示例2：轉換NodeList
const divList = document.querySelectorAll('div');
const divArray = Array.from(divList);
console.log(divArray); // 真正的數(shù)組
// 示例3：轉換字符串
const str = 'hello';
const charArray = Array.from(str);
console.log(charArray); // ['h', 'e', 'l', 'l', 'o']
Array.from() 還可以接受第二個參數(shù)，一個映射函數(shù)，可以在轉換過程中對元素進行處理：
const arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
const doubledArray = Array.from(arrayLike, x => x * 2);
console.log(doubledArray); // [2, 4, 6]
2. 使用擴展運算符（…）（ES6）
擴展運算符是另一種簡潔的轉換方式，適用于可迭代對象。
// 示例1：轉換arguments
function exampleFunc(...args) {
const argsArray = [...arguments];
console.log(argsArray);
}
exampleFunc(1, 2, 3);
// 示例2：轉換NodeList
const divs = [...document.querySelectorAll('div')];
console.log(divs);
// 示例3：轉換字符串
const str = 'world';
const chars = [...str];
console.log(chars); // ['w', 'o', 'r', 'l', 'd']
注意：擴展運算符要求對象是可迭代的（實現(xiàn)了 Symbol.iterator 方法）。對于普通的類數(shù)組對象（如 {0: ‘a’, 1: ‘b’, length: 2}），擴展運算符無法直接使用。
3. 使用 Array.prototype.slice.call()
這是 ES5 時代常用的方法，兼容性非常好。
// 示例1：轉換arguments
function example() {
const argsArray = Array.prototype.slice.call(arguments);
console.log(argsArray);
}
example(1, 2, 3);
// 示例2：轉換NodeList
const nodeArray = Array.prototype.slice.call(document.querySelectorAll('div'));
console.log(nodeArray);
// 簡寫形式
const shortHand = [].slice.call(arrayLikeObject);
原理：slice() 方法不修改原數(shù)組，而是返回一個新數(shù)組。通過 call() 或 apply() 讓類數(shù)組對象借用數(shù)組的 slice() 方法。
4. 使用 Array.prototype.concat.apply()
這是另一種 ES5 方法，但不如 slice 常用。
const arrayLike = {0: 'a', 1: 'b', length: 2};
const realArray = Array.prototype.concat.apply([], arrayLike);
console.log(realArray); // ['a', 'b']
5. 手動遍歷轉換
對于特殊需求或需要最大兼容性的情況，可以手動遍歷：
function convertToArray(arrayLike) {
const result = [];
for (let i = 0; i < arrayLike.length; i++) {
result.push(arrayLike[i]);
}
return result;
}
const manualArray = convertToArray(arrayLikeObject);
性能比較
不同方法在不同瀏覽器和場景下性能有所差異，但通常：
Array.from()和擴展運算符在現(xiàn)代瀏覽器中性能最佳slice.call()方法在舊瀏覽器中表現(xiàn)更好- 手動遍歷方法最慢，但兼容性最好
特殊場景處理
處理稀疏數(shù)組
類數(shù)組對象可能是稀疏的（某些索引缺失）：
const sparseArrayLike = {0: 'a', 2: 'c', length: 3};
const denseArray = Array.from(sparseArrayLike);
console.log(denseArray); // ['a', undefined, 'c']
處理非數(shù)字屬性
類數(shù)組對象可能包含非數(shù)字屬性，這些屬性不會被包含在結果數(shù)組中：
const obj = {
0: 'zero',
1: 'one',
length: 2,
extraProp: '不會被包含'
};
const arr = Array.from(obj);
console.log(arr); // ['zero', 'one']
console.log(arr.extraProp); // undefined
實際應用案例
案例1：函數(shù)參數(shù)處理
function sum() {
return Array.from(arguments).reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3)); // 6
案例2：DOM操作
// 獲取所有div并添加類名
const divs = Array.from(document.querySelectorAll('div'));
divs.forEach(div => div.classList.add('processed'));
案例3：字符串處理
// 反轉字符串
function reverseString(str) {
return Array.from(str).reverse().join('');
}
console.log(reverseString('hello')); // 'olleh'
注意事項
- 類數(shù)組對象的 length 屬性必須正確，否則轉換結果可能不符合預期
- 某些類數(shù)組對象（如 FileList）可能是只讀的，轉換后可以修改
- 對于大型集合，考慮性能影響
總結
將類數(shù)組對象轉換為數(shù)組是 JavaScript 開發(fā)中的常見需求?，F(xiàn)代開發(fā)中優(yōu)先使用 Array.from() 或擴展運算符，它們簡潔明了；在需要兼容舊環(huán)境時可以使用 Array.prototype.slice.call()；特殊情況下可以手動遍歷轉換。理解這些方法的原理和適用場景，能夠幫助我們在實際開發(fā)中做出合適的選擇。
以上就是使用JavaScript實現(xiàn)類數(shù)組對象轉換為數(shù)組的方法的詳細內容，更多關于JavaScript類數(shù)組對象轉換為數(shù)組的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了如何點擊一個按鈕實現(xiàn)彈出一個居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了實用Javascript調試技巧分享(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了JavaScript多種濾鏡算法實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了JavaScript中日期格式化的一些實現(xiàn)方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-01-01
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構造、查找、刪除、判斷等相關技巧,需要的朋友可以參考下2015-07-07
js實現(xiàn)點擊每個li節(jié)點，都彈出其文本值及修改
本篇文章主要分享了js實現(xiàn)點擊每個li節(jié)點，都彈出其文本值及修改的實例代碼，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
在使用了母板頁面的項目中 使用js獲取其中的標簽id 需要先加載到本地看看他在瀏覽時候的頁面源代碼然后確定他的id2010-04-04
本篇文章主要是對JS操作JSON進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了javascript實現(xiàn)的圖片預覽功能,結合實例形式分析了javascript針對圖片預覽相關功能實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了基于javascript編寫簡單日歷的相關資料,需要的朋友可以參考下2016-05-05