利用扩展运算符转数组

最新推荐文章于 2023-10-18 11:54:36 发布
最新推荐文章于 2023-10-18 11:54:36 发布
阅读量505 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43353524/article/details/109232172
版权
本文探讨了阮一峰如何解释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
独酌101112
关注
专栏目录
ES6 常见数组API 及 利用ES6中的Proxy对象完成双向数据绑定功能
azyslwj的博客
02-13 1203
这里是引用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"&...
ES6---扩展运算符和rest‘...’(三点运算符)，在数组、函数、set/map等中的应用
Wbiokr的博客
03-28 4114
ES6新增的三点运算符，是由三个点表示，在数组中扮演着重要的角色，可以对数组进行合并与分解、可以对set等数据结构进行转换、可以对函数参数进行简化表示，接下来，我们一起揭开其神秘面纱…●三点—rest参数:let fun1=function(...args){ for(let arg of args){ console.log(arg); }; console
ES6-扩展运算符...的超好用&实用方法（对象、字符串转数组, 合并对象、数组等）
weixin_44258964的博客
12-10 833
扩展运算符的常用、超好用方法, 对象转数组、字符串转数组, 合并对象、合并数组方法,
扩展运算符用于转换数组 ES6 230202
pyhui的技术博客
02-03 83
扩展运算符用于转换数组 ES6 230202
es6 扩展运算符（…）及转化为数组的方法
yadang2的博客
08-19 9346
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...
扩展运算符结合解构赋值生成数组
独酌101112的博客
10-03 342
思考这样一个问题，给定一个数组，将其分为两部分，第一部分是首部元素，第二部分是剩余的部分，如何实现呢？ 最基本的ES5写法： var list = [0, 1, 2, 3] var a = list[0] var rest = list.slice(1);//ES5 console.log(a); console.log(rest); 那位for循环遍历的同学先坐下 相对来说还是比较麻烦的，来看一下ES6的写法： var list = [0, 1, 2, 3]; var a, rest=[]; [a, .
js代码-手写代码练习-----类数组转数组
07-16
除了slice方法，ES6引入了新的扩展运算符（...），它也可以用来将类数组对象转化为数组： ```javascript function example() { var args = [...arguments]; // 现在args是一个真正的数组 } example(1, 2, 3); //...
arguments转数组
09-11
可以使用 ES6 中的扩展运算符将 arguments 对象转换为数组。示例如下： ``` function myFunction() { const args = [...arguments]; console.log(args); } myFunction(1, 2, 3); // 输出 [1, 2, 3] ``` 除此...
js代码-013手写代码练习-----类数组转数组 ,打印出当前网页使用了多少种HTML元素
07-16
3. **扩展运算符（...）**：同样是在ES6中引入，可以用于数组的复制和类数组对象的转换： ```javascript var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = [...arrayLike]; ``` 接下来，我们...
ES6扩展运算符...将为数组（对象）转换成真数组
weixin_51434199的博客
03-27 663
伪数组 <div></div> <div></div> <div></div> <script> const name = document.querySelectorAll('div'); //querySelectorAll() 则会返回匹配到的所有元素。 console.log(name); </script> 输出结果：
ES6内置对象扩展运算符的应用——将伪数组转换为真正的数组
dandanmei0513的博客
08-15 172
扩展运算符的应用——将伪数组转换为真正的数组
JavaScript数组问题(ES6语法)
QDzzzhy
03-09 340
扩展运算符 标识为三个点:...,可以将一个数组转变为参数序列 console.log(...[1,2,3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) //1,2,3,4,5 [...document.querySelectorAll('div')] //[&lt;div&gt;,&lt;div&gt;,&lt;div&gt;] //该运算符主...
怎样利用扩展运算符将伪数组转换为真正的数组？
最新发布
zy1992As的博客
10-18 60
上述代码中，第8~13行代码在页面中定义了6个div元素;第17行代码通过扩展运算符将伪数组转换成以逗号分隔的参数序列，然后在参数序列外面添加一个数组中括号，以便将伪数组转换为真正的数组;第l8行代码调用数组的push0方法来验证ary是否是真正的数组;第19行代码在控制台输出ay数组结果，通过返回的结果可以看出a已经被追加到ary数组中，因此可以得出ary是真正的数组这一结论。首先应了解什么是伪数组，伪数组可以应用数组的length属性但是无法直接调用数组方法，它也可以像数组一样进行遍历。
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
九、数组的扩展（扩展运算符）
long_steve的博客
08-28 1737
其他都保持不变。
如何将类数组转换为真正的数组
热门推荐
weixin_42733155的博客
07-19 1万+
开发过程中，有很多时候获取到的是类似数组的对象。比如元素的集合（elementcollection,nodeList，以及今天开发时发现classList也是类数组）。有时我们需要类数组去调用数组的方法，怎么办？   一、遍历类数组，依次将元素放入一个空数组。 类数组本身虽然不是数组，但是有interator接口，所以可遍历。（interator指可遍历、可迭代） 例如： 页面有三个...
将字符串转换为数组(扩展运算符)
imkaifan的博客
04-16 260
字符串也是有运算扩展符的，可以将字符串转换为数组 const name = "fanfusuzi" const arrName = [...name] console.log(arrName) //["f", "a", "n", "f", "u", "s", "u", "z", "i"]
ES6中的一些新特性
inticaler的博客
07-20 363
一、var顶层对象，在浏览器环境指的是window对象，在Node指的是global对象2、使用var声明的变量存在变量提升的情况在函数中使用使用var声明变量时候，该变量是局部的而如果在函数内不使用var，该变量是全局的二、let1、let是ES6新增的命令，用来声明变量只要块级作用域内存在let命令，这个区域就不再受外部影响let不允许在相同作用域中重复声明注意的是相同作用域，下面这种情况是不会报错的，因此，我们不能在函数内部重新声明参数三、const四、区别。...
ES6-数组的扩展-扩展运算符
极北
11-15 857
扩展运算符是三个点（...）。好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。   console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [&lt;div&gt;, &lt;div&g...
扩展运算符
05-25
扩展运算符（spread operator）是在ES6中引入的种新特性，用三个点（...表示，可以将一个可迭代对象（如数组、字符串等）展开成多个元素，并且可以在函数调用的参数中使用。 1. 展开数组 可以使用扩展算符将数组展多个元素： javascript const arr1 = [1, , 3]; const arr2 = [...arr1 4, 5]; console.log(arr2); [1, 2, 3, 4, 5] ``` 2. 合并数组 使用扩展运算符还可以方便地合并多个数组： ```javascript const arr1 = [1, 2, 3]; const arr2 = [4, 5]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5] ``` 3. 复制数组 使用扩展运算符可以很方便地复制一个数组： ```javascript const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3] ``` 4. 字符串转数组 可以使用扩展运算符将字符串转换为字符数组： ```javascript const str = "hello"; const arr = [...str]; console.log(arr); // ['h', 'e', 'l', 'l', 'o'] ``` 5. 函数调用参数 使用扩展运算符可以方便地将数组作为函数的参数传递： ```javascript function myFunction(x, y, z) { console.log(x, y, z); } const arr = [1, 2, 3]; myFunction(...arr); // 1 2 3 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值