ES6扩展运算符和rest运算符用法实例分析

本文实例讲述了ES6扩展运算符和rest运算符用法。分享给大家供大家参考，具体如下：

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

运算符有两种：对象扩展运算符与rest运算符。

1.对象扩展（ spread）运算符（...）

（1）解决参数个数问题

以前我们编程是传递的参数一般是确定，否则将会报错或者异常，如下：

function test(a,b,c,d) {
 console.log(a)
 console.log(b)
 console.log(c)
 console.log(d)
 console.log(e)//e is not defined
}
test(1,2,3,4)

参数固定，多余的参数会出错。

但我们又想传递多个参数，但是不确定参数的个数，这时候可以使用对象扩展运算符来作参数。

function test1(...arg) {
 console.log(arg[0]);//1
 console.log(arg[1]);//2
 console.log(arg[2]);//3
 console.log(arg[3])//4
 console.log(arg[4])//5
 console.log(arg[5])//undefined
}
test1(1,2,3,4,5)

这时候程序是不会报错的，多余取值返回的结果是undefined。这说明是可以传入多个值，并且就算方法中引用多了也不会报错。

（2）解决数组赋值问题

我们先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

let arr1=['i','love','you'];
let arr2=arr1;
console.log("arr2====",arr2);
arr2.push('too');
console.log("arr1====>",arr1);

控制台输出的结果为：

["i", "love", "you"]

["i", "love", "you", "too"]

这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。

let arr1=['i','love','you'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('too');
console.log(arr1);

最终可以看到我们的arr1并没有改变，简单的扩展运算符就解决了这个问题。

2.rest运算符

（1）含义

rest参数作用： 将多余的逗号分隔的参数序列转换为数组参数

注意： rest参数必须是最后一个参数，否则报错。

rest运算符与对象扩展运算符有很多类似之处，它也用…（三个点）来表示，比如：

function test(first,...arg){
 console.log("first==>",first)//0
 console.log("arg=====>",arg)
}
test(0,1,2,3,4,5,6,7);

输出结果为：

first==> 0
arg=====>[1, 2, 3, 4, 5, 6, 7]

（2）如何循环输出rest运算符

用for…of循环来进行打印出arg的值

function test(first,...arg){
 for(let val of arg){
  console.log(val)
 }
}
test(0,1,2,3,4,5,6,7);

结果为：

1,2,3,4,5,6,7

最后总结：

  • 扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
  • rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组
  • 当三个点(...)在等号左边，或者放在形参上。为 rest 运算符
  • 当三个在等号右边，或者放在实参上，是 spread运算符

或者说：放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • ES6中的rest参数与扩展运算符详解

    前言 本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性.rest参数的形式为:...变量名:扩展运算符是三个点(...).下面话不多说了,来一起看看详细的介绍: rest参数 rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of val

  • ES6扩展运算符的用途实例详解

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点"...",就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用. 看这个例子: console.log(...[3, 4, 5]) 结果: 3 4 5 调用其实就是: console.log(3, 4, 5) 合并数组 可以使用扩展运算符将多个数组进行合并. let arr1 = [1, 2, 3]

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

    本文实例讲述了es6数组之扩展运算符操作.分享给大家供大家参考,具体如下: 扩展运算符(spread)是三个点(-).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] 该运算符主要用于函数调用. function push(array, ...it

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • ES6扩展运算符用法实例分析

    本文实例讲述了ES6扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值,扩展运算符有以下几点作用 一.展开数组 //展开数组 let a = [1,2,3,4,5], b = [...a,6,7]; console.log(b); //打印出来的值[1, 2, 3, 4, 5, 6, 7] 二.数组的拷贝 //数组的拷贝 var c = [1, 2, 3]; var d = [...c]; d.push(4); cons

  • es6函数name属性功能与用法实例分析

    本文实例讲述了es6函数name属性功能与用法.分享给大家供大家参考,具体如下: 函数的name属性,返回该函数的函数名. function foo () {} foo.name // foo 这个属性早就被浏览器广泛支持,但是直到es6,才将其写入了标准. 需要注意的是,es6对这个属性的行为做出了一些修改.如果将一个匿名函数赋值给一个变量,es5的name属性,会返回空字符串,而es6的name属性会返回实际的函数名. var f = function() {} // es5 f.name

  • ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, start = 0, end = this.length) 该函数有三个参数. target:目的起始位置. start:复制源的起始位置,可以省略,可以是负数. end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1. 例: 把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置

  • Tensorflow tf.tile()的用法实例分析

    tf.tile()应用于需要张量扩展的场景,具体说来就是: 如果现有一个形状如[width, height]的张量,需要得到一个基于原张量的,形状如[batch_size,width,height]的张量,其中每一个batch的内容都和原张量一模一样.tf.tile使用方法如: tile( input, multiples, name=None ) import tensorflow as tf a = tf.constant([7,19]) a1 = tf.tile(a,multiples=[

  • php redis的scan用法实例分析

    php redis的scan用法实例分析

    在删除缓存的时候,我们在一些场景下需要批量删除,但不确定具体的key值,可通过匹配的方式进行查询后删除. 但是使用keys会导致redis服务器宕机.慎用... 一般公司也会禁用keys等比较敏感的命令的. 所以工作中会使用scan命令来进行匹配查询 SCAN cursor [MATCH pattern] [COUNT count] 比如 # 从游标 0 开始扫描 匹配 test1:* 的键值,一次扫描1000条 scan 0 match test1:* count 1000 1) 表示下一次扫

  • Python iter()函数用法实例分析

    本文实例讲述了Python iter()函数用法.分享给大家供大家参考,具体如下: python中的迭代器用起来非常灵巧,不仅可以迭代序列,也可以迭代表现出序列行为的对象,例如字典的键.一个文件的行,等等. 迭代器就是有一个next()方法的对象,而不是通过索引来计数.当使用一个循环机制需要下一个项时,调用迭代器的next()方法,迭代完后引发一个StopIteration异常. 但是迭代器只能向后移动.不能回到开始.再次迭代只能创建另一个新的迭代对象. 反序迭代工具:reversed()将返回

  • Python callable()函数用法实例分析

    本文实例讲述了Python callable()函数用法.分享给大家供大家参考,具体如下: python中的内建函数callable( ) ,可以检查一个对象是否是可调用的 . 对于函数, 方法, lambda 函数式, 类, 以及实现了 _ _call_ _ 方法的类实例, 它都返回 True. >>> help(callable) Help on built-in function callable in module __builtin__: callable(...) calla

  • Python lambda函数基本用法实例分析

    本文实例讲述了Python lambda函数基本用法.分享给大家供大家参考,具体如下: 这里我们简单学习一下python lambda函数. 首先,看一下python lambda函数的语法,如下: f=lambda [parameter1,parameter2,--]:expression lambda语句中,冒号前是参数,可以有0个或多个,用逗号隔开,冒号右边是返回值.lambda语句构建的其实是一个函数对象. 1>无参数 f=lambda :'python lambda!' >>&

  • java队列之queue用法实例分析

    Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Deque接 口. Queue的实现 1.没有实现的阻塞接口的LinkedList: 实现了java.util.Queue接口和java.util.AbstractQueue接口 内置的不阻塞队列: PriorityQueue 和 ConcurrentLinkedQueue PriorityQueue 和 Concurren

  • ES6扩展运算符和rest运算符用法实例分析

    本文实例讲述了ES6扩展运算符和rest运算符用法.分享给大家供大家参考,具体如下: 运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数问题 以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下: function test(a,b,c,d) { console.log(a) console.log(b) console.log(c) c

随机推荐