它是什么

es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。因为typeScript是es6的超集,所以typeScript也支持扩展运算符。

用在哪儿

可变参数个数的函数调用

function push(array, ...items) {
array.push(...items);
} function add(...vals){
let sum=0;
for(let i=0;i<vals.length;i++){
sum+=vals[i];
}
return sum;
} let arr = [1,2,3,4,5,6];
let sum = add(...arr);
console.log(sum); //21

更便捷的数组合并

let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
//es5 旧写法
newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
console.log(newArr);
//es6 使用扩展运算符
newArr = [20,...arr1,...arr2]; //[20,1,2,5,6]
console.log(newArr);

替代es5的apply方法

// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);

求最大值Math.max()

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

通过push函数,将一个数组添加到另一个数组的尾部

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

新建Date类型

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

与解构赋值结合,生成新数组

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

将实现了 Iterator 接口的对象转为数组

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

 

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

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

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

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

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

  3. es6 扩展运算符 三个点...

    es6中引入扩展运算符…,它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScript也支持扩展运算符 ...

  4. ES6扩展运算符(三点符号), 解构

    http://www.cnblogs.com/chrischjh/p/4848934.html

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

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

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

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

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

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

  8. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

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

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

随机推荐

  1. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  2. lvs 进阶 第二章

    linux virtual server 一 . lvs lvs 对数据进行四层转发,根据目标地址和目标端口对请求数据进行转发. lvs 包含ipvsadm 和ipvs: ipvsadm :用户空间的 ...

  3. webpack 几个基本打包扩展项的安装命令

    网速比较慢的童鞋,装包时请准备好花生瓜子 webpack 本身只能打包 JavaScript 模块,但是它可以通过拓展打包比如静态资源文件.less.sass.typescript 等,还可以通过 b ...

  4. vscode设置代码块

    需要注意一点是,内容主体里面带有缩进的地方不能用 Tab,只能用空格

  5. 剑指offer(18)二叉树的镜像

    题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...

  6. onchange 事件

    Event 对象 定义和用法 onchange 事件会在域的内容改变时发生. 语法 onchange="SomeJavaScriptCode" 参数 描述 SomeJavaScri ...

  7. 关于ComponentOne For WinForm 的全新控件 – DataFilter数据切片器(Beta)

    概述 数据切片器在电子商务网站上很常见 - 它们可以帮助用户快速过滤所选商品,并且所有过滤选项都可以在一个地方使用,通常包含核心控件类型为:清单,范围栏和单选按钮等.在ComponentOne For ...

  8. Intellj IDEA光标问题

    Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标, ...

  9. Mac配置Hadoop最详细过程

    Mac配置Hadoop最详细过程 原文链接: http://www.cnblogs.com/blog5277/p/8565575.html 原文作者: 博客园-曲高终和寡 https://www.cn ...

  10. Codeforces 1100 F - Ivan and Burgers

    F - Ivan and Burgers 思路:线性基+贪心,保存线性基中每一位的最后一个 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #p ...