JavaScript第四天函数

	JavaScript（简称JS）是一种广泛应用于网页开发的脚本语言，它可以通过在HTML页面中嵌入<script>标签来实现。

在JavaScript中，函数是一段可重复执行的代码块，通过给函数提供参数，我们可以在需要的时候调用函数并传入不同的数据。函数可以执行特定的任务，并且可以返回一个值。

函数在JavaScript中非常重要，几乎所有的程序都是由多个函数组成的。函数可以被定义为全局函数（在整个脚本中都可访问）或局部函数（只能在特定的代码块中访问）。

创建函数的语法如下：

function functionName(parameter1, parameter2, ...){
    // 函数体
    // 可以包含多条语句
    return value; // 可选，用于返回值
}

• functionName：函数的名称，可以根据需要起名。
• parameter1, parameter2：函数的参数，用于接收传递给函数的值，参数可以有多个，多个参数之间用逗号分隔。
• 函数体：函数中要执行的代码，可以包含多条语句。
• return value：可选项，用于指定函数的返回值，当函数需要返回结果时使用。

调用函数的语法如下：

functionName(argument1, argument2, ...);

• functionName：要调用的函数的名称。
• argument1, argument2：传递给函数的实际值，参数的值是按照顺序传递的。

函数的调用会执行函数体中的代码，并且可以通过return语句返回一个值。

1-初识函数

在JavaScript中，函数是一段可重复使用的代码块。下面是一个简单的函数定义和调用的例子：

// 定义一个名为"greet"的函数，它接受一个参数"name"
function greet(name) {
  // 函数体：返回一个包含问候语的字符串
  return "Hello, " + name + "!";
}

// 调用函数并传递参数
let message = greet("Alice");

// 输出函数执行结果
console.log(message); // 输出："Hello, Alice!"

在这个例子中：

• greet 是一个函数，它接收一个参数 name。
• 在函数体内，我们使用 return 关键字来指定该函数应该返回什么样的值（在这里是拼接好的问候语）。
• 当调用 greet("Alice") 时，name 参数被赋值为 "Alice"，然后函数执行并返回相应的问候语。
• 将返回的问候语赋值给变量 message。
• 最后通过 console.log 输出变量 message 的内容。

2-函数实现九九乘法表

当然，下面是一个使用JavaScript编写九九乘法表的函数示例：

// 定义一个名为 printMultiplicationTable 的函数
function printMultiplicationTable() {
  // 循环遍历1到9（九九乘法表的最大数）
  for (let i = 1; i <= 9; i++) {
    // 内层循环用于打印每一行
    for (let j = 1; j <= i; j++) {
      // 打印当前单元格的乘积
      console.log(`${j} * ${i} = ${i * j}`);
    }
    // 在打印完一行后换行，准备打印下一行
    console.log(""); // 空字符串表示换行
  }
}

// 调用函数来打印九九乘法表
printMultiplicationTable();

当你运行这段代码时，它将在控制台输出经典的九九乘法表。每行显示从1到该行对应数字的乘法结果，并在每个结果之间以及行末添加换行以形成表格效果。

3-函数的参数

在JavaScript中，函数可以接受任意数量和类型的参数。下面是一个简单的示例，展示了一个接受两个数字作为参数并返回它们之和的函数：

// 定义一个名为addNumbers的函数，它接受两个参数a和b
function addNumbers(a, b) {
  // 函数体内部计算两个数的和
  let sum = a + b;

  // 返回结果
  return sum;
}

// 调用函数，并传入具体的参数值
let result = addNumbers(3, 5);

// 输出函数执行的结果
console.log(result); // 输出：8

在这个例子中：

• addNumbers 函数接收两个参数 a 和 b。
• 在函数体内，我们创建了一个变量 sum 并赋值为 a 和 b 的和。
• 使用 return 关键字将计算结果返回给调用者。
• 当调用 addNumbers(3, 5) 时，a 的值是 3，b 的值是 5，函数会计算它们的和（即 8），并将这个结果返回给变量 result。

4-函数的参数案例

下面是一个JavaScript函数参数使用实例，该函数接受两个字符串作为参数，并将它们连接在一起：

// 定义一个名为concatenateStrings的函数，它接受两个参数：str1和str2
function concatenateStrings(str1, str2) {
  // 函数体内部将两个字符串拼接在一起
  let result = str1 + " " + str2;

  // 返回拼接后的字符串结果
  return result;
}

// 调用函数，并传入具体的字符串参数值
let combinedString = concatenateStrings("Hello", "World");

// 输出函数执行的结果
console.log(combinedString); // 输出："Hello World"

在这个例子中：

• concatenateStrings 函数接收两个字符串类型的参数 str1 和 str2。
• 在函数体内，我们创建了一个新的变量 result，并将 str1、空格以及 str2 连接起来形成一个新的字符串。
• 使用 return 关键字将拼接好的字符串返回给调用者。
• 当调用 concatenateStrings("Hello", "World") 时，函数会将 “Hello” 和 “World” 拼接成 “Hello World”，并将这个结果赋值给变量 combinedString。

5-函数的返回值

在JavaScript中，函数可以通过return语句返回一个值。下面是一个简单的示例，该函数接受两个数字作为参数并返回它们的和：

// 定义一个名为calculateSum的函数，它接受两个参数a和b
function calculateSum(a, b) {
  // 在函数体内计算两个数的和
  let sum = a + b;

  // 使用return关键字将计算结果返回给调用者
  return sum;
}

// 调用函数，并接收返回值
let result = calculateSum(3, 5);

// 输出函数执行的结果
console.log(result); // 输出：8

在这个例子中：

• calculateSum 函数接收两个参数 a 和 b。
• 函数内部计算 a 和 b 的和，并将其存储在变量 sum 中。
• 使用 return sum; 将 sum 变量的值作为函数的返回值。
• 当调用 calculateSum(3, 5) 时，函数计算 3 加上 5 的和（即 8），并将这个结果作为返回值赋给 result 变量。
• 最后，我们通过 console.log(result); 输出函数返回的计算结果。

6-函数return案例

// 定义一个函数，该函数接收两个参数并返回它们的和
function addNumbers(num1, num2) {
  // 计算两个数的和
  let sum = num1 + num2;

  // 使用return语句将计算结果返回给调用者
  return sum;
}

// 调用addNumbers函数并将返回值赋给result变量
let result = addNumbers(5, 7);

// 输出函数返回的结果
console.log(result); // 输出：12

// 上述代码中：
// 函数addNumbers接受两个参数num1和num2，计算它们的和，并通过return语句返回这个和。
// 当调用addNumbers(5, 7)时，函数内部执行加法运算得到12，然后将这个结果作为返回值。
// 最后，我们将返回值12存储在result变量中，并打印出来。

在这个案例中，return关键字用于从函数内部向调用者传递计算结果。当JavaScript引擎执行到return sum;这行时，函数会立即停止执行剩余的代码，并将sum的值作为函数调用的结果返回。

7-再谈函数-预解析

JavaScript函数的预解析是指在代码执行前，引擎会先读取整个作用域内的声明（变量和函数），并对它们进行处理。对于函数而言，即使函数定义出现在调用它的代码之后，只要函数是在同一个作用域内，那么该函数也能正常被调用。

下面是一个关于函数预解析的例子：

console.log(greeting()); // 输出 "Hello, World!"

function greeting() {
  return "Hello, World!";
}

// 此时，尽管函数greeting的定义在调用它之后，
// 但由于JavaScript的函数预解析机制，此处仍能正确调用并输出结果。

在这个例子中，虽然greeting()函数的调用在函数定义之前，但JavaScript引擎在执行代码前已经预解析了整个作用域，因此能够识别并正确执行greeting()函数。不过，在实际编程中，为了提高代码可读性，通常建议将函数定义放在调用之前。

8-再谈函数-重名问题

在JavaScript中，函数的作用域分为全局作用域和局部作用域。在同一作用域内，如果定义了两个同名的函数，则后定义的会覆盖前一个定义，但在不同作用域内（例如全局作用域和函数作用域），则不会出现重名问题，而是根据作用域链查找。

以下是一个关于函数重名问题的例子：

// 全局作用域中的函数
function myFunction() {
  console.log("这是全局作用域中的myFunction");
}

// 在同一全局作用域中重新定义该函数
myFunction = function() {
  console.log("这是后定义的全局作用域中的myFunction");
};

// 调用时将输出 "这是后定义的全局作用域中的myFunction"
myFunction();

// --------------------------------------------

// 局部作用域中的重名函数示例
function outerFunction() {
  // 局部作用域内的函数定义
  function myFunction() {
    console.log("这是局部作用域中的myFunction");
  }

  // 尝试在局部作用域内重定义myFunction
  myFunction = function() {
    console.log("这是尝试在局部作用域内重定义的myFunction，但并不会影响外部调用");
  };

  // 调用局部作用域内的myFunction
  myFunction(); // 输出 "这是局部作用域中的myFunction"

  // 尝试在局部作用域外部调用myFunction，由于局部作用域结束，这里的myFunction指向的是全局作用域中的myFunction
}

outerFunction();
myFunction(); // 输出 "这是后定义的全局作用域中的myFunction"

从这个例子可以看出，在全局作用域中，同名函数会被后面的定义覆盖。而在局部作用域中定义的函数，即使与全局作用域中的函数同名，它们也是相互独立的，互不影响。当局部作用域结束后，调用的仍然是全局作用域中的函数。

9-作用域-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // console.log()
        var myname = "kerwin"

        function test(){
            console.log(nickname,myname)
            var nickname = "rtjf"
            console.log("test",nickname)
        }
        console.log(nickname)
    </script>
    <script>
        console.log(myname)

        // console.log(test)
        test()
    </script>
</body>
</html>

10-作用域-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // var num = 100

        function test1(){
            // var num = 200

            function child1(){
                // var num = 300

                num = 40
                console.log(num)
            }
            
            child1()
            
        }
        // console.log("修改前，",num)
        test1()
        console.log("修改后，",num)


        function test2(a,b){
            return a+b
        }

        var res = test2(1,2)
        console.log(res)

        var result 
        function test3(a,b){
            result = a+b
        }
        test3(1,2)
        console.log(result)
    </script>
</body>
</html>

最后求点赞，求分享，求抱抱…