ECMAScript 6学习笔记(一):展开运算符
来源:互联网 发布:算法之美 pdf 百度云 编辑:程序博客网 时间:2024/05/19 12:14
JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了许多新特性。本文主要记录展开运算符。
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
函数调用中使用展开运算符
在以前我们会使用apply方法来将一个数组展开成多个参数:
function test(a, b, c) { }var args = [0, 1, 2];test.apply(null, args);
如上,我们把args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。
不过有了ES6,我们就可以更加简洁地来传递数组参数:
function test(a,b,c) { }var args = [0,1,2];test(...args);
我们使用...展开运算符就可以把args直接传递给test()函数。
数组字面量中使用展开运算符
''
在ES6的世界中,我们可以直接加一个数组直接合并到另外一个数组当中:
var arr1=['a','b','c'];var arr2=[...arr1,'d','e']; //['a','b','c','d','e']
展开运算符也可以用在push函数中,可以不用再用apply()函数来合并两个数组:
var arr1=['a','b','c'];var arr2=['d','e'];arr1.push(...arr2); //['a','b','c','d','e']
用于解构赋值
解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:
let [arg1,arg2,...arg3] = [1, 2, 3, 4];arg1 //1arg2 //2arg3 //['3','4']
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后:
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错
类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:
var list=document.getElementsByTagName('div');var arr=[..list];
list是类数组对象,而我们通过使用展开运算符使之变成了数组。
ES7草案中的对象展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象:
let {x,y,...z}={x:1,y:2,a:3,b:4};x; //1y; //2z; //{a:3,b:4}
如上,我们可以将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数。
同时,我们也可以像数组插入那样将一个对象插入另外一个对象当中:
let z={a:3,b:4};let n={x:1,y:2,...z};n; //{x:1,y:2,a:3,b:4}
另外还要很多用处,比如可以合并两个对象:
let a={x:1,y:2};let b={z:3};let ab={...a,...b};ab //{x:1,y:2,z:3}
- ECMAScript 6学习笔记(一):展开运算符
- ECMAScript 6:展开运算符 ...
- ECMAScript学习笔记(一)
- ECMAScript6学习笔记《一》-----ECMAScript 6是什么?
- ECMAScript 6 学习笔记
- ECMAScript 6学习笔记
- ECMAScript 6 学习笔记
- ECMAScript 6 入门 个人笔记(一)
- ECMAScript 6 学习笔记一 let 和const命令
- JAVASCRIPT基础学习篇(7)--ECMAScript Basic3(EcmaScript 运算符)
- ECMAScript基础(运算符)
- ECMAScript 6 学习笔记----Class
- ECMAScript 6 入门学习笔记
- ECMAScript 6入门 学习笔记
- ES6(ECMAScript 6)学习笔记
- ES6(ECMAScript 6 ) 解构 扩展运算符
- ECMAScript 一元运算符
- ECMAScript 位运算符
- linux makefile教程
- Android 对话框
- pin planner中符号标记的含义
- JDK1.8十个新特性
- KMP之Next数组
- ECMAScript 6学习笔记(一):展开运算符
- c/c++整理--字符串(5)
- 管理系统中的简单分区和文件系统
- 【linux】ubuntu中查看各种设备和资源的命令汇总
- 使用fdisk分区进行磁盘管理
- 在写Javaweb时遇到的几个问题。
- maven打包及其遇到的坑
- 【jzoj5089】【GDOI2017第四轮模拟day2】【叶片】
- 2017暑期实习招聘-产品经理-微软C+E(2)-3轮面试