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

最新推荐文章于 2026-01-09 17:34:01 发布

原创最新推荐文章于 2026-01-09 17:34:01 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript

博客介绍了利用扩展运算符把伪数组转成真正数组的方法，转换后的数组可使用相关方法，属于前端开发中ES6的应用。

利用扩展运算符把伪数组转成真正的数组
好处是
转换后可以使用数组的相关方法

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鲸鱼编程pyhui

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

js数组的方法和扩展运算符

彭世瑜的博客

10-10

2697

ES5 数组方法示例使用的数组 var arr = [1, 2, 3]; 不改变原数组函数说明示例 Array.isArray() 判断一个值是否为数组 Array.isArray(arr); // true valueOf() 返回数组本身 arr.valueOf(); // [1, 2, 3] toString() 返回数组的字符串形 arr.toString...

ES6扩展运算符用法

liuye066的专栏

06-13

1093

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中用法：1、将一个数组放入另一个数组中 2、拼接数组使用扩展运算符可以代替concat()来拼接数组。 3、扩展运算符可以与解构赋值结合起来，生成数组 4、Math 5、将类数组或可遍历对象转换为真正的数组 6、字符串转数组......

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

利用扩展运算符转数组

独酌101112的博客

10-22

571

阮一峰的ES6指出任何定义了遍历器接口的对象，都可以用扩展运算符转为真正的数组。以遍历到DOM节点为例： let nodeList = document.querySelectorAll('div'); let array = [...nodeList]; 但是对于没有部署遍历器Iterator的对象，扩展运算符则束手无策： let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = [..

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

yadang2的博客

08-19

9459

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—数组的扩展操作（扩展运算符）

热门推荐

qq_24892029的博客

01-31

1万+

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

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

weixin_51434199的博客

03-27

718

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

ES6 扩展运算符：简化数组与对象操作的利器

wcy041222的博客

09-12

284

本文详细介绍了ES6扩展运算符(...)的用法和应用场景。扩展运算符可以将可迭代对象展开为独立元素，主要功能包括：1)数组复制与合并；2)函数参数传递；3)字符串转数组；4)类数组对象转换；5)对象复制与合并；6)与解构赋值结合使用；7)在React等框架中传递属性。文章还区分了扩展运算符与剩余参数的区别，并指出其浅拷贝特性及使用限制。扩展运算符极大简化了JavaScript代码，在数据处理和前端开发中应用广泛。

ES6之扩展运算符（...）关于数组和对象的常见用法

qq_58638270的博客

03-11

444

扩展运算的定义(# 扩展运算符的定义) 数组的扩展运算符(# 数组的扩展运算符) 对象的扩展运算符(# 对象的扩展运算符) 总结(# 总结)

ES6数组操作新特性，拓展运算符

m0_46335802的博客

06-14

288

ES6数组操作新特性，拓展运算符

ES6的扩展运算符

Jadon_z的个人博客

09-01

467

es6的扩展运算符

es6数组之扩展运算符操作实例分析

11-21

4. 替代`Array.from()`：对于某些非数组对象，如类数组对象，可以使用扩展运算符转换为真正的数组，如`const divs = [...document.querySelectorAll('div')]`。 5. 处理函数参数：扩展运算符可以方便地处理不定数量...

ES6数组扩展运算符详解与实例

"ES6数组的扩展运算符是一个强大的特性，用于处理数组的组合、复制以及在函数调用中的参数传递。扩展运算符以三个点（…）表示，它可以把数组转化为逗号分隔的参数序列，这对于处理多个参数或者数组元素的情况非常...

ES6扩展运算符深度解析：数组操作与函数调用优化

扩展运算符的作用类似于rest参数，但它的作用是将一个数组转换为单个参数列表，用于函数调用或数组操作。 1. 数组扩展：在函数调用中，扩展运算符允许我们将数组作为单个参数传递，如`f(-1, [0, 1], 2, [3])`，这...

从 AMD 到 ES6 模块化：前端模块化的演进之路

你若盛开，清风自来

01-06

619

摘要：前端模块化经历了从AMD到ES6的演进过程。AMD规范（如RequireJS）通过异步加载解决早期全局变量污染和依赖混乱问题，但存在语法冗余和服务器端支持不足的缺点。ES6模块化作为原生方案，凭借import/export的简洁语法、静态分析能力及工具链（Babel、Webpack）的支持，成为主流选择。两者的对比凸显了技术发展趋势：ES6模块化在开发体验、生态系统和兼容性优化上更胜一筹，标志着前端模块化向高效、标准化方向的成熟演进。

JavaScript中的this详解（ES5/ES6）

zhaominyong的专栏

01-09

179

/ this绑定优先级（从高到低）：// 1. new绑定 > 2. 显式绑定 > 3. 隐式绑定 > 4. 默认绑定// 显式绑定 > 隐式绑定// 'obj1' (bind创建的函数this不可更改)// 箭头函数的this无法被改变// undefined (箭头函数的this无法改变)箭头函数没有自己的this，继承外层作用域的this普通函数的this由调用方式决定严格模式下，独立调用的函数中this为undefined可以显式设置thisnew。

ES6中的const用法详解

最新发布

zhaominyong的专栏

01-09

285

绑定不可变：变量名与值/引用的绑定不可变必须初始化：声明时必须赋值块级作用域：只在当前块内有效暂时性死区：声明前不可访问支持闭包：可被内部函数引用。

3.2-Web开发介绍（AI)

m0_64924660的博客

01-06

207

Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。

前端组件级权限控制

马优晨

01-06

345

前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。

Vue 3 组件通信全方案详解：Props/Emit、provide/inject、事件总线替代与组合式函数封装

小二丶的博客

01-05

1279

本文系统梳理Vue3中7种组件通信方式，重点剖析props/emits、provide/inject、v-model等核心方案，并通过实战案例演示应用场景。文章包含完整TypeScript代码实现、性能对比数据及5个常见反模式避坑指南。主要内容包括：父子组件通信（props/emits）、跨层级通信（provide/inject）、双向绑定（v-model）、逻辑复用（Composables）以及全局状态管理（Pinia）。