本篇文章给大家分享的是有关如何正确的使用ES6扩展运算符,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
spread和rest运算符在ES6中,都用(...)表示,其中spread为扩展(展开)运算符,rest为剩余(收集)运算符。在不同的地方使用此运算符有不同的作用,可以从读和写两个角度考虑。其中写操作有收集作用,读操作有展开作用。在ES6中,(...)运算符只对数组有效,ES7中添加了对对象的扩展。
在没有时使用(...)运算符时,要实现一个求和的功能函数,传入的参数不定,只能使用arguments。例如:
function sum(){ let sumNumber=0; for(let i=0;i<arguments.length;i++){ sumNumber += arguments[i]; } return sumNumber; } console.log(sum(1,2,3)); //6 console.log(sum(4,5,6,7,8)); //30
当使用rest运算符时,我们的代码可以简洁很多:
function sum(...arg){ let sumNumber=0; arg.forEach(function(ele){ sumNumber+=ele; }) return sumNumber; } console.log(sum(1,2,3)); //6 console.log(sum(4,5,6,7,8)); //30
此时传入的参数将会被写入到arg中,并且形成一个数组。我们可以打印arg:
function sum(...arg){ console.log(arg); } console.log(sum(1,2,3)); // (3) [1, 2, 3] console.log(sum(4,5,6,7,8)); //(5) [4, 5, 6, 7, 8]
如果我们传入的参数有必须要传入的项,我们可以在形参的最后一位使用rest运算符:
function test(a, b, ...arg) { console.log(a,b,arg); } test(1,2,3,4,5,6,7,8);//1 2 (6) [3, 4, 5, 6, 7, 8]
可以看到输出的a,b为实参的前两项,后面传入的参数都被转化为数组存入到arg中。
let arr=[1,2,3,4,5]; console.log(arr); //(5) [1, 2, 3, 4, 5] console.log(...arr); // 1 2 3 4 5
可以看到,当使用了(...)运算符时,它会将数组展开并输出。
当我们想将数组合并时,传统的做法:
let arr1=[1,2,3]; let arr2=[5,6,7,8]; let arr3=[].arr3.concat(arr1,arr2); //相当于let arr3=new Array();arr3.concat(arr1,arr2); console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]
使用(...)运算符的做法:
let arr1=[1,2,3]; let arr2=[5,6,7,8]; let arr3=[...arr1,...arr2]; console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]
我们来看看它是怎么实现的,我们可以使用babel来将ES6语法转换为ES5:
"use strict"; var arr1 = [1, 2, 3]; var arr2 = [5, 6, 7, 8]; var arr3 = [].concat(arr1, arr2);
可以看到它的实现原理也是数组的concat方法。所以(...)运算符是一个语法糖,不会影响原来的功能。
在ES7中,(...)运算符支持对对象的扩张。
let school={ name:'xxx大学', history:'50' }; let teacher={ leader:{ name:'xx校长', age:'40', }, personNum:60 };
我们如果想要将上述对象克隆到另一个对象中,传统的做法是自己写一个clone函数,或者使用jQuery中的extend方法。现在我们只需要使用(...)运算符即可完成。
let obj={ ...school, ...teacher } console.log(obj); /* Object history: "50" leader: {name: "xx校长", age: "40"} name: "xxx大学" personNum: 60 __proto__: Object*/
可以看到,使用(...)运算符可以轻易的完成克隆,但此克隆是一个浅克隆。例如:
obj.leader.name="xxx"; console.log(obj); /*history: "50" leader: {name: "xxx", age: "40"} name: "xxx大学" personNum: 60 __proto__: Object */ console.log(teacher); /*leader: {name: "xxx", age: "40"} personNum: 60 __proto__: Object */
在ES6中也有一个浅克隆的方法:Object.assign({ },obj1,obj2,...)
它会将后面的对象克隆到第一个对象里。
let school={ name:'xxx大学', history:'50' }; let teacher={ leader:{ name:'xx校长', age:'40', }, personNum:60 }; let obj={}; Object.assign(obj,school,teacher); console.log(obj); /*history: "50" leader: {name: "xx校长", age: "40"} name: "xxx大学" personNum: 60 __proto__: Object*/
可以看到也完成了克隆。
当我们修改obj中leader的name值时,原来teacher对象中相应的值也发生了改变。如果想要实现深克隆,我们可以对修改一下上述代码:
let school={ name:'xxx大学', history:'50' }; let leader={ name:'xx校长', age:'40', } let teacher={ leader:{ ...leader } personNum:60 }; let obj={ ...school, ...teacher, leader:{ ...leader } } console.log(obj); /*history: "50" leader: {name: "xx校长", age: "40"} name: "xxx大学" personNum: 60 __proto__: Object*/ obj.leader.name="xxx"; cosnole.log(obj); /*history: "50" leader: {name: "xxx", age: "40"} name: "xxx大学" personNum: 60 __proto__: Object*/ console.log(leader);. /*age: "40" name: "xx校长" __proto__: Object*/ console.log(teacher); /*leader: {name: "xx校长", age: "40"} personNum: 60 __proto__: Object*/
可以看到,我们改变了obj中leader的name值,只在obj对象中发生了改变,teacher对象和leader对象并没有发生改变。
如果有很多层的引用值,并不推荐此方法,可以自己书写一个深克隆方法,当然也有另一个方法,比较另辟蹊径。可以使用JSON先将要克隆的对象转化为一个字符串,然后再转化为对象,这样新得到的对象和原来得对象也没有关系。
let teacher={ leader:{ name:'xx校长', age:'40', } personNum:60 }; let obj=JSON.parse(JSON.stringify(teacher)); console.log(obj); /*leader: {name: "xx校长", age: "40"} personNum: 60 __proto__: Object*/ obj.leader.name="xxx"; console.log(obj.leader.name); //"xxx" console.log(teacher.leader.name); //"xx校长"
但是这个方法对含有函数(function())、正则(reg)、特殊对象(new Data())的对象进行克隆时,会丢失上面所说的属性。如果没有上面的属性,可以使用此方法。
以上就是如何正确的使用ES6扩展运算符,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。