前端函数的参数都有哪些？

在前端开发中，函数的分类可以根据不同的标准进行。以下是一些常见的函数分类方式，并附有相应的例子：

1. 按传递方式分类：

   • 按值传递：JavaScript 中的基本类型（如数字、字符串、布尔值）都是按值传递的。

     function add(a, b) {return a + b;
     }
     let x = 5;
     let y = 10;
     let result = add(x, y); // result = 15, x 和 y 的值不变
     

   • 按引用传递：JavaScript 中的对象类型（如数组、对象）都是按引用传递的。

     function modifyArray(arr) {arr.push(4);
     }
     let myArray = [1, 2, 3];
     modifyArray(myArray); // myArray 现在是 [1, 2, 3, 4]
     

2. 按参数的可选性分类：

   • 必选参数：没有默认值，必须在调用函数时提供。

     function greet(name) {console.log(`Hello, ${name}!`);
     }
     greet('Alice'); // 正常执行
     greet(); // 抛出错误，因为 name 是必选参数
     

   • 可选参数：有默认值，可以在调用函数时省略。

     function greet(name = 'Stranger') {console.log(`Hello, ${name}!`);
     }
     greet('Alice'); // 正常执行
     greet(); // 使用默认值，输出 "Hello, Stranger!"
     

3. 按参数的顺序分类：

   • 位置参数：根据参数在函数定义中的位置来确定其含义。

     function calculateArea(width, height) {return width * height;
     }
     let area = calculateArea(5, 10); // area = 50
     

   • 关键字参数：通过参数名来确定其含义，调用函数时可以不按照定义顺序传递。

     function calculateArea({ width, height }) {return width * height;
     }
     let area = calculateArea({ height: 10, width: 5 }); // area = 50
     

4. 按参数的类型分类：

   • 基本类型参数：如整数、浮点数、布尔值等。

     function isEven(num) {return num % 2 === 0;
     }
     let result = isEven(4); // result = true
     

   • 复合类型参数：如数组、列表、字典等。

     function sumArray(arr) {return arr.reduce((a, b) => a + b, 0);
     }
     let numbers = [1, 2, 3, 4, 5];
     let sum = sumArray(numbers); // sum = 15
     

   • 对象类型参数：如自定义的类或结构体。

     class Person {constructor(name, age) {this.name = name;this.age = age;}
     }
     function greetPerson(person) {console.log(`Hello, ${person.name}!`);
     }
     let alice = new Person('Alice', 30);
     greetPerson(alice); // 输出 "Hello, Alice!"
     

5. 按参数的作用分类：

   • 输入参数：函数从外部接收数据的参数。

     function double(num) {return num * 2;
     }
     let result = double(5); // result = 10
     

   • 输出参数：函数向外部返回数据的参数。

     function getFullName(firstName, lastName, fullName) {fullName.value = `${firstName} ${lastName}`;
     }
     let fullName = { value: '' };
     getFullName('John', 'Doe', fullName);
     console.log(fullName.value); // 输出 "John Doe"
     

   • 输入输出参数：既可以接收数据也可以返回数据的参数。

     function updatePerson(person, name, age) {person.name = name;person.age = age;return person;
     }
     let alice = { name: 'Alice', age: 30 };
     let updatedAlice = updatePerson(alice, 'Alice Smith', 31);
     console.log(updatedAlice); // 输出 { name: 'Alice Smith', age: 31 }