千家信息网

ES6扩展运算符如何使用

发表于:2025-01-21 作者:千家信息网编辑
千家信息网最后更新 2025年01月21日,这篇"ES6扩展运算符如何使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"ES6扩
千家信息网最后更新 2025年01月21日ES6扩展运算符如何使用

这篇"ES6扩展运算符如何使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"ES6扩展运算符如何使用"文章吧。

    什么是spread 和rest运算符

    spread和rest运算符在ES6中,都用(...)表示,其中spread为扩展(展开)运算符,rest为剩余(收集)运算符。在不同的地方使用此运算符有不同的作用,可以从读和写两个角度考虑。其中写操作有收集作用,读操作有展开作用。在ES6中,(...)运算符只对数组有效,ES7中添加了对对象的扩展。

    数组的扩展运算符

    rest运算符(收集作用)

    在没有时使用(...)运算符时,要实现一个求和的功能函数,传入的参数不定,只能使用arguments。例如:

    function sum(){        let sumNumber=0;    for(let i=0;i

    当使用rest运算符时,我们的代码可以简洁很多:

    function sum(...arg){        let sumNumber=0;         arg.forEach(function(ele){        sumNumber+=ele;    })    return sumNumber;}console.log(sum(1,2,3));        //6console.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中。

    spread运算符(展开作用)

    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扩展运算符如何使用"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。

    0