js函数参数怎么传

函数参数传递的方式有：按值传递、按引用传递、默认参数、剩余参数

在JavaScript中，函数参数的传递方式主要有按值传递和按引用传递。按值传递是当你将一个基本数据类型（如字符串、数字、布尔值）作为参数传递给函数时，函数内部修改这个参数不会影响函数外部的值。而按引用传递是指当你将一个对象或数组作为参数传递给函数时，函数内部对这个参数的修改会反映到函数外部。按值传递是最常见的方式，我们可以在函数内部修改参数值而不影响外部变量。例如：

function modifyValue(val) {
    val = 10;
    console.log("Inside function: " + val); // 输出10
}
let num = 5;
modifyValue(num);
console.log("Outside function: " + num); // 输出5

一、按值传递

在JavaScript中，基本数据类型（如数字、字符串和布尔值）是通过按值传递的。这意味着当你将一个基本数据类型的值传递给一个函数时，函数接收的是这个值的副本，而不是原始值的引用。这样一来，函数内部对参数的任何修改都不会影响到外部的原始值。

1、基本数据类型的按值传递

基本数据类型包括：数字（Number）、字符串（String）、布尔值（Boolean）、null、undefined和Symbol。

function changeValue(a) {
    a = 20;
    console.log("Inside function: " + a); // 输出20
}
let x = 10;
changeValue(x);
console.log("Outside function: " + x); // 输出10

2、基本数据类型的独立性

由于基本数据类型是按值传递的，因此函数内部的参数是独立于外部变量的。任何在函数内部对参数的修改都不会影响外部的变量。

function modifyString(str) {
    str = "Hello, World!";
    console.log("Inside function: " + str); // 输出Hello, World!
}
let greeting = "Hi there!";
modifyString(greeting);
console.log("Outside function: " + greeting); // 输出Hi there!

二、按引用传递

对象和数组是通过按引用传递的。这意味着当你将一个对象或数组传递给一个函数时，函数接收的是这个对象或数组的引用。这样一来，函数内部对参数的任何修改都会影响到外部的原始对象或数组。

1、对象的按引用传递

对象是JavaScript中非常重要的数据结构，通过按引用传递的方式，函数内部对对象属性的修改会直接反映到外部。

function modifyObject(obj) {
    obj.name = "John";
    console.log("Inside function: " + obj.name); // 输出John
}
let person = { name: "Alice" };
modifyObject(person);
console.log("Outside function: " + person.name); // 输出John

2、数组的按引用传递

数组和对象一样，也是通过按引用传递的。函数内部对数组元素的修改会直接影响到外部的数组。

function modifyArray(arr) {
    arr[0] = 42;
    console.log("Inside function: " + arr[0]); // 输出42
}
let numbers = [1, 2, 3];
modifyArray(numbers);
console.log("Outside function: " + numbers[0]); // 输出42

三、默认参数

JavaScript ES6引入了默认参数的概念，这使得函数定义更加灵活。如果调用函数时没有传递某个参数，则该参数会使用默认值。

1、定义默认参数

默认参数可以在函数定义时直接指定，这样调用函数时可以省略这些参数。

function greet(name = "Guest") {
    console.log("Hello, " + name);
}
greet(); // 输出Hello, Guest
greet("Alice"); // 输出Hello, Alice

2、多个默认参数

你可以为多个参数指定默认值，这样可以进一步简化函数调用。

function calculate(a = 1, b = 2, c = 3) {
    return a + b + c;
}
console.log(calculate()); // 输出6
console.log(calculate(4, 5)); // 输出12

四、剩余参数

JavaScript ES6引入了剩余参数（rest parameters），它允许你将不定数量的参数表示为一个数组，从而使函数定义更加灵活。

1、定义剩余参数

使用剩余参数语法可以将不定数量的参数收集到一个数组中。

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出6
console.log(sum(4, 5, 6, 7)); // 输出22

2、结合默认参数和剩余参数

你可以将默认参数和剩余参数结合使用，以创建更加灵活的函数定义。

function multiply(factor = 1, ...values) {
    return values.map(value => value * factor);
}
console.log(multiply(2, 1, 2, 3)); // 输出[2, 4, 6]
console.log(multiply(3, 4, 5)); // 输出[12, 15]

五、传递函数作为参数

在JavaScript中，函数也是一等公民，这意味着你可以将函数作为参数传递给其他函数，从而实现更高层次的抽象和复用。

1、回调函数

回调函数是传递函数作为参数的常见用法，常用于异步操作和事件处理。

function fetchData(callback) {
    setTimeout(() => {
        let data = "Some data";
        callback(data);
    }, 1000);
}
function processData(data) {
    console.log("Processing: " + data);
}
fetchData(processData); // 1秒后输出Processing: Some data

2、高阶函数

高阶函数是指接受一个或多个函数作为参数，或返回一个函数作为结果的函数。高阶函数可以用于创建更加灵活和可复用的代码。

function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}
let double = createMultiplier(2);
let triple = createMultiplier(3);
console.log(double(5)); // 输出10
console.log(triple(5)); // 输出15

六、绑定函数参数

JavaScript提供了bind方法，可以用于创建一个新的函数，并绑定一些参数。这样可以在函数调用时固定某些参数的值。

1、使用bind绑定参数

bind方法创建一个新的函数，并将指定的参数绑定到这个新函数中。

function greet(greeting, name) {
    console.log(greeting + ", " + name);
}
let sayHelloToAlice = greet.bind(null, "Hello", "Alice");
sayHelloToAlice(); // 输出Hello, Alice

2、部分应用函数

通过bind方法，你可以创建部分应用函数（partial application），这在处理复杂的参数传递时非常有用。

function calculate(a, b, c) {
    return a + b + c;
}
let add5And = calculate.bind(null, 5);
console.log(add5And(3, 2)); // 输出10

七、箭头函数与参数

箭头函数是ES6引入的一种简洁的函数定义方式。它们在处理参数时有一些特殊之处，特别是在处理this关键字时。

1、简洁的参数传递

箭头函数可以使参数传递更加简洁，特别是在回调函数中。

let numbers = [1, 2, 3];
let doubled = numbers.map(n => n * 2);
console.log(doubled); // 输出[2, 4, 6]

2、箭头函数与this

箭头函数不会创建自己的this，它会继承外层作用域的this，这在处理事件处理器和回调函数时非常有用。

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}
let timer = new Timer();
// 每秒输出1, 2, 3, ...

八、参数解构

参数解构是一种从对象或数组中提取值的简洁语法。它使得函数定义更加清晰和简洁，特别是在处理复杂的数据结构时。

1、对象参数解构

对象解构允许你在函数定义中直接提取对象的属性。

function displayUserInfo({ name, age, email }) {
    console.log(`Name: ${name}, Age: ${age}, Email: ${email}`);
}
let user = { name: "Alice", age: 25, email: "alice@example.com" };
displayUserInfo(user); // 输出Name: Alice, Age: 25, Email: alice@example.com

2、数组参数解构

数组解构允许你在函数定义中直接提取数组的元素。

function sum([a, b, c]) {
    return a + b + c;
}
let numbers = [1, 2, 3];
console.log(sum(numbers)); // 输出6

九、参数验证

在JavaScript中，函数参数的类型和数量没有强制要求，但你可以通过代码进行验证，以确保函数的正确性和健壮性。

1、类型检查

你可以在函数内部进行类型检查，以确保参数符合预期的类型。

function add(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new Error("Both arguments must be numbers");
    }
    return a + b;
}
console.log(add(2, 3)); // 输出5
// console.log(add(2, "3")); // 抛出错误: Both arguments must be numbers

2、数量检查

你可以在函数内部检查参数的数量，以确保调用时传递了正确数量的参数。

function multiply(a, b) {
    if (arguments.length !== 2) {
        throw new Error("Function requires exactly 2 arguments");
    }
    return a * b;
}
console.log(multiply(2, 3)); // 输出6
// console.log(multiply(2)); // 抛出错误: Function requires exactly 2 arguments

十、参数默认值与解构

JavaScript ES6引入了参数默认值和解构，这使得函数定义更加灵活和简洁。你可以结合使用这两种特性，以创建更加强大的函数。

1、默认值与对象解构

你可以为解构的对象属性指定默认值，这在处理部分参数时非常有用。

function createUser({ name = "Guest", age = 18, email = "unknown" }) {
    return { name, age, email };
}
console.log(createUser({ name: "Alice" })); // 输出{name: "Alice", age: 18, email: "unknown"}
console.log(createUser({})); // 输出{name: "Guest", age: 18, email: "unknown"}

2、默认值与数组解构

同样，你也可以为解构的数组元素指定默认值。

function initialize([x = 0, y = 0]) {
    return { x, y };
}
console.log(initialize([5])); // 输出{x: 5, y: 0}
console.log(initialize([])); // 输出{x: 0, y: 0}

通过以上各个方面的详细介绍，你应该对JavaScript中函数参数的传递方式有了全面的理解。无论是按值传递、按引用传递，还是默认参数和剩余参数，JavaScript都提供了丰富的语法和灵活的机制，帮助开发者编写更加简洁、可维护的代码。希望这些内容对你有所帮助，能在实际开发中应用自如。