2021-3-17 类数组和数组的区别,dom的类数组如何转换成

2021-03-18  本文已影响0人  威少带我砍三双
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 的位置, 所以下面的2对应1,  之后length变3, push(2) 之后 3对应 2
  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: ƒ}
上一篇下一篇

猜你喜欢

热点阅读