JavaScript表达式

在本章节中，我们将学习JavaScript表达式的相关知识，包括表达式的定义、类型、求值顺序和使用方法。

1. 什么是表达式？

表达式是由变量、常量、运算符和函数调用等组成的代码片段，它会被JavaScript引擎求值并产生一个结果值。

简单来说，表达式就是会产生一个值的代码。例如：

5 + 3; // 表达式，结果为8
"Hello" + " World"; // 表达式，结果为"Hello World"
x > 5; // 表达式，结果为布尔值
Math.sqrt(16); // 表达式，结果为4

表达式可以用于以下场景：

赋值给变量
作为函数参数
作为条件判断
作为返回值
直接输出结果

2. 表达式的类型

JavaScript表达式可以分为多种类型，根据它们的功能和产生的值的类型来分类。

2.1 算术表达式

算术表达式用于执行数学运算，产生一个数字结果。

// 基本算术表达式
5 + 3; // 8
10 - 4; // 6
3 * 4; // 12
12 / 3; // 4
10 % 3; // 1

// 复杂算术表达式
(5 + 3) * 2; // 16
10 / (2 + 3); // 2

2.2 赋值表达式

赋值表达式用于将一个值赋给变量，产生的结果是被赋的值。

// 简单赋值表达式
let x = 5; // 结果为5

// 复合赋值表达式
let y = 10;
y += 5; // 结果为15

// 链式赋值表达式
let a, b, c;
a = b = c = 10; // 结果为10，a、b、c都被赋值为10

2.3 比较表达式

比较表达式用于比较两个值，产生一个布尔值结果（true或false）。

// 比较表达式
5 > 3; // true
10 < 20; // true
5 === 5; // true
5 === "5"; // false
"abc" > "abd"; // false（字符串比较是按照字符编码顺序进行的）

2.4 逻辑表达式

逻辑表达式用于组合或反转布尔值，产生一个布尔值结果。

// 逻辑表达式
true && false; // false
true || false; // true
!true; // false

// 短路求值
5 > 3 && 10 < 20; // true
5 > 3 && 10 > 20; // false
5 < 3 || 10 < 20; // true

2.5 字符串表达式

字符串表达式用于操作字符串，产生一个字符串结果。

// 字符串拼接
"Hello" + " " + "World"; // "Hello World"

// 字符串与其他类型拼接
"The answer is " + 42; // "The answer is 42"

// 模板字符串（ES6+）
let name = "张三";
let age = 18;
`我叫${name}，今年${age}岁。`; // "我叫张三，今年18岁。"

2.6 函数表达式

函数表达式用于创建函数，产生一个函数对象。

// 匿名函数表达式
let add = function(a, b) {
    return a + b;
};

// 箭头函数表达式（ES6+）
let multiply = (a, b) => a * b;

// 立即执行函数表达式（IIFE）
(function() {
    console.log("立即执行的函数");
})();

2.7 对象表达式

对象表达式用于创建对象，产生一个对象实例。

// 对象字面量表达式
let person = {
    name: "张三",
    age: 18,
    sayHello: function() {
        console.log("你好！");
    }
};

// 计算属性名（ES6+）
let key = "name";
let obj = {
    [key]: "李四"
};

2.8 数组表达式

数组表达式用于创建数组，产生一个数组实例。

// 数组字面量表达式
let numbers = [1, 2, 3, 4, 5];

// 嵌套数组
let matrix = [[1, 2], [3, 4]];

// 数组初始化器中的表达式
let squares = [1, 2, 3, 4, 5].map(x => x * x);

2.9 条件表达式

条件表达式（三元运算符）用于根据条件返回不同的值，产生一个值。

// 三元表达式
let x = 10;
let result = x > 5 ? "大于5" : "小于等于5"; // 结果为"大于5"

// 嵌套三元表达式
let score = 85;
let grade = score >= 90 ? "A" : 
            score >= 80 ? "B" : 
            score >= 70 ? "C" : "D"; // 结果为"B"

2.10 类型表达式

类型表达式用于检测变量的类型，产生一个类型字符串或布尔值。

// typeof表达式
typeof 5; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"

// instanceof表达式
let arr = [1, 2, 3];
arr instanceof Array; // true
arr instanceof Object; // true

3. 表达式的求值顺序

JavaScript表达式的求值顺序由运算符优先级和结合性决定。

3.1 运算符优先级

运算符优先级决定了表达式中不同运算符的执行顺序，优先级高的运算符先执行。

例如，乘法运算符的优先级高于加法运算符，所以先执行乘法：

5 + 3 * 2; // 先计算3*2=6，再计算5+6=11

可以使用括号来改变优先级，括号内的表达式会先执行：

(5 + 3) * 2; // 先计算5+3=8，再计算8*2=16

3.2 运算符结合性

运算符结合性决定了同一优先级的运算符的执行顺序，分为左结合和右结合两种。

左结合：从左到右执行，如加法、减法、乘法、除法等
右结合：从右到左执行，如赋值运算符、三元运算符等

例如，赋值运算符是右结合的：

a = b = c = 10; // 先计算c=10，再计算b=10，最后计算a=10

而加法运算符是左结合的：

a + b + c; // 先计算a+b，再计算结果+c

3.3 短路求值

逻辑运算符（&&和||）具有短路求值特性，即如果第一个操作数已经可以确定整个表达式的结果，就不会计算第二个操作数。

// 逻辑与短路求值
false && console.log("不会执行"); // 第一个操作数为false，整个表达式结果为false，不会执行第二个操作数
true && console.log("会执行"); // 第一个操作数为true，需要执行第二个操作数

// 逻辑或短路求值
true || console.log("不会执行"); // 第一个操作数为true，整个表达式结果为true，不会执行第二个操作数
false || console.log("会执行"); // 第一个操作数为false，需要执行第二个操作数

短路求值可以用于简化代码，例如：

// 安全访问对象属性
let obj = null;
let name = obj && obj.name; // 不会报错，结果为null

// 默认值设置
let username = userInput || "默认用户名"; // 如果userInput为假值，使用默认值

4. 表达式与语句的区别

在JavaScript中，表达式和语句是两个不同的概念，容易混淆。

4.1 表达式

表达式会产生一个值
表达式可以作为其他表达式的一部分
表达式可以用于赋值、函数参数、条件判断等
例如：5 + 3、x = 10、x > 5

4.2 语句

语句用于执行操作，不一定产生值
语句通常以分号结尾
语句用于控制流程、定义变量、声明函数等
例如：let x = 10;、if (x > 5) { ... }、for (let i = 0; i < 10; i++) { ... }

4.3 表达式语句

有些表达式可以作为语句使用，称为表达式语句。表达式语句是通过在表达式后面加上分号来构成的。

// 表达式语句
x = 10; // 赋值表达式作为语句
console.log("Hello"); // 函数调用表达式作为语句
x++; // 自增表达式作为语句

5. 常见表达式示例

5.1 简单表达式

// 常量表达式
5; // 5
"Hello"; // "Hello"
true; // true

// 变量表达式
let x = 10;
x; // 10

5.2 复合表达式

// 算术复合表达式
(5 + 3) * (10 - 4) / 2; // 24

// 逻辑复合表达式
(x > 5 && y < 10) || (z === 0);

// 字符串复合表达式
"Hello" + " " + "World" + "!";

5.3 函数表达式

// 命名函数表达式
let factorial = function fact(n) {
    if (n <= 1) return 1;
    return n * fact(n - 1);
};

// 箭头函数表达式
let square = x => x * x;
let add = (a, b) => a + b;
let greet = () => console.log("Hello");

5.4 数组和对象表达式

// 数组表达式
let numbers = [1, 2, 3, 4, 5];
let nestedArray = [1, [2, 3], [4, 5]];
let computedArray = [1, 2, 3, 4, 5].map(x => x * 2);

// 对象表达式
let person = {
    name: "张三",
    age: 18,
    address: {
        city: "北京",
        district: "朝阳区"
    },
    hobbies: ["读书", "编程", "运动"],
    sayHello: function() {
        console.log(`你好，我叫${this.name}。`);
    }
};

6. 表达式的使用场景

6.1 作为赋值语句的右侧

let x = 5 + 3; // 算术表达式作为赋值右侧
let y = x > 5; // 比较表达式作为赋值右侧
let z = "Hello" + " World"; // 字符串表达式作为赋值右侧

6.2 作为函数参数

// 表达式作为函数参数
console.log(5 + 3); // 输出8
Math.max(10, 20, 30); // 返回30
Math.sqrt(16 + 9); // 返回5

6.3 作为条件判断

// 表达式作为条件判断
let x = 10;
if (x > 5) {
    console.log("x大于5");
}

// 表达式作为循环条件
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

6.4 作为返回值

// 表达式作为返回值
function add(a, b) {
    return a + b; // 算术表达式作为返回值
}

function isEven(num) {
    return num % 2 === 0; // 比较表达式作为返回值
}

6.5 作为模板字符串的一部分

// 表达式作为模板字符串的一部分
let name = "张三";
let age = 18;
let message = `我叫${name}，今年${age}岁。我出生于${new Date().getFullYear() - age}年。`;
console.log(message); // 输出类似："我叫张三，今年18岁。我出生于2008年。"

7. 常见问题解答

Q: 什么是表达式？

A: 表达式是由变量、常量、运算符和函数调用等组成的代码片段，它会被JavaScript引擎求值并产生一个结果值。

Q: 表达式和语句有什么区别？

A: 表达式会产生一个值，而语句用于执行操作，不一定产生值。表达式可以作为语句的一部分，例如赋值表达式可以作为赋值语句。

Q: 什么是短路求值？

A: 短路求值是指在逻辑运算中，如果第一个操作数已经可以确定整个表达式的结果，就不会计算第二个操作数。这可以提高代码的执行效率。

Q: 什么是运算符优先级和结合性？

A: 运算符优先级决定了不同运算符的执行顺序，优先级高的运算符先执行。运算符结合性决定了同一优先级的运算符的执行顺序，分为左结合和右结合两种。

Q: 什么是立即执行函数表达式（IIFE）？

A: 立即执行函数表达式是定义后立即执行的函数表达式，用于创建独立的作用域，避免变量污染。

8. 练习项目

创建一个HTML文件，包含以下内容：
- 一个输入框，用于输入一个数字
- 一个按钮，用于计算
- 一个显示结果的区域
使用JavaScript实现以下功能：
- 点击按钮时，获取输入框的值
- 计算该数字的平方、立方和平方根
- 使用表达式计算结果
- 在结果区域显示计算结果
测试不同的输入值，确保计算结果正确

9. 小结

表达式是会产生一个值的代码片段
JavaScript表达式包括算术表达式、赋值表达式、比较表达式、逻辑表达式等多种类型
表达式的求值顺序由运算符优先级和结合性决定
逻辑运算符具有短路求值特性，可以提高代码执行效率
表达式和语句是不同的概念，表达式会产生值，而语句用于执行操作
表达式可以用于赋值、函数参数、条件判断、返回值等场景

在下一章节中，我们将学习JavaScript语句的相关知识。