javascript怎么将对象转换为数组
时间:2021-07-02
来源:互联网
标签:
今天PHP爱好者给大家带来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转换

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怎么将对象转换为数组的详细内容,更多请关注php爱好者其它相关文章!
-
PHP目录分隔符DIRECTORY_SEPARATOR常量用法详解 时间:2025-11-21 -
awk数组用法详解(创建、删除、检查、遍历、排序等) 时间:2025-11-21 -
ActionContext构造函数详解 时间:2025-11-21 -
Android ArrayAdapter适配器作用及用法详解 时间:2025-11-21 -
什么是数据库备份?数据库备份有几种方式? 时间:2025-11-21 -
Oracle数据库备份和恢复的几种方法详解 时间:2025-11-21
今日更新
-
抖音火山版网页版官网-抖音火山版网页登录入口
阅读:18
-
欧易合约盘口异常消失原因及应对策略解析
阅读:18
-
deepseek网页版快速登录入口-deepseek在线高效使用指南
阅读:18
-
比特币入门指南_从零开始了解比特币的基础知识
阅读:18
-
欧易理财脱锚事件如何冲击加密市场走势
阅读:18
-
山是什么梗网络热词揭秘 搞笑内涵段子来源解析
阅读:18
-
山水集团是什么梗揭秘其背后爆火原因及真实含义解析
阅读:18
-
学信网四六级成绩查询入口_四六级分数一键查
阅读:18
-
欧易功能模块卡顿问题解析与优化方案
阅读:18
-
比特币到底是什么_简单易懂的加密货币解说
阅读:18










