扩展运算符将一个数组转为用逗号分隔的参数序列

console.log(...[a, b, c])
// a b c

用于:

1 将一个数组,变为参数序列

            let add = (x, y) => x + y;
let numbers = [3, 45];
console.log(add(...numbers))//

2 使用扩展运算符展开数组代替apply方法,将数组转为函数的参数

//ES5 取数组最大值
console.log(Math.max.apply(this, [654, 233, 727]));
//ES6 扩展运算符
console.log(Math.max(...[654, 233, 727]))
//相当于
console.log(Math.max(654, 233, 727))

3 使用push将一个数组添加到另一个数组的尾部

// ES5  写法
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
//push方法的参数不能是数组,通过apply方法使用push方法
// ES6 写法
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);

4 合并数组

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

5 将字符串转换为数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]
//ES5
str.split('')

6 转换伪数组为真数组

var nodeList = document.querySelectorAll('p');
var array = [...nodeList];
//具有iterator接口的伪数组,非iterator对象用Array.from方法

7 map结构

let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

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

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

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

  2. ES6学习笔记-扩展运算符(...)

    扩展运算符的定义: es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列. 它常用在不定参数个数时的函数调用,数组合并等情形. 用法一:不定参数个数时的函数调用 <scr ...

  3. Vue的三个点es6知识,扩展运算符

    Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...

  4. ES6数组的扩展运算符

    一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...

  5. es6可变参数-扩展运算符

    es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...

  6. es6三个点运算符

    ...扩展运算符:可以将数组或对象里面的值展开 const b = {a:1,b:2} console.log({...b,c:3}); //{a:1,b:2,c:3} 一定程度上可以替代apply方 ...

  7. ES6 rest与扩展运算符

    1.rest 变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } ...

  8. 关于ES6的对象扩展运算符

    对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中 对象扩展运算符: 1. 复制对象 let obj1 = { x: 1, y: 2, z: 3 } let obj ...

  9. ES6 ( 三 ) 字符串扩展

    一.字符Unicode表示方法 ES6中可以使用以下6种方法表示字符 '\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // tru ...

随机推荐

  1. SyntaxHighlighter使用方法

    原名:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言.最早见于Yahoo的Y ...

  2. c++异常处理--创建自己的异常处理类

    复习了一下c++中的异常处理! 继承exception类 class myException : public std::exception { public: explicit myExceptio ...

  3. django1.11文档 模型重点笔记

    模型最重要的属性是Manager. 它是Django 模型进行数据库查询操作的接口,并用于从数据库提取实例. 如果没有自定义Manager,则默认的名称为objects. Managers 只能通过模 ...

  4. 三、MySQL PHP 语法

    MySQL PHP 语法 MySQL 可应用于多种语言,包括 PERL, C, C++, JAVA 和 PHP. 在这些语言中,Mysql在PHP的web开发中是应用最广泛. 在本教程中我们大部分实例 ...

  5. Vue2+webpack+node 配置+入门+详解

    Vue2介绍 1.vue2.0 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响 ...

  6. [译]The Python Tutorial#7. Input and Output

    [译]The Python Tutorial#Input and Output Python中有多种展示程序输出的方式:数据可以以人类可读的方式打印出来,也可以输出到文件中以后使用.本章节将会详细讨论 ...

  7. bootstrap-图片样式记录

    //三种形状<img src=”img/pic.png” alt=”图片” class=”img-rounded” /><img src=”img/pic.png” alt=”图片” ...

  8. docker 学习(1)

    Docker与容器和虚拟机 Docker跟虚拟机有什么区别啊?这个问题可以拆成两部分.因为Docker并不是什么完全独创的技术,而是属于很早便有了的容器技术,所以第一个问题就是容器与虚拟机的区别?同属 ...

  9. Artwork 18年中南多校第一场A

    一.题意 对于一个矩阵,若干道命令,每道命令将会把某一段格子涂黑,请问每次涂黑之后矩阵中未被涂黑的块的数量? 二.思路 保存每道命令,并且忠实的执行他,到最后一步开始搜索联通块的数量,并将其保存. 之 ...

  10. CodeForces 768E Game of Stones 打表找规律

    题意: 在经典Nim博弈的基础上增加了新的限制:如果从这堆石子中移走\(x\)个石子,那么之后就不能再从这堆移走\(x\)个. 分析: 因为之前的操作会对后面的转移有影响,所以在保存状态时还要记录哪些 ...