ES6对象展开符

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 //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}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,857评论 0 6
  • 1 含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分...
    yzc123446阅读 778评论 0 1
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,292评论 0 7
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 736评论 1 2
  • 《不一样的爸爸》。故事讲述了一个只有7岁智商的爸爸如何争取女儿露丝的抚养权。以及告诉我们爱其实和智商高低没有任何联...
    天空天天蓝阅读 511评论 0 3