4.ES6-剩余参数、拓展运算符,以及对象合并的方法(含ES7)

最新推荐文章于 2025-07-02 10:02:38 发布

原创最新推荐文章于 2025-07-02 10:02:38 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

版权归作者所有，如需转载，请联系作者

文章标签：

#es6 #es7 #剩余参数 #拓展运算符 #...

前端同时被 2 个专栏收录

68 篇文章

订阅专栏

ES6

10 篇文章

订阅专栏

本文介绍了JavaScript中的剩余参数和拓展运算符的使用方法，并通过示例展示了如何利用这些特性来简化函数调用及对象合并的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

剩余参数

语法：…rest
作用：将参数转成数组传入函数

当我传入指定个数参数时：

function sum(initVal,a,b,c){
    return initVal + a + b + c;
}
sum(10,9,8,7);//34

当我传入不定个数参数时：

function sum(initVal,...rest){
    return rest.reduce(function(val,item,index,origin){
        return val + item;
    },initVal)
}
sum(10,9,8,7);//34
sum(10,9,8,7,6);//40

上例中reduce方法详见：>>传送门<<

拓展运算符

语法:…arr
将数组转成元素列表

let arr0 = [1,2,3];
let arr1 = [4,5,6];
let arr2 = [...arr0,...arr1];//[1,2,3,4,5,6]

如何合并两个对象

方法一：循环遍历

let obj1 = {name:'a',age:18};
let obj2 = {name:'b',gender:'man'};
let obj3 = {};
for(var attr in obj1){
    obj3[attr] = obj1[attr];
}
for(var attr in obj2){
    obj3[attr] = obj2[attr];
}
console.log(obj3);//{name: "b", age: 18, gender: "man"}

方法二：assign

let obj1 = {name:'a',age:18};
let obj2 = {name:'b',gender:'man'};
let obj3 = {};
Object.assign(obj3,obj1,obj2);
console.log(obj3);//{name: "b", age: 18, gender: "man"}

方法三：ES7的对象的拓展运算和ES6的解构赋值

let obj1 = {name:'a',age:18};
let obj2 = {name:'b',gender:'man'};
let obj3 = {...obj1,...obj2};
console.log(obj3);//{name: "b", age: 18, gender: "man"}