快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的方法

更新時(shí)間：2025年04月28日 08:28:10 作者：北辰alk

在?JavaScript?開發(fā)中,我們經(jīng)常會(huì)遇到"類數(shù)組對(duì)象"（array-like?objects）,這些對(duì)象看起來像數(shù)組,有?length?屬性,也可以通過索引訪問元素,但它們不具備數(shù)組的方法,本文將詳細(xì)介紹如何將類數(shù)組對(duì)象轉(zhuǎn)換為真正的數(shù)組,需要的朋友可以參考下

什么是類數(shù)組對(duì)象

類數(shù)組對(duì)象是指具有以下特征的對(duì)象：

具有 length 屬性
可以通過數(shù)字索引訪問元素
不具備數(shù)組的方法（如 push、slice 等）

常見的類數(shù)組對(duì)象包括：

函數(shù)中的 arguments 對(duì)象
DOM 操作返回的節(jié)點(diǎn)集合（如 document.getElementsByTagName()）
字符串（可以被視為字符的類數(shù)組）

轉(zhuǎn)換方法詳解

1. 使用 Array.from() 方法（ES6推薦）

ES6 引入了 Array.from() 方法，這是最簡單直接的轉(zhuǎn)換方式。

// 示例1：轉(zhuǎn)換arguments對(duì)象
function exampleFunction() {
    const argsArray = Array.from(arguments);
    console.log(argsArray); // 真正的數(shù)組
    console.log(Array.isArray(argsArray)); // true
}
exampleFunction(1, 2, 3);

// 示例2：轉(zhuǎn)換NodeList
const divList = document.querySelectorAll('div');
const divArray = Array.from(divList);
console.log(divArray); // 真正的數(shù)組

// 示例3：轉(zhuǎn)換字符串
const str = 'hello';
const charArray = Array.from(str);
console.log(charArray); // ['h', 'e', 'l', 'l', 'o']

Array.from() 還可以接受第二個(gè)參數(shù)，一個(gè)映射函數(shù)，可以在轉(zhuǎn)換過程中對(duì)元素進(jìn)行處理：

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. 使用擴(kuò)展運(yùn)算符（…）（ES6）

擴(kuò)展運(yùn)算符是另一種簡潔的轉(zhuǎn)換方式，適用于可迭代對(duì)象。

// 示例1：轉(zhuǎn)換arguments
function exampleFunc(...args) {
    const argsArray = [...arguments];
    console.log(argsArray);
}
exampleFunc(1, 2, 3);

// 示例2：轉(zhuǎn)換NodeList
const divs = [...document.querySelectorAll('div')];
console.log(divs);

// 示例3：轉(zhuǎn)換字符串
const str = 'world';
const chars = [...str];
console.log(chars); // ['w', 'o', 'r', 'l', 'd']

注意：擴(kuò)展運(yùn)算符要求對(duì)象是可迭代的（實(shí)現(xiàn)了 Symbol.iterator 方法）。對(duì)于普通的類數(shù)組對(duì)象（如 {0: ‘a’, 1: ‘b’, length: 2}），擴(kuò)展運(yùn)算符無法直接使用。

3. 使用 Array.prototype.slice.call()

這是 ES5 時(shí)代常用的方法，兼容性非常好。

// 示例1：轉(zhuǎn)換arguments
function example() {
    const argsArray = Array.prototype.slice.call(arguments);
    console.log(argsArray);
}
example(1, 2, 3);

// 示例2：轉(zhuǎn)換NodeList
const nodeArray = Array.prototype.slice.call(document.querySelectorAll('div'));
console.log(nodeArray);

// 簡寫形式
const shortHand = [].slice.call(arrayLikeObject);

原理：slice() 方法不修改原數(shù)組，而是返回一個(gè)新數(shù)組。通過 call() 或 apply() 讓類數(shù)組對(duì)象借用數(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. 手動(dòng)遍歷轉(zhuǎn)換

對(duì)于特殊需求或需要最大兼容性的情況，可以手動(dòng)遍歷：

function convertToArray(arrayLike) {
    const result = [];
    for (let i = 0; i < arrayLike.length; i++) {
        result.push(arrayLike[i]);
    }
    return result;
}

const manualArray = convertToArray(arrayLikeObject);

性能比較

不同方法在不同瀏覽器和場(chǎng)景下性能有所差異，但通常：

Array.from() 和擴(kuò)展運(yùn)算符在現(xiàn)代瀏覽器中性能最佳
slice.call() 方法在舊瀏覽器中表現(xiàn)更好
手動(dòng)遍歷方法最慢，但兼容性最好

特殊場(chǎng)景處理

處理稀疏數(shù)組

類數(shù)組對(duì)象可能是稀疏的（某些索引缺失）：

const sparseArrayLike = {0: 'a', 2: 'c', length: 3};
const denseArray = Array.from(sparseArrayLike);
console.log(denseArray); // ['a', undefined, 'c']

處理非數(shù)字屬性

類數(shù)組對(duì)象可能包含非數(shù)字屬性，這些屬性不會(huì)被包含在結(jié)果數(shù)組中：

const obj = {
    0: 'zero',
    1: 'one',
    length: 2,
    extraProp: '不會(huì)被包含'
};
const arr = Array.from(obj);
console.log(arr); // ['zero', 'one']
console.log(arr.extraProp); // undefined

實(shí)際應(yīng)用案例

案例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：字符串處理

// 反轉(zhuǎn)字符串
function reverseString(str) {
    return Array.from(str).reverse().join('');
}
console.log(reverseString('hello')); // 'olleh'

注意事項(xiàng)

類數(shù)組對(duì)象的 length 屬性必須正確，否則轉(zhuǎn)換結(jié)果可能不符合預(yù)期
某些類數(shù)組對(duì)象（如 FileList）可能是只讀的，轉(zhuǎn)換后可以修改
對(duì)于大型集合，考慮性能影響

總結(jié)

將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組是 JavaScript 開發(fā)中的常見需求?，F(xiàn)代開發(fā)中優(yōu)先使用 Array.from() 或擴(kuò)展運(yùn)算符，它們簡潔明了；在需要兼容舊環(huán)境時(shí)可以使用 Array.prototype.slice.call()；特殊情況下可以手動(dòng)遍歷轉(zhuǎn)換。理解這些方法的原理和適用場(chǎng)景，能夠幫助我們?cè)趯?shí)際開發(fā)中做出合適的選擇。

以上就是使用JavaScript實(shí)現(xiàn)類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: