Web前端入门第 65 问：JavaScript 函数参数各种使用方式

技术分享 9个月前 (06-14) 0 999+

函数参数是什么？

就是函数内部无法确定的一个东西，需要外部传给函数内部的玩意儿，语法上就是写在函数括号中的东东。比如：

function test(a) {}

其中的 a 就是 test 函数的参数，在函数体内部，a 作为一个变量存在，可以修改它。

JS 的函数参数，真的是可以传入任意值，没有任何限制，可以包括 原始类型、对象，数组，函数 等等，只要是 JS 语言支持的，都可以当做参数传入。

原始类型

JS 原始类型参数（number、string、boolean、null、undefined、symbol、bigint）按值传递，传入的是值的副本，在函数里面修改传入的值不会影响外部变量。

function test(a) {   a = '前端路引'; // 修改原始类型不会影响 arg 变量值 } let arg  = '微信公众号'; test(arg); console.log(arg); // 输出 '微信公众号'（原值未改变）

引用类型

JS 引用类型参数（对象、数组、函数）按引用地址传递，如果函数里面修改了对象属性，会影响外部变量，使用时需特别注意！！

function test (obj) {   obj.name = '前端路引' // 修改了对象属性，会影响共享的对象   obj = { // 如果直接给 obj 参数赋值，不会影响共享的对象，因为 obj 已经变成了一个新的对象     test: '测试参数'   } } const weChat = {   type: '微信公众号',   age: 1, }; test(weChat); console.log(weChat) // {type: '微信公众号', age: 1, name: '前端路引'}

默认参数

ES6 版本为 JS 注入了一大堆活性，各种花活不断，默认参数就是其中一个最常用的花活。当未传入参数或者传入的参数是 undefined，则使用默认参数。

function test(a = '前端路引') {   return a; // 将 a 变量值返回出去 }  let arg  = '微信公众号'; console.log(test(arg)); // 输出 '微信公众号'  // 没传入参数，使用默认值 console.log(test()); // 输出 '前端路引'  // 传入 undefined 也是用默认值 console.log(test(undefined)); // 输出 '前端路引'

剩余参数

ES6 的又一花活之一，允许使用 ... 语法，将多余的参数合并为数组，在箭头函数中可以代替 arguments 对象。

function sum(...numbers) {   return numbers.reduce((acc, num) => acc + num, 0); } sum(1, 2, 3); // 返回 6  function test(a, ...rest) {   console.log(a); // 获得传入的第一个参数，输出 '公众号'   console.log(rest); // 多余参数转为数组，输出 ['前端路引', '函数测试'] } test('公众号', '前端路引', '函数测试');

需特别注意，剩余参数只能放在最后，否则报语法错误 SyntaxError: Rest parameter must be last formal parameter。

比如：

function test(...rest, a) { // 报错  SyntaxError: Rest parameter must be last formal parameter }

解构赋值传参

还是 ES6 的花活之一，用于解构对象或数组参数。

/**  * 对象解构  * name 为解构参数对象中的 name 属性  * rest 为解构参数对象中剩余的属性，也是对象  */ function test1({ name, ...rest }) {   console.log(name); // 输出 '前端路引'   // rest 获得剩余为分配的对象属性   console.log(rest); // 输出 {age: 1} } test1({ name: '前端路引', age: 1 });   /**  * 数组解构  * first 为第一个数组值  * rest 为数组剩余值，也是一个数组  */ function test2([first, ...rest]) {   console.log(first); // 输出 '前端路引'   console.log(rest); // 输出 [1, '微信公众号'] } test2(['前端路引', 1, '微信公众号']);

参数使用使用解构赋值时，需特别注意，如果参数没传入参数，那么解构将会报错：

// 报错 TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined. function test({ name }) { } test();

原因是未传入参数时，默认便是 undefined，对 undefined 解构便会报错！！这时候可以使用函数默认参数进行解决：

// 表示未传入参数时使用空对象进行解构 function test({ name } = {}) {} test();

解构中也可以使用默认值：

// 对象解构默认值 function test1({ name = '前端路引' } = {}) {   console.log(name); } test1(); // 输出 '前端路引' test1({age: 1}); // 输出 '前端路引'  // 需注意另一种写法 function test2({ name } = { name: '前端路引' }) {   console.log(name); } test2(); // 输出 '前端路引' test2({age: 1}); // 输出 undefined  // 数组解构默认值 function test3([first = '前端路引', ...rest] = []) {   console.log(first); } test3();

test2 中使用了一个默认对象，这个对象中有 name 属性，如果传入参数不存在时候，将会获得 name 属性值，但如果传入参数存在时，并且传入的对象中没有 name 属性，那么就只能是 undefined。

arguments 对象

使用 function 声明的函数，可以使用 arguments 所有参数。需注意 arguments 在箭头函数中不可用。

arguments 是类数组对象，不是所有数组方法都可以使用，可以使用 ... 展开运算符转换为数组。

function test() {   // arguments.push('微信公众号'); // 报错 TypeError: arguments.push is not a function   const temp = [...arguments]; // 使用展开运算符转换为数组   temp.push('微信公众号'); // 转为数组之后可以使用 push 方法   console.log(temp); } test(1, '前端路引', true); // 输出 [1, '前端路引', true, '微信公众号']

函数作为参数

虽然 回调函数 参数这种方式已经被 Promise 代替，但如果要实现各种钩子函数，还是只能使用 function 作为参数传递。

使用函数作为参数的函数有一个专用名词叫做 高阶函数。多用于事件处理、异步操作等等。

function test1(url, callback) {   // 模拟异步操作   setTimeout(() => {     callback({ data: '前端路引' });   }, 1000); } test1('/api', (response) => {   console.log(response.data); // 输出 '前端路引' });  // 使用 Promise 改写 test1 函数： function test2(url) {   return new Promise((resolve, reject) => {     setTimeout(() => {       resolve({ data: '前端路引' });     }, 1000)   }) } test2('/api').then((response) => {   console.log(response.data); // 输出 '前端路引' })

当需要钩子函数时候，便无法使用 Promise 替换了，比如：

function test({   url,   before, // 钩子函数，在请求开始时调用   callback, } = {}) {   before && before('请求开始');   setTimeout(() => {     // 执行完之后回调     callback && callback({ data: '前端路引' });   }, 1000) } test({   url: '/api',   before(msg) {     console.log(msg);   },   callback(response) {     console.log(response.data);   } })

函数柯里化

通过闭包返回函数，分步传递参数，这种方式称为 函数柯里化。

function test(a) {   return (b) => a * b; // 函数返回值是一个函数，用于二次调用 } const double = test(2); // 第一次传入参数，获得一个返回函数 console.log(double(5)); // 第二次传入参数，获得结果，输出 10

由于闭包中的变量一直在内存中，所以在使用时候需注意内存泄漏问题！！

bind 方法绑定参数

bind 这方法不仅可以绑定内部 this 指针，还能用于固定部分参数，生成新函数。

function test1(type, name) {   console.log(this);   return `${type}：${name}`; } const test2 = test1.bind({age: 1}, '微信公众号'); console.log(test2('前端路引')); // 输出 '微信公众号：前端路引'

test1.bind({age: 1}, '微信公众号') 作用是给 test1 绑定 this 指向 {age: 1} 对象，同时固定了第一个参数为 '微信公众号'，返回一个新的函数，此函数只有剩下的 name 参数。

也可以使用 test1.bind(null, '微信公众号') 不绑定 this 指针，仅固定第一个参数。

隐式参数类型转换

由于 JS 的参数灵活性，在使用时，需特别注意类型转换问题。比如字符串 '5' 转为数字 5：

function test(a, b) {   return a + b; } test('3', 5); // 返回 '35'（字符串拼接） test(3, '5'); // 返回 '35' test(3, 5); // 返回 8

如果无法确定传入的参数类型，那么就有必要显式转换类型（如 Number(param)）：

function test(a, b) {   return Number(a) + Number(b); } test('3', 5); // 返回 8 test(3, '5'); // 返回 8 test(3, 5); // 返回 8

或进行参数类型校验，当输入不合法时候，抛出异常：

function test(a, b) {   if (typeof a !== 'number' || typeof b !== 'number') {     throw new Error('参数类型错误');   }   return a + b; } test('3', 5); // 抛出异常