扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]); // 1 2 3 console.log(1,...[1,2,3],5); // 1 1 2 3 5

合并多个数组

通过push函数,将一个数组添加到另一个数组的尾部;有了扩展运算符,就可以直接将数组传入push方法;

扩展运算符提供了数组合并的新写法。

     var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2); // [0,1,2,3,4,5]
console.log(arr1);
     var arr4 = ['a','b'];
var arr5 = ['c'];
var arr6 = ['d','e'];
// es5合并数组
arr4.concat(arr5,arr6);
// es6合并数组
var newArr = [...arr4,...arr5,...arr6];
console.log(newArr);

简化求出一个数组最大元素的写法,由于 JavaScript 不提供求数组最大元素的函数,所以只能套用Math.max函数,将数组转为一个参数序列,然后求最大值。有了扩展运算符以后,就可以直接用Math.max了。

console.log(Math.max(...[14,2,7])); // 14

扩展运算符赋值

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错

     const [first,...rest] = [1,2,3,4,5];
console.log(first); //
console.log(rest); // [2,3,4,5] // 如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [f,...r] = [];
console.log(f,r); // undfined,[] const [f1,...r1] = ["foo"];
console.log(f1,r1); // foo,[]

es6三点运算符的用法的更多相关文章

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

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

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

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

  3. es6之扩展运算符 三个点(...)

    对象的扩展运算符理解对象的扩展运算符其实很简单,只要记住一句话就可以: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 ...

  4. JS逗号运算符的用法详解

    逗号运算符的用法详解 注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScri ...

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

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

  6. ES6,扩展运算符的用途

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象 ...

  7. es6 Null 传导运算符

    Null 传导运算符 程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在.比如,要读取message.body.user.firstName,安全的写法是写成下面这样. const ...

  8. 21.Python算术运算符及用法详解

    算术运算符是处理四则运算的符号,在数字的处理中应用得最多.Python 支持所有的基本算术运算符,如表 1 所示. 表 1 Python常用算术运算符 运算符 说明 实例 结果 + 加 12.45 + ...

  9. 位运算符的用法 ----非(!),与(&),或(|),异或(^)

    位运算符的用法 ----非(!),与(&),或(|),异或(^) 三种运算符均针对二进制 非!:是一元运算符.对一个二进制的整数按位取反,输入0则输出1,输入1则输出0. 例: 0100 -( ...

随机推荐

  1. js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片)

    js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片) 一.总结 一句话总结:万能的wPaint方法,通过不同的参数执行不同的操作.比如清空画布参数传"clear& ...

  2. H265(HEVC) nal 单元头介绍及rtp发送中的fu分组发送详解

    首先来介绍下h265(HEVC)nal单元头,与h264的nal层相比,h265的nal unit header有两个字节构成,如下图所示: 从图中可以看出hHEVC的nal包结构与h264有明显的不 ...

  3. js --- 事件流

    1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标 ...

  4. 基于 Web 的 Go 语言 IDE - Wide 1.1.0 发布!

    发布 1.1.0 这个版本改进了很多细节,已经完全可以用于正式项目的开发 同时我们上线了 Wide 在线服务 到目前,我们提供了 Wide 和 Solo 两个在线服务,详情请看这里. Wide 是什么 ...

  5. javafx style and cssFile

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  6. Vue自定义指令实现下拉加载:v-loadmore

    和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) {    var p = 0;    var t = 0;  ...

  7. nice---进程优先级

    在当前程序运行优先级基础之上调整指定值得到新的程序运行优先级,用新的程序运行优先级运行命令行"command [arguments...]".优先级的范围为-20 - 19 等40 ...

  8. Duboo入门示例(Idea开发环境)

    在学习Dubbo分布式框架时的官方入门例子,很有代表性.简单清晰. 有关Dubbo的概念.概述和简单的配置文件,可以看官方文档的简述 会很快对Duboo有个整体的概念. 准备工作: 下载示例,点击这里 ...

  9. 使用maven的tomcat:run进行web项目热部署

    近期又又一次看了一下maven的东西,事实上主要是由于去了解Jenkins,后期或许会补充jenkins的博文. 怎么在eclipse里面创建maven webproject,这边就不介绍了,參见:h ...

  10. android-LinearLayout 控件占满父容器位置实现

    经常碰到需要把一个控件放在手机底部的情况,以前都是在LinearLayout尝试使用gravity="bottom" ,但是,没有效果,后来在网上查到了方法,如下 <Line ...