es6语法02-函数默认值与什么是剩余参数，与arguments区别

本文链接：https://blog.youkuaiyun.com/m0_61547956/article/details/125014509

本文介绍了ES6中的函数默认值和剩余参数特性，对比了它们与ES5中arguments的区别。函数默认值允许设定参数的默认值，而剩余参数能将不定数量的参数打包成数组。在ES5中，arguments对象可以访问所有参数，但在ES6中，剩余参数是一个真正的数组，具备数组的所有方法，并且不包含已命名的参数。

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

函数之默认值

es5

function add(a,b){
      a = a || 20;
      b = b || 30;
      return a+b;
}
//如果没有向a传入参数a就等于20...
console.log(add());

es6

functiong add(a=20,b=30){

   return a +b;

}
//只传一个值就给a
console.log(add(30));

还可以是表达式

 function add(a = 10, b = getVal(5)) {
            return a + b;
        }

        function getVal(c) {
            return c + 5;

        }
        console.log(add());

剩余参数es6

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法
function(a, b, ...theArgs) {
// ...
}
描述
如果函数的最后一个命名参数以...为前缀，则它将成为一个数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。

在上面的例子中，theArgs将收集该函数的第三个参数（因为第一个参数被映射到a，而第二个参数映射到b）和所有后续参数。

 function pick(obj, name, ...keys) {
            let result = Object.create(null);
            for (let i = 0; i < keys.length; i++) {
                console.log(keys);
                result[keys[i]] = obj[keys[i]];
            }
            return result;
        }

        const person = {
            name: 'xiaoma',
            age: 13,
            hobby: 'football'
        }
        console.log(pick(person, 'name', 'age', 'hobby'));
    </script>

arguments（es5)

无需指出参数名就能访问他们

function pick(obj, name) {
            let result = Object.create(null);
            console.log(arguments);
            for (let i = 0; i < arguments.length; i++) {
                result[arguments[i]] = obj[arguments[i]];
            }
            return result;
        }

        const person = {
            name: 'xiaoma',
            age: 13,
            hobby: 'football'
        }
        console.log(pick(person, 'name', 'age', 'hobby'));