ECMAScript 6学习笔记(一):展开运算符
2017-04-25 21:04
183 查看
JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了许多新特性。本文主要记录展开运算符。
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
在以前我们会使用apply方法来将一个数组展开成多个参数:
如上,我们把args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。
不过有了ES6,我们就可以更加简洁地来传递数组参数:
我们使用...展开运算符就可以把args直接传递给test()函数。
''
在ES6的世界中,我们可以直接加一个数组直接合并到另外一个数组当中:
展开运算符也可以用在push函数中,可以不用再用apply()函数来合并两个数组:
解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后:
展开运算符可以将一个类数组对象变成一个真正的数组对象:
list是类数组对象,而我们通过使用展开运算符使之变成了数组。
ES7中的对象展开运算符符可以让我们更快捷地操作对象:
如上,我们可以将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数。
同时,我们也可以像数组插入那样将一个对象插入另外一个对象当中:
另外还要很多用处,比如可以合并两个对象:
展开运算符(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 //1 arg2 //2 arg3 //['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; //1 y; //2 z; //{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}
相关文章推荐
- 【JAVA学习笔记】02 运算符、表达式
- JAVASCRIPT基础学习篇(7)--ECMAScript Basic3(EcmaScript 运算符)
- Lemon的Python学习笔记-数值和运算符
- (JAVA SE 学习笔记)Java.SE.第005讲.运算符续.Operator.cont
- PHP学习笔记 (3)--运算符
- 《csharp高级编程》 学习笔记 第六章 运算符和类型强制转换
- java学习笔记四——运算符
- php学习笔记:可变变量、字符串运算符和数组运算符
- Javascript学习笔记-详解in运算符
- ECMAScript学习笔记
- 【JAVA学习笔记】02 运算符、表达式
- Python学习笔记(3):运算符与表达式
- coolite1.0 学习笔记(二) --Combobox 获得焦点自动展开 功能实现
- Javascript学习笔记-详解in运算符
- php学习笔记:第四节--php中的运算符和流程控制
- 关于C++引用运算符&的若干学习笔记
- Java学习笔记---3.运算符与表达式
- JAVASCRIPT学习笔记--ECMAScript基础(1)
- PHP学习笔记 (3)--运算符
- JavaScript基础学习笔记(二)——JavaScript 注释、JavaScript 变量、JavaScript运算符