array扩展运算符
扩展运算符(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扩展运算符的更多相关文章
- es6之三个点(...)扩展运算符
我们看一个语法,你就知道es6对我们码农多友好,毕竟世界在进步 let arr=[1,2,3,4,54,56] console.log(...arr) 结果是????? 没错 ...这个运算符就是把这 ...
- es6可变参数-扩展运算符
es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...
- ECMA Script 6_数组的扩展_扩展运算符
1. 扩展运算符 内部调用的是数据结构的 Iterator 接口, 因此只要具有 Iterator 接口的对象,都可以使用扩展运算符 ... 如 map,,,, [...arr] 扩展运算符(spre ...
- rest参数与扩展运算符
rest参数与扩展运算符 rest参数 当遇上这样一种需求:对于输入的参数,求和返回,但传入的参数个数并不确定. // 在es5中,通常是使用函数自身的arguments对象实现的 function ...
- js扩展运算符(spread)是三个点(...)
作用:将一个数组转为用逗号分隔的参数序列. //该运算符主要用于函数调用.function push(array, ...items) { array.push(...items); } functi ...
- js扩展运算符(spread)三个点(...)
常见用法: 1.该运算符主要用于函数调用. function push(array, ...items) { array.push(...items); } function add(x, y) { ...
- ES6 扩展运算符 三点(...)
含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[, , ]) // 1 2 3 conso ...
- ES6 扩展运算符 三个点(...)
它是什么 es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScrip ...
- es6 学习小记 扩展运算符 三个点(...)
参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...
随机推荐
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置
继上一篇博客介绍了完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建,本篇继续讲述后续部分的内容 1 虚拟机相关1.1 虚拟机位置介绍 openstack上创建的 ...
- 20135327--linux内核分析 实践二
内核模块编译 1.实验原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展性 ...
- Python学习笔记 --第二章
Python语法基础 "#"号为注释符,建议缩进四个空格,Python大小写敏感. 数据类型 整数 0,2等等,以0x开头的为十六进制数 浮点数 1.58e9 字符串 用'或"括起来的任意文 ...
- 嵌入式linux教程
串口通信minicom $ sudo apt-get install minicom ///安装 # minicom –s //运行 //CTRL+A Z 弹出菜单 2.NFS网络文件配置 ...
- Alpha 答辩总结模板
Alpha 答辩总结模板 每个小组提供一篇总结博客(组内共享,每个人都发布),包含: 本组(组名)所有成员(短学号,名,标注组长)(1分) 组内各成员贡献比例,如不提供,取平均分后组长得分减50% G ...
- PAT 1019 数字黑洞
https://pintia.cn/problem-sets/994805260223102976/problems/994805302786899968 给定任一个各位数字不完全相同的4位正整数,如 ...
- 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. 不 ...
- FICO模块
- node upgrade bug & node-sass
node upgrade bug & node-sass bug solution rebuild $ npm rebuild node-sass OK
- js運算符
運算符算術運算符.邏輯運算符.賦值運算符.比較運算符.條件運算符 字符串的合併,用+,如果是字符串和數字用+連接,則當做字符串合併. 條件運算符:if(條件)?語句1,語句2: