JavaScript第四讲：函数，作用域，运算符

前言

在JavaScript的广阔天地中，函数、作用域、算术运算符和逻辑运算符是构成代码世界的基石。它们各自扮演着不同的角色，却又紧密相连，共同编织出丰富多彩的程序逻辑。无论是编写一个简单的网页交互，还是构建一个复杂的应用程序，这些基础知识都是不可或缺的。今天星途给大家带来函数，作用域，运算符的详解，学过的大佬们可以当作笔记收藏起来。

JavaScript 语言基础详解：函数

在 JavaScript 中，函数（Function）是一段可以重复使用的代码块，它用于执行特定的任务。函数可以接收输入（参数）并返回输出（返回值）。下面我们将从函数的定义、带参数的函数以及带返回值的函数等方面来详细讲解。

1. 函数的定义

在 JavaScript 中，我们可以使用 function 关键字来定义函数。函数的定义包括函数名、参数列表和函数体。

// 定义一个名为 sayHello 的函数  
function sayHello() {  
    console.log("Hello, world!");  
}  
  
// 调用函数  
sayHello(); // 输出：Hello, world!

2. 带参数的函数

函数可以接收参数，这些参数在函数体内部可以作为变量来使用。参数在定义函数时列出，并在调用函数时提供具体的值。

// 定义一个带参数的函数 greet  
function greet(name) {  
    console.log("Hello, " + name + "!");  
}  
  
// 调用函数并传递参数  
greet("Alice"); // 输出：Hello, Alice!  
greet("Bob"); // 输出：Hello, Bob!

在上面的例子中，我们定义了一个名为 greet 的函数，它接收一个参数 name。在函数体内部，我们使用这个参数来构造一条问候语，并通过 console.log 输出。当我们调用 greet 函数并传递不同的参数时，函数会输出不同的问候语。

3. 带返回值的函数

函数还可以返回一个值。这个值可以是任何 JavaScript 数据类型，包括基本数据类型（如字符串、数字等）和复杂数据类型（如对象、数组等）。要返回一个值，我们可以使用 return 语句。

// 定义一个带返回值的函数 calculateSum  
function calculateSum(a, b) {  
    return a + b;  
}  
  
// 调用函数并获取返回值  
let result = calculateSum(3, 5); // result 的值为 8  
console.log(result); // 输出：8

在上面的例子中，我们定义了一个名为 calculateSum 的函数，它接收两个参数 a 和 b，并返回它们的和。当我们调用 calculateSum 函数并传递参数 3 和 5 时，函数会返回它们的和 8，并将这个值存储在变量 result 中。最后，我们通过 console.log 输出 result 的值。

函数小结

通过上面的介绍和示例代码，我们详细讲解了 JavaScript 中函数的定义、带参数的函数以及带返回值的函数。函数是 JavaScript 中非常重要的概念，它可以帮助我们组织代码、提高代码的可复用性和可维护性。

JavaScript 语言基础详解：作用域

在 JavaScript 中，作用域（Scope）是一个非常重要的概念，它决定了变量、函数和对象的可访问性。简单来说，作用域就是变量和函数可以被访问的代码区域。下面我们将从参数的作用域和全局变量的作用域两个方面来详细讲解。

1. 参数的作用域

在 JavaScript 中，函数的参数在函数体内具有局部作用域。这意味着参数只能在函数体内部被访问，函数体外部无法直接访问函数的参数。

function greet(name) {  
    // 参数 name 在函数体内部具有局部作用域  
    console.log("Hello, " + name + "!");  
}  
  
// 调用函数，传递参数 "Alice"  
greet("Alice"); // 输出：Hello, Alice!  
  
// 在函数体外部无法直接访问参数 name  
// 下面的代码会报错，因为 name 未定义  
console.log(name); // ReferenceError: name is not defined

在上面的例子中，greet 函数接收一个参数 name，该参数在函数体内部具有局部作用域。当我们在函数体外部尝试访问 name 时，会抛出一个 ReferenceError，因为 name 在这个上下文中是未定义的。

2. 全局变量的作用域

在 JavaScript 中，如果你在函数体外部声明一个变量（没有使用 var、let 或 const 关键字声明，或者使用了 var 关键字但在任何函数体外部），那么这个变量就会成为一个全局变量，具有全局作用域。全局变量可以在代码的任何地方被访问和修改。

不过，在现代 JavaScript 开发中，通常推荐使用 let 或 const 来声明变量，因为它们具有块级作用域（block scope），这有助于减少命名冲突和意外的变量修改。

下面是一个全局变量的例子：

// 在函数体外部声明一个全局变量  
var globalVar = "I am global!";  
  
function showGlobalVar() {  
    // 在函数体内部可以访问全局变量  
    console.log(globalVar); // 输出：I am global!  
}  
  
// 在函数体外部也可以访问全局变量  
console.log(globalVar); // 输出：I am global!  
  
// 修改全局变量的值  
globalVar = "I changed!";  
  
// 再次访问全局变量，值已经改变  
console.log(globalVar); // 输出：I changed!

在上面的例子中，我们声明了一个全局变量 globalVar，并在函数体内部和外部都可以访问和修改它。

然而，使用全局变量通常被认为是一种不好的编程实践，因为它可能会导致命名冲突和意外的副作用。因此，在编写代码时，应尽量避免使用全局变量，而是使用局部变量或模块化的方式来组织代码。

JavaScript 语言基础详解：算术运算符

在 JavaScript 中，算术运算符用于执行数学计算，比如加、减、乘、除等。下面我们将从基本算术运算符、自增和自减运算符、赋值运算符以及 + 运算符的多态性等方面来详细讲解。

1. 基本算术运算符

基本算术运算符包括：

• 加法运算符 +
• 减法运算符 -
• 乘法运算符 *
• 除法运算符 /
• 取模运算符 %

示例：

let a = 5;  
let b = 3;  
  
console.log(a + b);  // 加法: 输出 8  
console.log(a - b);  // 减法: 输出 2  
console.log(a * b);  // 乘法: 输出 15  
console.log(a / b);  // 除法: 输出 1.6666666666666667  
console.log(a % b);  // 取模: 输出 2

2. 自增和自减运算符

• 自增运算符 ++：将变量的值加 1。
• 自减运算符 --：将变量的值减 1。

自增和自减运算符有两种形式：前置（先加/减后使用）和后置（先使用后加/减）。

示例：

let c = 5;  
  
console.log(++c);  // 前置自增: 输出 6，此时 c 的值也是 6  
c = 5;  
console.log(c++);  // 后置自增: 输出 5，但此时 c 的值已经变为 6  
  
let d = 5;  
  
console.log(--d);  // 前置自减: 输出 4，此时 d 的值也是 4  
d = 5;  
console.log(d--);  // 后置自减: 输出 5，但此时 d 的值已经变为 4

3. 赋值运算符

赋值运算符 = 用于给变量赋值。但 JavaScript 还提供了复合赋值运算符，它们结合了算术运算符和赋值运算符的功能。

• +=：加等于
• -=：减等于
• *=：乘等于
• /=：除等于
• %=：取模等于

示例：

let e = 10;  
  
e += 5;  // 相当于 e = e + 5; 输出 e 的值: 15  
e -= 3;  // 相当于 e = e - 3; 输出 e 的值: 12  
e *= 2;  // 相当于 e = e * 2; 输出 e 的值: 24  
e /= 4;  // 相当于 e = e / 4; 输出 e 的值: 6  
e %= 2;  // 相当于 e = e % 2; 输出 e 的值: 0

4. + 运算符的多态性

在 JavaScript 中，+ 运算符具有多态性，它既可以作为加法运算符，也可以作为字符串连接符（当其中一个操作数是字符串时）。

示例：

let f = 10;  
let g = "5";  
  
console.log(f + g);  // 输出 "105"，因为 g 是字符串，所以执行了字符串连接  
console.log(f + parseInt(g));  // 输出 15，通过 parseInt 将 g 转换为整数，然后执行加法

在这个例子中，当 f（一个数字）和 g（一个字符串）相加时，JavaScript 将 f 转换为字符串，并执行字符串连接。但是，如果我们使用 parseInt(g) 将 g 转换为整数，然后再相加，就会得到数字的和。

JavaScript语言基础详解：逻辑运算符

在JavaScript中，逻辑运算符用于根据一个或多个条件来执行不同的操作。这些运算符通常用于条件语句（如if、else、while等）中。下面我们将从基本逻辑运算符、绝对等于和绝对不等于、以及三目运算符等方面进行详细解释，并附上代码示例。

1. 基本逻辑运算符

• 逻辑与（AND）：&&
• 逻辑或（OR）：||
• 逻辑非（NOT）：!

示例：

let x = 5;  
let y = 10;  
  
// 逻辑与（AND）  
let andResult = (x === 5) && (y === 10); // true，因为两个条件都为真  
console.log(andResult);  
  
// 逻辑或（OR）  
let orResult = (x === 2) || (y === 10); // true，因为第二个条件为真  
console.log(orResult);  
  
// 逻辑非（NOT）  
let notResult = !(x === 5); // false，因为x确实等于5  
console.log(notResult);

2. 绝对等于和绝对不等于

在JavaScript中，我们使用===（绝对等于）和!==（绝对不等于）来比较两个值是否相等，包括它们的值和类型。这与==（等于）和!=（不等于）不同，后者在比较时会进行类型转换。

示例：

let a = 5;  
let b = "5";  
  
// 绝对等于（值和类型都相等）  
let equalResult = a === b; // false，因为a是数字，b是字符串  
console.log(equalResult);  
  
// 绝对不等于（值或类型不相等）  
let notEqualResult = a !== b; // true，因为a和b的类型不同  
console.log(notEqualResult);

3. 三目运算符（条件运算符）

三目运算符（也称为条件运算符）允许你在一行代码中执行简单的条件语句。其语法为：条件 ? 值1 : 值2。如果条件为真，则返回值1；否则返回值2。

示例：

let z = 10;  
let max = (z > 5) ? z : 5; // 如果z大于5，则max为z的值，否则为5  
console.log(max); // 输出10  
  
z = 3;  
max = (z > 5) ? z : 5; // 如果z不大于5，则max为5  
console.log(max); // 输出5

结语：

经过对函数、作用域、算术运算符和逻辑运算符的深入探讨，相信大家对JavaScript的基础知识有了更加深入的理解。这些基础知识是编写高质量JavaScript代码的基础，也是成为一名优秀JavaScript开发者的必备技能。

在编程的道路上，不断学习和实践是成长的关键。希望大家能够将这些基础知识融入到实际的项目中，通过不断的实践和总结，不断提升自己的编程能力。愿大家在JavaScript的海洋中畅游，创造出精彩的作品！

respect！