JS怎么创建类数组

JS 创建类数组的方法主要有以下几种：使用arguments对象、使用NodeList、手动创建对象并赋予length属性。在这几种方法中，通过手动创建对象并赋予length属性是一种灵活且常用的方法。具体来说，我们可以通过创建一个普通对象，并为这个对象添加数组的特性，比如length属性和索引属性，从而使其表现得像一个数组。

下面将详细介绍这几种方法，并解释如何使用这些方法来创建和操作类数组对象。

一、使用arguments对象

arguments对象是函数内部自带的对象，它包含了函数调用时的所有参数。虽然arguments对象并不是真正的数组，但它具有类似数组的特性。

function example() {
  console.log(arguments);
  console.log(arguments.length);
  console.log(arguments[0]);
}
example('a', 'b', 'c');

在上面的例子中，arguments对象包含了函数example的所有参数，且可以通过length属性和索引来访问这些参数。

二、使用NodeList

NodeList是DOM操作中常见的类数组对象。当我们使用诸如document.querySelectorAll之类的DOM方法时，会返回一个NodeList对象，它也是一个类数组对象。

const nodeList = document.querySelectorAll('div');
console.log(nodeList);
console.log(nodeList.length);
console.log(nodeList[0]);

NodeList对象包含了匹配的所有DOM元素，并且可以通过length属性和索引来访问这些元素。

三、手动创建类数组对象

最灵活的方法是手动创建一个对象，并为其添加数组的特性。我们可以创建一个普通对象，并为它添加length属性和索引属性。

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
console.log(arrayLike);
console.log(arrayLike.length);
console.log(arrayLike[0]);

在这个例子中，我们手动创建了一个对象arrayLike，并为它添加了length属性和索引属性，使其表现得像一个数组。

四、类数组对象的转换

虽然类数组对象具有类似数组的特性，但它们并不是真正的数组，因此无法直接使用数组的方法。为了使用数组的方法，我们可以将类数组对象转换为真正的数组。

1、使用Array.from

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

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
const realArray = Array.from(arrayLike);
console.log(realArray);
console.log(realArray.length);
console.log(realArray[0]);

2、使用ES6扩展运算符

ES6的扩展运算符也可以将类数组对象转换为数组。

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
const realArray = [...arrayLike];
console.log(realArray);
console.log(realArray.length);
console.log(realArray[0]);

3、使用Array.prototype.slice

Array.prototype.slice方法也可以将类数组对象转换为数组。

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
const realArray = Array.prototype.slice.call(arrayLike);
console.log(realArray);
console.log(realArray.length);
console.log(realArray[0]);

五、类数组对象的实际应用

类数组对象在实际开发中有很多应用场景，下面将介绍其中几个常见的场景。

1、处理函数参数

在函数内部，可以使用arguments对象来处理不定数量的参数。

function sum() {
  const args = Array.from(arguments);
  return args.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4));

2、处理DOM元素集合

在处理DOM元素集合时，可以使用NodeList对象，并将其转换为数组以便使用数组的方法。

const divs = document.querySelectorAll('div');
const divArray = Array.from(divs);
divArray.forEach(div => {
  console.log(div.textContent);
});

六、类数组对象的优缺点

虽然类数组对象在某些场景下非常有用，但它们也有一些缺点。

优点

内存效率：类数组对象通常比真正的数组占用更少的内存，因为它们没有数组的所有方法和属性。
简单性：在某些情况下，类数组对象比真正的数组更简单和直接，特别是在处理不定数量的函数参数时。

缺点

功能限制：类数组对象无法直接使用数组的方法，这意味着在操作类数组对象时需要额外的步骤将其转换为真正的数组。
可读性差：对于不熟悉类数组对象的开发者来说，类数组对象的使用可能会降低代码的可读性和可维护性。

总结起来，JS 创建类数组的方法主要有使用arguments对象、使用NodeList、手动创建对象并赋予length属性。在实际开发中，根据具体场景选择合适的方法，并灵活运用类数组对象和数组之间的转换，可以提高代码的效率和可维护性。