1. 第一个叫做 展开运算符(spread operator),作用是和字面意思一样,就是把东西展开。可以用在array和object上都行。

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4] let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

2. 第二个 剩余操作符(rest operator),是解构的一种,意思就是把剩余的东西放到一个array里面赋值给它。

let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3] // 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined // 也可以
function test(a, ...rest){
console.log(a); // 1
console.log(rest); // [2,3]
}
test(1,2,3)
let array = [1, 2, 3, 4, 5];
const [ x, y, ...z ] = array;
// 其中z=[3, 4, 5],注意如果由于array的length不足以完成析构,则会导致z为[]
对象:
let obj = { name: 'zhangsan', age: 30, city: 'shenzhen' };
const {name, ...others} = obj;
console.log(name); // 'zhangsan'
console.log(others); // {age: 30, city: 'shenzhen'}

ES6扩展运算符(三点运算符)...的用法的更多相关文章

  1. Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)

    0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...

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

    ES6新增的三点运算符,是由三个点表示,在数组中扮演着重要的角色,可以对数组进行合并与分解.可以对set等数据结构进行转换.可以对函数参数进行简化表示,接下来,我们一起揭开其神秘面纱… ●三点—res ...

  3. ES6 扩展运算符 三点(...)

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

  4. es6 学习小记 扩展运算符 三个点(...)

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

  5. ES6扩展运算符的几个小技巧

    es6扩展运算符,也就是...  ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...

  6. es6入门6--数组拓展运算符,Array.from()基本用法

    本文只是作为ES6入门第九章学习笔记,在整理知识点的同时,会加入部分个人思考与解答,若想知道更详细的介绍,还请阅读阮一峰大神的ES6入门 一.拓展运算符 ES6中新增了拓展运算(...)三个点,它的作 ...

  7. ES6(模板字符串,三点运算符,Symbol,iterator接口)

    模板字符串 作用:简化字符串的拼接 模板字符串必须用``包含 变化的部分使用${xxx}包含 对象的简写方式 同名的属性可以省略不写 可以省略函数的function 箭头函数 箭头函数的特点 箭头函数 ...

  8. ES6...扩展运算符(数组或类数组对象)

    数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...

  9. ES6系列_4之扩展运算符和rest运算符

    运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数 ...

  10. ES6_05_三点运算符和形参默认值

    三点运算符的用途: # 1. rest(可变)参数 * 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数 function fun(...values) { cons ...

随机推荐

  1. 微信小程序账号注册

    想要开发微信小程序,先注册账号申请APPID. 第一步:百度搜索"微信公众平台" 第二步:立即注册 进入注册页面 区别: 订阅号: 订阅号在文件夹里,订阅号消息 一天只能推送一次, ...

  2. 第七篇 -- photoshop cs6 激活

    下载photoshop cs6破解版 下载amtlib.dll 破解就是将amtlib.dll替换,路径:C:\Program Files\Adobe\Adobe Photoshop CS6 (64 ...

  3. jvm源码解读--16 cas 用法解析

    CAS的意思是campare and sweep比较交换 这个如果不用代码会比较抽象,那么在源码中进行解释 void ATTR ObjectMonitor::enter(TRAPS) { // The ...

  4. 利用MySQL原数据信息批量转换指定库数据表生成Hive建表语句

    1.写出文件工具类 package ccc.utile; import java.io.*; /** * @author ccc * @version 1.0.0 * @ClassName Write ...

  5. 攻防世界逆向——game

    攻防世界逆向:game wp 攻防世界逆向新手区的一道题目. 是一道windows的creak,动态调试打开是这样的: 题目说明是让屏幕上所有的图像都亮之后,会出现flag,看来应该是可以玩出来的. ...

  6. preg_replace函数/e 模式下的代码执行+一道例题

    目录 例一 例二 补充 看一道ctf题-----[BJDCTF2020]ZJCTF,不过如此 参考链接 例一 源码: <?php preg_replace('/(.*)/ei', 'strtol ...

  7. 一、Ocelot简单概述

    以下只是本人学习过程的整理 Ocelot官网:http://threemammals.com/ocelot 说明文档:https://ocelot.readthedocs.io/en/latest/ ...

  8. [C++]-vector 向量

    什么是向量容器 向量容器是一种支持高效的随机访问和高效的尾部插入新元素的容器. 向量容器一般实现为一个动态分配的数组,向量中的元素连续的存放在这个数组中,因此对向量容器进行随机访问具有和动态访问动态数 ...

  9. Spring源码阅读-BeanFactory体系结构分析

    BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...

  10. Linux进程理解与实践(一)基本概念和编程概述(fork,vfork,cow)

    进程 and 程序 什么是程序? 程序是完成特定任务的一系列指令集合. 什么是进程? [1]从用户的角度来看:进程是程序的一次执行过程 [2]从操作系统的核心来看:进程是操作系统分配的内存.CPU时间 ...