扩展运算符(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')]
// [<div>, <div>, <div>]

我们知道扩展运算符将一个数组,变为参数序列,传入函数中。

function add(x, y) {
return x + y;
} const numbers = [4, 38];
add(...numbers) // 42

注意,扩展运算符如果放在括号中,JavaScript 引擎就会认为这是函数调用,否则就会报错。

(...[1,2])
// Uncaught SyntaxError: Unexpected number console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number

扩展运算符可以与解构赋值结合起来,用于生成数组。

// 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" ]
function length(str) {
return [...str].length;
} length('x\uD83D\uDE80y') // 3

任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]); let arr = [...map.keys()]; // [1, 2, 3]
const go = function*(){
yield 1;
yield 2;
yield 3;
}; [...go()] // [1, 2, 3]

本文借鉴自http://es6.ruanyifeng.com/#docs/array

by我还差的很远很远

array扩展运算符的更多相关文章

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

    我们看一个语法,你就知道es6对我们码农多友好,毕竟世界在进步 let arr=[1,2,3,4,54,56] console.log(...arr) 结果是????? 没错 ...这个运算符就是把这 ...

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

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

  3. ECMA Script 6_数组的扩展_扩展运算符

    1. 扩展运算符 内部调用的是数据结构的 Iterator 接口, 因此只要具有 Iterator 接口的对象,都可以使用扩展运算符 ... 如 map,,,, [...arr] 扩展运算符(spre ...

  4. rest参数与扩展运算符

    rest参数与扩展运算符 rest参数 当遇上这样一种需求:对于输入的参数,求和返回,但传入的参数个数并不确定. // 在es5中,通常是使用函数自身的arguments对象实现的 function ...

  5. js扩展运算符(spread)是三个点(...)

    作用:将一个数组转为用逗号分隔的参数序列. //该运算符主要用于函数调用.function push(array, ...items) { array.push(...items); } functi ...

  6. js扩展运算符(spread)三个点(...)

    常见用法: 1.该运算符主要用于函数调用. function push(array, ...items) { array.push(...items); } function add(x, y) { ...

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

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

  8. ES6 扩展运算符 三个点(...)

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

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

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

随机推荐

  1. 完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置

    继上一篇博客介绍了完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建,本篇继续讲述后续部分的内容 1 虚拟机相关1.1 虚拟机位置介绍 openstack上创建的 ...

  2. 20135327--linux内核分析 实践二

    内核模块编译 1.实验原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展性 ...

  3. Python学习笔记 --第二章

    Python语法基础 "#"号为注释符,建议缩进四个空格,Python大小写敏感. 数据类型 整数 0,2等等,以0x开头的为十六进制数 浮点数 1.58e9 字符串 用'或"括起来的任意文 ...

  4. 嵌入式linux教程

    串口通信minicom $ sudo apt-get install minicom ///安装 # minicom –s //运行 //CTRL+A Z 弹出菜单       2.NFS网络文件配置 ...

  5. Alpha 答辩总结模板

    Alpha 答辩总结模板 每个小组提供一篇总结博客(组内共享,每个人都发布),包含: 本组(组名)所有成员(短学号,名,标注组长)(1分) 组内各成员贡献比例,如不提供,取平均分后组长得分减50% G ...

  6. PAT 1019 数字黑洞

    https://pintia.cn/problem-sets/994805260223102976/problems/994805302786899968 给定任一个各位数字不完全相同的4位正整数,如 ...

  7. wamp升级php5.3.10到5.4.31版本

    wamp升级php5.3.10到5.4.31版本 1.  停止WAMP服务器. 2.  去网站windows.php.net 下载php-5.4.31-nts-Win32-VC9-x86.zip. 不 ...

  8. FICO模块

  9. node upgrade bug & node-sass

    node upgrade bug & node-sass bug solution rebuild $ npm rebuild node-sass OK

  10. js運算符

    運算符算術運算符.邏輯運算符.賦值運算符.比較運算符.條件運算符 字符串的合併,用+,如果是字符串和數字用+連接,則當做字符串合併. 條件運算符:if(條件)?語句1,語句2: