js把对象转换成数组

1.把类似数组的对象转换成数组

【1】什么是类似数组的对象

比如:

let arrayLike = {
    '0':"z",
    '1':"y",
    '2':"k",
    length:3
};

本质是有length属性,可以类似数组的获取元素的方式arrayLike[0]、arrayLike[1]去获取元素,也可以通过arrayLike.length获取伪数组的长度。

常见的伪数组有通过DOM操作获取的NodeList集合(document.querySelectorAll('div')),以及函数形参arguments。

【2】转换方法

方法一:通过[].slice.call(arrayLike)

//获取当前dom的span组成的伪数组
let spanDomArr = document.querySelectorAll('span');

//通过数组的方法forEach遍历spanDomArr
let arr = [].slice.call(spanDomArr);

//因为spanDomArr是伪数组,不支持数组的forEach,所以需要先转换成数组
arr.forEach(function(span){
    console.log(span)
});

方法二:通过Array.from(arrayLike)

//获取当前dom的span组成的伪数组
let spanDomArr = document.querySelectorAll('span');

//通过数组的方法forEach遍历spanDomArr
//因为spanDomArr是伪数组,不支持数组的forEach,所以需要先转换成数组
Array.from(spanDomArr).forEach(function(span){
    console.log(span)
});

2、延伸-Array.from()

【1】作用:

                1-可以将类似数组的对象转换成数组;

                2-可以把可遍历的对象转换成数组(包括ES6新增的数据结构Set和Map);

【2】实际应用:

                1-如果当前浏览器未部署此方法,可以使用Array.prototype.slice方法替代

/*
 *  方法名:objectToArray
 *  功能介绍:把类似数组的对象、可遍历的对象转换成数组
 *  参数:obj-需要转换的对象
 */
var objectToArray = function(obj){
   return Array.from ? Array.from(obj) : [].slice.call(obj);
};

                2-如果参数是数组,则会返回一个一模一样的数组

Array.from(["z","y","k"]);
//打印:["z","y","k"]

                3-仅有length属性的对象,无法通过array.from转换

                 4-Array.from第二个参数:用来对每个元素进行处理,将处理后的值放入数组返回。

let arrayLike = {
    "0" : "z",
    "1" : "y",
    "2" : "k",
    "length":3
};
Array.from(arrayLike,x=>x+'1');
//等同于
Array.from(arrayLike).map(x=>x+'1');

//打印:["z1","y1","k1"]

 

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值