6种ES6方法轻松应对类数组对象转换##

2024-02-26 06:57:06

生活从来就是充满困难，解决困难总要有方法。尤其是从事前端开发工作的我们，总是会遇到各种各样的问题。尤其是在处理类数组对象的时候，如果你还停留在forEach的阶段，那可就out了。今天，我们就来学习下ES6中更高级的方法，分分钟让你成为类数组对象转换的大神。

一、什么是类数组？

类数组对象通常是指拥有数字索引，并且可以像数组一样通过索引访问其元素的对象。但请注意，类数组对象并不一定是数组，它只是拥有数组的一些特性。类数组对象可以来自各种来源，例如 HTML DOM集合、arguments对象或伪数组。

二、什么是类数组对象？

类数组对象是一种特殊的对象，它具有以下特点：

拥有数字索引，可以像数组一样通过索引访问其元素。
不是真正的数组，只是拥有数组的部分特性。
可以使用ES6中的for of、for in和forEach循环来遍历其元素。

三、如何将类数组对象转换为数组？

在ES6中，我们可以使用多种方法将类数组对象转换为数组。接下来，我们将详细介绍这些方法的使用及应用场景。

第一种方法：使用for in循环

for in循环是一种遍历对象属性的循环，它可以用来遍历类数组对象中的每个元素。

// 使用for in循环将类数组对象转换为数组
const类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const数组 = [];

for (let i in 类数组对象) {
  if (i !== 'length') {
    数组.push(类数组对象[i]);
  }
}

console.log(数组); // 输出结果：['1', '2', '3']

第二种方法：使用内置对象keys()

内置对象keys()可以返回一个对象的所有键名（即数字索引），然后我们可以使用这些键名来访问类数组对象中的元素。

// 使用内置对象keys()将类数组对象转换为数组
const 类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const 数组 = [];

const键名 = Object.keys(类数组对象);

for (let i = 0; i < 键名.length; i++) {
  if (键名[i] !== 'length') {
    数组.push(类数组对象[键名[i]]);
  }
}

console.log(数组); // 输出结果：['1', '2', '3']

第三种方法：使用内置对象values()

内置对象values()可以返回一个对象的所有键值（即元素），然后我们可以使用这些键值来构建一个数组。

// 使用内置对象values()将类数组对象转换为数组
const 类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const 数组 = Array.from(类数组对象.values());

console.log(数组); // 输出结果：['1', '2', '3']

第四种方法：使用扩展运算符(...)

扩展运算符(...)可以将一个类数组对象展开为一个数组。

// 使用扩展运算符(...)将类数组对象转换为数组
const 类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const 数组 = [...类数组对象];

console.log(数组); // 输出结果：['1', '2', '3']

第五种方法：使用Array.from()方法

Array.from()方法可以将一个类数组对象转换为一个数组。

// 使用Array.from()方法将类数组对象转换为数组
const 类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const 数组 = Array.from(类数组对象);

console.log(数组); // 输出结果：['1', '2', '3']

第六种方法：使用forEach循环

forEach循环是一种遍历数组的循环，也可以用来遍历类数组对象。

// 使用forEach循环将类数组对象转换为数组
const 类数组对象 = {0: '1', 1: '2', 2: '3', length: 3};
const 数组 = [];

类数组对象.forEach(function(item) {
  数组.push(item);
});

console.log(数组); // 输出结果：['1', '2', '3']