Javascript数组及类数组相关原理详解

在Javascript中数组是一个非常重要的数据结构，它可以存储多个数据并进行操作。但是在实际开发中，我们还会遇到类数组对象，这些对象类似于数组但并不是数组，本文将详细介绍Javascript数组及类数组相关原理。

数组基本操作

定义数组

定义数组有两种方式，一种是通过字面量方式，另一种是通过构造函数方式。

// 字面量方式
const arr1 = [1, 2, 3];

// 构造函数方式
const arr2 = new Array(1, 2, 3);

获取数组长度

通过length属性可以获取数组的长度。

const arr = [1, 2, 3];
console.log(arr.length); // 输出：3

访问数组元素

通过下标可以访问数组中的元素。

const arr = [1, 2, 3];
console.log(arr[0]); // 输出：1

迭代数组

可以通过for循环、forEach等方法对数组进行迭代。

const arr = [1, 2, 3];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

类数组对象

类数组对象是一个包含length属性和一些数字类型属性的对象，它们看起来类似于数组，但并不是真正的数组对象。以下是一些常见的类数组对象。

arguments对象

在调用函数时，会自动生成arguments对象，这个对象就是一个类数组对象。

function test() {
  console.log(arguments);
}

test(1, 2, 3); 
// 输出: {
//  "0": 1,
//  "1": 2,
//  "2": 3,
//  "length": 3
//}

NodeList对象

NodeList对象是一个包含一组节点的类数组对象，常用于DOM操作。

<ul id="list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<script>
  const list = document.querySelectorAll('li');
  console.log(list); // 输出: NodeList(3) [li, li, li]
</script>

自定义类数组对象

我们也可以自己创建一个类数组对象。

const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

类数组转数组

类数组对象不能使用数组的方法，但我们可以通过Array.from、Array.prototype.slice.call等方法将类数组转为数组。

Array.from

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

const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

const arr = Array.from(obj);
console.log(arr); // 输出: [1, 2, 3]

Array.prototype.slice.call

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

function test() {
  const arr = Array.prototype.slice.call(arguments);
  console.log(arr);
}

test(1, 2, 3); // 输出: [1, 2, 3]

示例说明

示例一：计算变量参数的总和

function sum() {
  let result = 0;
  Array.prototype.forEach.call(arguments, item => {
    result += item;
  });
  return result;
}

console.log(sum(1, 2, 3, 4)); // 输出: 10

在上面的例子中，我们通过Array.prototype.forEach方法迭代arguments对象，并进行求和操作。

示例二：类数组转数组

const nodeList = document.querySelectorAll('li');
const arr = Array.from(nodeList);
console.log(arr); // 输出: [li, li, li]

在上面的例子中，我们通过Array.from方法将NodeList转为数组。