类数组和数组的区别,dom的类数组如何转换成数组
转换方法使用 Array.from()使用 Array.prototype.slice.call()使用 Array.prototype.forEach() 进行属性遍历并组成新的数组 转换须知转换后的数组长度由 length 属性决定。索引不连续时转换结果是连续的,会自动补位。 1)定义数组是一个特殊对象,与常规对象的区别:当由新元素添加到列表中时,自动更新length属性设置length属性,可以截断数组从Array.protoype中继承了方法属性为"Array" 类数组是一个拥有length属性,并且他属性为非负整数的普通对象,类数组不能直接调用数组方法。 2)区别
本质:类数组是简单对象,它的原型关系与数组不同。// 原型关系和原始值转换 let arrayLike = { length: 10, }; console.log(arrayLike instanceof Array); // false console.log(arrayLike.__proto__.constructor === Array); // false console.log(arrayLike.toString()); // [object Object] console.log(arrayLike.valueOf()); // {length: 10} let array = []; console.log(array instanceof Array); // true console.log(array.__proto__.constructor === Array); // true console.log(array.toString()); // "" console.log(array.valueOf()); // []
3)类数组转换为数组 转换方法使用 Array.from()使用 Array.prototype.slice.call()使用 Array.prototype.forEach() 进行属性遍历并组成新的数组 转换须知转换后的数组长度由 length 属性决定。索引不连续时转换结果是连续的,会自动补位。代码示例 let al1 = { length: 4, 0: 0, 1: 1, 3: 3, 4: 4, 5: 5, }; console.log(Array.from(al1)) // [0, 1, undefined, 3]②仅考虑 0或正整数 的索引 // 代码示例 let al2 = { length: 4, "-1": -1, "0": 0, a: "a", 1: 1 }; console.log(Array.from(al2)); // [0, 1, undefined, undefined]③使用slice转换产生稀疏数组 // 代码示例 let al2 = { length: 4, "-1": -1, "0": 0, a: "a", 1: 1 }; console.log(Array.prototype.slice.call(al2)); //[0, 1, empty 2]
4)使用数组方法操作类数组注意地方 let arrayLike2 = { 2: 3, 3: 4, length: 2, push: Array.prototype.push } // push 操作的是索引值为 length 的位置 arrayLike2.push(1); console.log(arrayLike2); // {2: 1, 3: 4, length: 3, push: ƒ} arrayLike2.push(2); console.log(arrayLike2); // {2: 1, 3: 2, length: 4, push: ƒ}