面试题：JavaScript 中如何将类数组对象转换为真正的数组

Question

请描述至少两种将类数组对象（如 arguments 对象或 DOM 节点列表）转换为真正 JavaScript 数组的方法，并给出代码示例。同时说明这些方法在不同场景下的适用情况。

Answer 1

1. 使用 Array.from() 方法：
   • Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
   • 示例代码：

// 转换arguments对象
function test() {
    const arr = Array.from(arguments);
    return arr;
}
console.log(test(1, 2, 3)); 

// 转换DOM节点列表
const divs = document.getElementsByTagName('div');
const divArr = Array.from(divs);

• 适用场景：适用于所有类数组对象，并且如果类数组对象实现了迭代协议（如 DOM 节点列表），Array.from() 可以直接使用其迭代器进行转换。它是一种简洁且直观的方式，尤其适用于现代 JavaScript 环境（ES6+）。

2. 使用 [].slice.call() 方法：
   • slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。通过 call() 方法可以改变 slice() 内部 this 的指向，从而实现类数组对象的转换。
   • 示例代码：

// 转换arguments对象
function test() {
    const arr = [].slice.call(arguments);
    return arr;
}
console.log(test(1, 2, 3)); 

// 转换DOM节点列表
const divs = document.getElementsByTagName('div');
const divArr = [].slice.call(divs);

• 适用场景：这种方法兼容性较好，在 ES5 及更早的环境中也能使用。当需要兼容旧版本浏览器时，[].slice.call() 是一个可靠的选择。但相较于 Array.from()，语法上略显繁琐。