目录
一、把类似数组的对象转换成数组
二、延伸-Array.from()
首页 web前端 js教程 javascript怎么将对象转换为数组

javascript怎么将对象转换为数组

Jun 22, 2021 pm 05:44 PM
javascript 对象 数组

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

javascript怎么将对象转换为数组

本教程操作环境: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学习教程

以上是javascript怎么将对象转换为数组的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
如何使用 foreach 循环去除 PHP 数组中的重复元素? 如何使用 foreach 循环去除 PHP 数组中的重复元素? Apr 27, 2024 am 11:33 AM

使用foreach循环去除PHP数组中重复元素的方法如下:遍历数组,若元素已存在且当前位置不是第一个出现的位置,则删除它。举例而言,若数据库查询结果存在重复记录,可使用此方法去除,得到不含重复记录的结果。

PHP数组深度复制的艺术:使用不同方法实现完美复制 PHP数组深度复制的艺术:使用不同方法实现完美复制 May 01, 2024 pm 12:30 PM

PHP中深度复制数组的方法包括:使用json_decode和json_encode进行JSON编码和解码。使用array_map和clone进行深度复制键和值的副本。使用serialize和unserialize进行序列化和反序列化。

PHP 数组键值翻转:不同方法的性能对比分析 PHP 数组键值翻转:不同方法的性能对比分析 May 03, 2024 pm 09:03 PM

PHP数组键值翻转方法性能对比表明:array_flip()函数在大型数组(超过100万个元素)下比for循环性能更优,耗时更短。手动翻转键值的for循环方法耗时相对较长。

PHP数组多维排序实战:从简单到复杂场景 PHP数组多维排序实战:从简单到复杂场景 Apr 29, 2024 pm 09:12 PM

多维数组排序可分为单列排序和嵌套排序。单列排序可使用array_multisort()函数按列排序;嵌套排序需要递归函数遍历数组并排序。实战案例包括按产品名称排序和按销售量和价格复合排序。

如何将 MySQL 查询结果数组转换为对象? 如何将 MySQL 查询结果数组转换为对象? Apr 29, 2024 pm 01:09 PM

将MySQL查询结果数组转换为对象的方法如下:创建一个空对象数组。循环结果数组并为每一行创建一个新的对象。使用foreach循环将每一行的键值对赋给新对象的相应属性。将新对象添加到对象数组中。关闭数据库连接。

PHP 数组分组函数在数据整理中的应用 PHP 数组分组函数在数据整理中的应用 May 04, 2024 pm 01:03 PM

PHP的array_group_by函数可根据键或闭包函数对数组中的元素分组,返回一个关联数组,其中键是组名,值是属于该组的元素数组。

深度复制PHP数组的最佳实践:探索高效的方法 深度复制PHP数组的最佳实践:探索高效的方法 Apr 30, 2024 pm 03:42 PM

在PHP中执行数组深度复制的最佳实践是:使用json_decode(json_encode($arr))将数组转换为JSON字符串,然后再将其转换回数组。使用unserialize(serialize($arr))将数组序列化为字符串,然后将其反序列化为新数组。使用RecursiveIteratorIterator迭代器对多维数组进行递归遍历。

C++ 函数返回对象时有什么需要注意的? C++ 函数返回对象时有什么需要注意的? Apr 19, 2024 pm 12:15 PM

在C++中,函数返回对象需要注意三点:对象的生命周期由调用者负责管理,以防止内存泄漏。避免悬垂指针,通过动态分配内存或返回对象本身来确保对象在函数返回后仍然有效。编译器可能会优化返回对象的副本生成,以提高性能,但如果对象是值语义传递的,则无需副本生成。

See all articles