美文网首页
2021-3-17 类数组和数组的区别,dom的类数组如何转换成

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

作者: 威少带我砍三双 | 来源:发表于2021-03-18 09:26 被阅读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: ƒ}
    

    相关文章

      网友评论

          本文标题:2021-3-17 类数组和数组的区别,dom的类数组如何转换成

          本文链接:https://www.haomeiwen.com/subject/qkkucltx.html