javascript将对象转换为数组的方法

发布时间:2021-06-23 10:11:04 作者:chen
来源:亿速云 阅读:238

本篇内容主要讲解“javascript将对象转换为数组的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript将对象转换为数组的方法”吧!

javascript对象转换为数组的方法:1、通过“[].slice.call(对象)”语句;2、使用“Array.from(对象)”语句,“Array.from()”方法可把可遍历的对象转换成数组(包括Set和Map数据结构)。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

一、把类似数组的对象转换成数组

1、什么是类似数组的对象

比如:

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

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

常见的伪数组有通过DOM操作获取的NodeList集合(document.querySelectorAll('p')),以及函数形参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)
});

二、延伸-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转换

javascript将对象转换为数组的方法

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"]

到此,相信大家对“javascript将对象转换为数组的方法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 将JavaScript对象转换为json格式的方法
  2. js如何将数组转换为对象

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:javascript有哪些常用事件

下一篇:javascript如何查询数组长度

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》