JavaScript中的类数组

JavaScript中的类数组

---

前言

在实现一个获取ul内容并排序的功能的时候发现无法对document.getElementbyId("test").children返回的htmlCollection对象进行排序。

---

一、htmlCollection是什么？

htmlCollection是一个类数组。

二、什么是类数组？

类数组，Array-like，typeof返回object。

类数组必须有length属性，可以通过length遍历该对象。类数组中的元素属性名必须是数字或者是可以转化为数字的字符。

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(arr); // ['1', '2', 3]
 
// 没有 length 属性,则返回空数组
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []
 
// 元素属性名不为数值且无法转换为数值，返回长度为 length 元素值为 undefined 的数组  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

三、有哪些类数组？

常见的有

• arguments对象：在函数内部自动创建，储存的是函数调用时传递的参数。
• htmlCollection：通过getElementsByTagName，getElementsByClassName，.children等方法获取的dom列表
• NodeList：通过querySelectorAll()，getElementsByName等方法获取的NodeList节点列表

字符串具有类数组的特性，但是类数组一般特指对象。

四、怎么对类数组进行操作？

1、for循环

类数组不具有数组原型上的丰富的方法，一般只能用for循环进行遍历操作。
这种方法比较消耗性能，一般不用。

2、将类数组转化为数组，对数组进行操作

1. Array.from(类数组)

const arrayLike = {
  0: 1,
  1: 2,
  length: 2,
};
console.log(Array.from(arrayLike)); // [ 1, 2 ]

2. 对类数组进行for循环，将每一项都复制给同一个空数组。

const arr = [];
const arrayLike = {
 0: 1,
 1: 2,
 length: 2,
};

for (let i = 0; i < arrayLike.length; i++) {
 arr[i] = arrayLike[i];
}

console.log(arr); //  [1, 2]

3. slice、concat等

const arrayLike = {
0: 1,
1: 2,
length: 2,
};
const array1 = Array.prototype.slice.call(arrayLike);
console.log(array1); // [ 1, 2 ]

const array2 = Array.prototype.concat.apply([], arrayLike);
console.log(array2); // [ 1, 2 ]

4. Array.apply

const arrayLike = {
 0: 1,
 1: 2,
 length: 2,
};

console.log(Array.apply(null, arrayLike)); // [ 1, 2 ]

5. 扩展运算符

console.log([...document.body.childNodes]); // [div, script, script...]

// arguments
function argumentsTest() {
 console.log([...arguments]); // [ 1, 2, 3 ]
}
argumentsTest(1, 2, 3);

3、使用call和apply显示绑定this的指向

const arrayLike = {
  0: "i love",
  1: "you",
  length: 1,
};
console.log([].filter.call(arrayLike, (item) => item.includes("i"))); // [ 'i love' ]

总结

目前我不能确定当时无法对获取到的类数组做排序的原因是该数组只读或者是与该类数组内容与页面一致导致我无法修改。以后再说。