类数组和数组的区别，dom 的类数组如何转成数组

昨日回顾

react 事件绑定原理

监听 document，把事件用 react 封装的合成事件封装并突出新的 event 分发到各个处理函数中。有利于统一减少内存的消耗，还能在组件挂载时统一订阅和移除事件。React 阻止冒泡的事件是 event.preventDefault。

今日解题

1）定义

• 数组是一个特殊对象，与常规对象的区别
  • a. 当有新元素添加到列表中时，自动更新 length 属性
  • b. 设置 length 属性，可以截断数组
  • c. 从 Array.prototype 中继承了方法
  • d. 属性为 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）

类数组转换为数组

• 转换方法
  • a. Array.from()
  • b. Array.prototype.slice.call()
  • c. Array.prototype.forEach()
• 转换须知
  • 转换后长度由length属性决定，索引不连续时转换结果是连续的，会自动补位。
  • 仅考虑 0 或正整数的索引
  • 使用 slice 转换产生稀释数组
  • push 操作的索引为 length 位置

let a01 = {
  length: 4,
  0: 0,
  1: 1,
  3: 3,
  4: 4,
  5: 5,
};
console.log(Array.prototype.slice.call(a01)); //[0, 1, empty, 3] // 稀释数组
///
let a02 = {
  length: 4,
  "-1": -1,
  0: 0,
  1: 1,
  a: "a",
  3: 3,
};
console.log(Array.from(a02)); // [0, 1, undefined, 3] // 密集型数组

let a03 = {
  2: 3,
  3: 4,
  length: 2,
  push: Array.prototype.push,
};
a03.push(1);
console.log(a03); // {2: 1, 3: 4, length: 3, push: ƒ}
a03.push(2);
console.log(a03); // {2: 1, 3: 2, length: 4, push: ƒ}