当前位置: 技术文章>> javascript入门与进阶之函数的定义和调用

文章标题:javascript入门与进阶之函数的定义和调用
  • 文章分类: 前端
  • 16872 阅读

JavaScript中函数是一种可重复使用的代码块,用于执行特定的任务或计算。在JavaScript中定义函数可以使用function关键字或者箭头函数语法,调用函数可以使用函数名加括号的形式,可以传递参数,也可以返回结果。

JavaScript函数的定义
使用function关键字定义函数:

function functionName(parameter1, parameter2, ...) {  // 函数体  return result;}

使用箭头函数语法定义函数:

let functionName = (parameter1, parameter2, ...) => {  // 函数体  return result;}

示例:

function add(a, b) {  return a + b;}let subtract = (a, b) => {  return a - b;}console.log(add(1, 2)); // 输出:3console.log(subtract(4, 2)); // 输出:2

在上面的示例中,定义了一个名为add的函数和一个名为subtract的箭头函数。add函数接受两个参数a和b,计算它们的和并返回结果。subtract箭头函数接受两个参数a和b,计算它们的差并返回结果。

JavaScript函数的调用
JavaScript中调用函数可以使用函数名加括号的形式,并且可以传递参数。如果函数有返回值,可以将返回值赋给一个变量。

示例:

function multiply(a, b) {  return a * b;}let x = multiply(2, 3);console.log(x); // 输出:6

在上面的示例中,定义了一个名为multiply的函数,接受两个参数a和b,计算它们的乘积并返回结果。调用multiply函数时传递了2和3作为参数,并将返回值赋给变量x。

JavaScript函数的参数
JavaScript函数的参数可以通过参数列表传递给函数。在函数内部可以使用参数的值执行特定的任务或计算。JavaScript函数的参数可以是基本类型或对象类型,可以有默认值,也可以使用展开语法传递数组或对象。

示例:

function greet(name = "World") {
    console.log("Hello, " + name + "!");
}
let numbers = [1, 2, 3];
let sum = (a, b, c) = >{
    return a + b + c;
}
greet(); // 输出:Hello, World!greet("John"); // 输出:Hello, John!console.log(sum(...numbers)); // 输出:6

在上面的示例中,定义了一个名为greet的函数,接受一个参数name,如果没有传递参数,则默认为”World”。调用greet函数时传递了不同的参数。

另外,使用展开语法…可以将数组或对象拆分成多个参数传递给函数。在上面的示例中,使用展开语法将数组numbers拆分成三个参数传递给sum箭头函数,计算它们的和并返回结果。

JavaScript函数的返回值
JavaScript函数的返回值可以使用return语句返回,并可以返回任何类型的值,包括基本类型和对象类型。

示例:

function multiply(a, b) {
    return a * b;
}
let x = multiply(2, 3);
console.log(x); // 输出:6

在上面的示例中,定义了一个名为multiply的函数,接受两个参数a和b,计算它们的乘积并返回结果。调用multiply函数时传递了2和3作为参数,并将返回值赋给变量x。

JavaScript中也可以不使用return语句返回值,这时函数返回undefined。

示例:

function greet(name) {
    console.log("Hello, " + name + "!");
}
let x = greet("John");
console.log(x); // 输出:undefined

在上面的示例中,定义了一个名为greet的函数,接受一个参数name。调用greet函数时传递了”John”作为参数,函数执行完成后没有返回任何值,所以变量x的值为undefined。

JavaScript函数的作用域
JavaScript中的函数有自己的作用域,函数内部定义的变量只能在函数内部访问。而函数外部定义的变量在函数内部也可以访问,这就是JavaScript的词法作用域。

示例:

let x = 10;
function add(a, b) {
    let x = 5;
    return a + b + x;
}
console.log(add(1, 2)); // 输出:8console.log(x); // 输出:10

在上面的示例中,定义了一个名为add的函数和一个名为x的变量。函数内部定义了一个名为x的变量,它的值为5。调用add函数时传递了1和2作为参数,函数内部计算它们的和并加上变量x的值,返回结果为8。最后输出全局变量x的值为10。可以看到,函数内部的变量x只在函数内部有效,不影响全局变量x的值。

JavaScript中也有块级作用域的概念,可以使用let和const关键字定义块级作用域的变量。

示例:

function test() {
    let x = 10;
    if (true) {
        let x = 20;
        console.log(x); // 输出:20  }  console.log(x); // 输出:10}test();

在上面的示例中,定义了一个名为test的函数。函数内部定义了一个名为x的变量,它的值为10。在if语句块内部又定义了一个名为x的变量,它的值为20。在if语句块外部再次输出变量x的值为10,说明在if语句块内部定义的变量x只在块级作用域内有效,不影响函数内部定义的变量x的值。


推荐文章