利用扩展运算符转数组

最新推荐文章于 2023-02-03 23:25:10 发布

独酌101112

最新推荐文章于 2023-02-03 23:25:10 发布

阅读量505

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43353524/article/details/109232172

版权

前端专栏收录该内容

103 篇文章 2 订阅

订阅专栏

本文探讨了阮一峰如何解释ES6中扩展运算符如何将遍历器接口的对象转换为真正的数组，同时通过DOM节点实例说明。对于非遍历器对象，扩展运算符的局限性也进行了阐述，通过arrayLike对象的示例展示错误原因。

摘要由CSDN通过智能技术生成

阮一峰的ES6指出任何定义了遍历器接口的对象，都可以用扩展运算符转为真正的数组。
以遍历到DOM节点为例：

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

但是对于没有部署遍历器Iterator的对象，扩展运算符则束手无策：

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr = [...arrayLike];
console.log(arr);//TypeError: arrayLike is not iterable

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

独酌101112

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

文件转数组

04-12

以下是关于“文件转数组”这一主题的详细解释。 1. 文件与数组的关系：文件和数组在计算机科学中都是数据存储的形式。文件是存储在磁盘或其他存储设备上的数据集合，而数组则是内存中的一段连续空间，用于存储相同...

ES6扩展运算符...将为数组（对象）转换成真数组

weixin_51434199的博客

03-27

664

伪数组 <div></div> <div></div> <div></div> <script> const name = document.querySelectorAll('div'); //querySelectorAll() 则会返回匹配到的所有元素。 console.log(name); </script> 输出结果：

参与评论您还未登录，请先登录后发表或查看评论

JavaScript数组问题(ES6语法)

QDzzzhy

03-09

342

扩展运算符 标识为三个点:...,可以将一个数组转变为参数序列 console.log(...[1,2,3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) //1,2,3,4,5 [...document.querySelectorAll('div')] //[<div>,<div>,<div>] //该运算符主...

es6 扩展运算符（…）及转化为数组的方法

yadang2的博客

08-19

9347

es6 扩展运算符（…） 1.合并数组 es6写法 const a1 = [1, 2, 3], a2 = [4], a3 = [5, 6]; const b = [...a1, ...a2, ...a3] // [1, 2, 3, 4, 5, 6] es5写法 a1.concat(a2, a3) // [1, 2, 3, 4, 5, 6] 2.解构赋值 es6写法 const [firs...

ES6-扩展运算符...的超好用&实用方法（对象、字符串转数组, 合并对象、数组等）

weixin_44258964的博客

12-10

833

扩展运算符的常用、超好用方法, 对象转数组、字符串转数组, 合并对象、合并数组方法,

扩展运算符用于转换数组 ES6 230202

pyhui的技术博客

02-03

扩展运算符用于转换数组 ES6 230202

06-21

12-15

本文主要讨论了三种将list转换为数组以及数组转换为List的方法，并分析了它们的特点和适用场景。一、最常见方式：Arrays.asList() 这种方法简单易用，但并不总是最佳选择。通过`Arrays.asList(strArray)`可以直接...

js字符串转数组源码文档

02-04

扩展运算符（`...`）是ES6引入的另一个特性，它允许将数组或类数组对象展开为单独的元素。在字符串上下文中，这同样可以将字符串转换为字符数组： ```javascript let arr = "今天中午吃的大馍馍"; console.log(...

php object转数组示例

10-26

总结来说，PHP中对象转数组的操作通过递归函数来实现，主要利用`is_object`、`is_array`以及`get_object_vars`等函数来检测数据类型和提取对象属性。掌握了对象和数组之间的转换技巧，对于高效处理数据以及与前端...

es6笔记····数组的扩展

齐枫的博客

11-02

692

数组的扩展扩展运算符 含义扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('di

ES6---扩展运算符和rest‘...’(三点运算符)，在数组、函数、set/map等中的应用

Wbiokr的博客

03-28

4114

ES6新增的三点运算符，是由三个点表示，在数组中扮演着重要的角色，可以对数组进行合并与分解、可以对set等数据结构进行转换、可以对函数参数进行简化表示，接下来，我们一起揭开其神秘面纱…●三点—rest参数:let fun1=function(...args){ for(let arg of args){ console.log(arg); }; console

九、数组的扩展（扩展运算符）

long_steve的博客

08-28

1741

其他都保持不变。

数组扩展运算符和对象扩展运算符

Belle_Chou的博客

08-29

785

https://segmentfault.com/q/1010000012679484

如何将类数组转换为真正的数组

weixin_42733155的博客

07-19

1万+

开发过程中，有很多时候获取到的是类似数组的对象。比如元素的集合（elementcollection,nodeList，以及今天开发时发现classList也是类数组）。有时我们需要类数组去调用数组的方法，怎么办？一、遍历类数组，依次将元素放入一个空数组。类数组本身虽然不是数组，但是有interator接口，所以可遍历。（interator指可遍历、可迭代）例如：页面有三个...

ES6 数组的扩展：扩展运算符

-ELZ-

11-10

1447

文章目录扩展运算符应用扩展运算符 扩展运算符（…）作用是将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2, 3]); // 1 2 3 该运算符主要用于函数调用： function _push(arr, ...items) { // 这里的 ...items 将会以数组的形式接收所有剩余的参数 console.log(items); // [2, 3] arr.push(...items);

总结一下JavaScript中类似数组的对象转化为真正的数组的几种方法

Coder小何

11-15

636

总结一下JavaScript中类似数组的对象转化为真正的数组的几种方法常见的类似数组的对象基本有以下几种： let arrayLike ={ '0': 'a', '1': 'b', '2': 'c', length :3 } // 这种类数组是未定义遍历接口的对象 const oDiv = document.querySelectorAll('div'); // 定义了遍历器接口的对象还有一种类数组是函数内部的argument 对象 arg

对象转换为数组的方法