第 18 题：类数组和数组的区别，dom 的类数组如何转换成数组

[lgwebdream]

欢迎在下方发表您的见解

[Genzhen]

1）定义

• 数组是一个特殊对象,与常规对象的区别：
  • 1. 当由新元素添加到列表中时，自动更新length属性
  • 2. 设置length属性，可以截断数组
  • 3. 从Array.protoype中继承了方法
  • 4. 属性为'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）类数组转换为数组

• 转换方法
  • 1. 使用 Array.from()
  • 2. 使用 Array.prototype.slice.call()
  • 3. 使用 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: ƒ}

[GolderBrother]

• 转换方法
  • 使用 Array.from()
  • 使用 Array.prototype.slice.call()
  • 使用 Array.prototype.forEach() 进行属性遍历并组成新的数组
• 转换须知
  • 转换后的数组长度由 length 属性决定。索引不连续时转换结果是连续的，会自动补位。

[Kisthanny]

/**
 * 类数组和数组都有length属性
 * 类数组不可迭代，不能使用Array原型的方法map/filter/reduce等等
 */
const childNodes = document.body.childNodes
const htmlCollection = document.body.children

childNodes.forEach(el=>console.log(e)) // 正常输出

childNodes.map(el=>console.log(e)) // TypeError: childNodes.map is not a function

// htmlCollection同理

Array.from(childNodes).map(el=>console.log(e)) // 正常输出
Array.prototype.slice.call(childNodes).map(el=>console.log(e)) // 正常输出