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、将类数组转化为数组,对数组进行操作
Array.from(类数组)
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
console.log(Array.from(arrayLike)); // [ 1, 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]
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 ]
Array.apply
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
console.log(Array.apply(null, arrayLike)); // [ 1, 2 ]
- 扩展运算符
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' ]
总结
目前我不能确定当时无法对获取到的类数组做排序的原因是该数组只读或者是与该类数组内容与页面一致导致我无法修改。以后再说。