关键词

javascript类数组的深入理解

JavaScript类数组的深入理解

JavaScript中的类数组是一个类似数组但却不是真正的数组的对象。它们通常具有length属性和对应的数字键,但是缺少了一些数组原型方法。JavaScript中的类数组包括函数中的arguments对象、HTMLCollection对象和NodeList对象等。

类数组的常用方法

转换为真正的数组

由于类数组不是真正的数组,因此它们不能使用数组的方法。为了解决这个问题,我们可以通过以下两种方式将类数组转换为真正的数组。

1. 使用数组的原型方法slice()Array.from()

//使用slice()方法
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.prototype.slice.call(arrayLike); // ['a', 'b', 'c']

//使用Array.from()方法
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike); // ['a', 'b', 'c']

2. 使用ES6的展开运算符

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = [...arrayLike]; // ['a', 'b', 'c']

类数组对象的遍历

for循环

我们可以使用for循环遍历类数组对象,例如:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]);
}
// 输出 'a', 'b', 'c'

forEach()方法

如果你不喜欢使用for循环,你还可以使用数组的原型方法forEach(),能够以简洁的方式迭代类数组对象的内容。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
Array.prototype.forEach.call(arrayLike, item => console.log(item));
// 输出 'a', 'b', 'c'

类数组中的注意点

类数组并不具备数组所有原型方法

尽管类数组看起来很像数组,但是类数组并不具备数组的所有原型方法。例如,push()pop()shift()unshift()等方法在类数组中是没有定义的。

然而,类数组中的一些方法和数组的方法是相同的,例如slice()concat()等。在使用它们的时候,需要注意它们是否适用于类数组。

类数组具有类似数组的特点

与数组相比,类数组具有一些类似的特点。例如,它们都具有length属性,也可以像数组一样使用索引来访问元素。

示例说明

示例1

问题描述

我们创建了一个函数,将传入它的参数转换成一个数组,但我们希望出于某种原因在稍后的代码中使用类数组对象。该怎么做呢?

解决方案

可以使用如下的方法将数组转换为类数组对象:

const arr = [1, 2, 3, 4, 5];
const arrayLike = { ...arr, length: arr.length };

console.log(arrayLike[0]); // 1
console.log(arrayLike.length); // 5

示例2

问题描述

我们需要遍历一个HTMLCollection对象,并检查每个元素是否含有指定的类名,如果有,将其从文档中移除。该怎么实现呢?

解决方案

我们可以使用for循环来遍历类数组对象:

const elements = document.getElementsByClassName('my-class');
for (let i = 0; i < elements.length; i++) {
  if (elements[i].classList.contains('target-class')) {
    elements[i].parentNode.removeChild(elements[i]);
  }
}

或者使用forEach()方法简洁地完成相同的任务:

const elements = document.getElementsByClassName('my-class');
Array.prototype.forEach.call(elements, el => {
  if (el.classList.contains('target-class')) {
    el.parentNode.removeChild(el);
  }
});

本文链接:http://task.lmcjl.com/news/11518.html

展开阅读全文