Es6 - 扩展运算符和rest运算符

我就是我 2022-01-12 01:51 311阅读 0赞

## 扩展运算符和rest运算符 ##

它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。

对象扩展运算符 （。。。）

function fun(...arg) {  console.log(arg[0])  console.log(arg[1])  console.log(arg[2])}fun('aa', 'bb')
    打印结果  aa  bb undefined复制代码

即使没有第三个参数也不会报错 aa bb undefined

使用场景

var arr1 = [1,2,3]var arr2 = arr1arr2.push(4)console.log(arr1)     [1, 2, 3, 4]console.log(arr2)     [1, 2, 3, 4]复制代码

arr1 和 arr2 地址内存空间相同，会相互影响  
修改

var arr1 = [1,2,3]var arr2 = [...arr1]arr2.push(4)console.log(arr1)     [1, 2, 3]console.log(arr2)     [1, 2, 3, 4]复制代码

问题解决

**rest运算符**

function fun(first, ...arg) {  console.log(arg.length);}fun(0, 1, 2, 3, 4, 5, 6, 7);复制代码

es5

function fun(first, ...arg) {  console.log(arg.length);  for (let i = 0; i < arg.length; i++) {    console.log(i)  }}fun(0, 1, 2, 3, 4, 5, 6, 7);复制代码

es6

function fun(first, ...arg) {  console.log(arg.length);  for (let val of arg) {    console.log(val)  }}fun(0, 1, 2, 3, 4, 5, 6, 7);复制代码

rest 是剩余的意思，也就是说 除了已知确定的参数之外，其他剩余的参数可以使用 （...arg）展开，在 es6 可以使用 for of 的循环方式代替 es5 的for 循环。

转载于:https://juejin.im/post/5d0a0833e51d45775a700322

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关【ES6.0】- 扩展运算符（...）

【ES6.0】- 扩展运算符`...` 文章目录【ES6.0】- 扩展运算符\`...\` 一、概述二、拷贝数组对象

忘是亡心i/ 2024年02月18日 11:52/ 0 赞/ 31 阅读

相关 ES6扩展运算符

很久之前看的这一块，有段时间没怎么用前几天用的时候都有点模糊了总结一下 -------------------- 一般应用场景 var fun = fu

叁歲伎倆/ 2022年12月05日 12:18/ 0 赞/ 189 阅读

相关 ES6扩展运算符...

扩展运算符定义扩展运算符（ spread ）是三个点（…），它好比 rest 参数的逆运算，可以将一个数组转为用逗号分隔的参数序列。说白了，就是把数组脱掉衣服，打开它。

比眉伴天荒/ 2022年09月03日 00:21/ 0 赞/ 242 阅读

相关 ES6 rest参数和扩展运算符

> 　 ES6引入了rest参数（形式为“…变量名”）。其中rest参数搭配的变量是一个数组可以使用数组的一切操作。　　比如： function rest(..

青旅半醒/ 2022年07月13日 00:11/ 0 赞/ 211 阅读

相关 ES6扩展运算符

ES6扩展运算符实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用 eg1: console.log(...[3, 4, 5])

一时失言乱红尘/ 2022年04月05日 08:12/ 0 赞/ 269 阅读

相关 es6之扩展运算符（...）

对象的扩展运算符理解对象的扩展运算符其实很简单，只要记住一句话就可以： > 对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中 le

我就是我/ 2022年03月21日 15:07/ 0 赞/ 284 阅读

相关 ES6扩展运算符

在做React Native项目时遇见了扩展运算符，于是将ES新特性中相关的部分学习了一下，在这里作出总结。目前所遇见的扩展运算符有两种： 1: 数组的扩展运算符

男娘i/ 2022年01月27日 13:07/ 0 赞/ 342 阅读

相关 Es6 - 扩展运算符和rest运算符

扩展运算符和rest运算符它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。对象扩展运算符（。。。） functi

我就是我/ 2022年01月12日 01:51/ 0 赞/ 312 阅读

相关 2. es6扩展运算符

1. es扩展运算符扩展运算符将一个数组转为用逗号分隔的参数序列； <script> console.log(...[1, 2, 3]) //1

水深无声/ 2021年11月04日 10:54/ 0 赞/ 377 阅读

相关 ES6扩展运算符...

扩展运算符... 一、什么是扩展运算符二、写法三、案例 1.合并数组 2.将伪数组转换成真数组一、什么是扩展运算符

迈不过友情╰/ 2021年09月07日 06:10/ 0 赞/ 457 阅读