伪数组转数组的方法?

96 阅读1分钟

当说“伪数组”时,通常指的是类数组对象,比如 arguments 对象或者 DOM 元素集合。将类数组对象转换为真正的数组有几种方法:

1. Array.from()

Array.from() 方法可以将类数组对象或可迭代对象转换为数组。

示例:

javascript
function convertToArray(obj) {
  return Array.from(obj);
}

// 示例使用
const argumentsArray = convertToArray(arguments);
console.log(argumentsArray); // 将 arguments 对象转换为数组

2. 扩展运算符(Spread Operator)

使用扩展运算符 ... 可以将类数组对象转换为数组。

示例:

javascript
function convertToArray(obj) {
  return [...obj];
}

// 示例使用
const nodeList = document.querySelectorAll('div'); // 获取 DOM 元素集合
const divArray = convertToArray(nodeList);
console.log(divArray); // 将 DOM 元素集合转换为数组

3. Array.prototype.slice.call()

通过 call() 方法将 Array.prototype.slice 应用于类数组对象。

示例:

javascript
function convertToArray(obj) {
  return Array.prototype.slice.call(obj);
}

// 示例使用
const someCollection = document.getElementsByClassName('some-class'); // 获取 DOM 元素集合
const arrayFromCollection = convertToArray(someCollection);
console.log(arrayFromCollection); // 将 DOM 元素集合转换为数组

4. 使用ES6的展开运算符

在一些情况下,可以直接使用展开运算符([...obj])将类数组对象转换为数组。

javascript
function convertToArray(obj) {
  return [...obj];
}

// 示例使用
const arrayLikeObject = { length: 3, 0: 'a', 1: 'b', 2: 'c' }; // 一个类数组对象
const array = convertToArray(arrayLikeObject);
console.log(array); // 将类数组对象转换为数组

这些方法可以让你轻松地将类数组对象转换为真正的数组,方便后续在数组上执行数组方法和操作。