[04]Web前端进阶—JS伪数组

本文探讨了JavaScript中的伪数组特点,包括具有length属性和下标访问数据但不具备数组方法。列举了常见的伪数组实例,如字符串、arguments对象和DOM元素集合。介绍了如何通过ES6的Array.from和ES5的Array.prototype.slice.call方法将伪数组转换为真数组,以便使用数组方法。


一、伪数组的特点

  1. 具有lenght属性
  2. 可以使用下标访问数据
  3. 不具有数组的方法,比如push( ),pop( )等

二、伪数组

本质上是一个对象,有index、length等属性,但是不能使用数组的方法,如foreach( )、filter( )、map( )、find( )、reduce()等方法,但是能够通过遍历数组的方式进行访问(for 循环)

常见的伪数组

  1. 字符串之类的
  2. 函数的arguments(参数)、
  3. 通过document.getElementByTagName( )等获得的元素集合
  4. key为0,1,2数字且有length的模糊性的对象
 //1.字符串
    let str = 'hello';
    console.log(str.length);
    console.log(str[1]);


    //2.function的arguments对象
    let fun = function(a,b,c){
        //arguments是一个对象
        console.log(arguments);//Arguments { 0: 1, 1: 2, 2: "123", … }
        console.log(a+b);//3
    }
    fun(1,2,'123');


    //3.含有length的"假"对象
    let obj = {
        length:2
    }
    console.log(obj.length);//有length
    console.log(obj[1]);//undefined
    obj[1] = 'hello';//这样就有obj[1];
    console.log(obj);//{ 1: "hello", length: 2 }

伪数组转真

  1. ES6中将伪数组转换为真数组:var arr = Array.from(arguments);即可使用数组的方法

  2. ES5中将伪数组转换为真数组:var arr=Array.prototype.slice.call(arguments) 或 Array.prototype.slice.apply(arguments);

  3. 使用[].slice.call(arguments) 或 [].slice.apply(arguments)

  4. var arr = Array.of(arguments)

  5. var arr = new Array(arguments)

    注意:是返回一个新的数组
    
//例
let obj = {
        length:2
    }
    var arr = new Array(obj);
    var arr1 = Array.from(obj);
    var arr3 = Array.prototype.slice.call(obj);
    var arr4 = Array.prototype.slice.apply(obj)
    console.log(arr1);
    console.log(arr3);
    console.log(arr4);

三、最后

如若文章有误,作者虚心请教,谢谢阅读

评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值