现代JavaScript教程：探索清晰、强大的代码结构

现代JavaScript教程：探索清晰、强大的代码结构

JavaScript 是一种流行的编程语言，广泛用于构建交互式网页和应用程序。随着 JavaScript 的不断发展，其语法和特性也在不断改进，以便于开发人员编写更清晰、更强大的代码。在本教程中，我们将从语句和块开始，逐步介绍作用域、变量、数据类型、运算符、条件语句、循环、函数、对象、数组和事件等主题。您将学会使用 JavaScript 创建交互式网页和应用程序，同时掌握最佳实践和编码规范。无论您是 JavaScript 新手还是经验丰富的开发人员，本教程都能帮助您提升技能并编写出更高质量的代码。

一、语句和块

语句是执行操作的语法结构和命令。我们在前面的教程中已经见过了 alert('Hello, world!') 这样可以用来显示消息的语句。我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。当存在分行符（line break）时，分号可以省略。

alert('Hello, world!');
console.log('Hello, world!');

块是将多个语句组合在一起的结构。块可以使用花括号 {} 来表示。块中的语句可以共享相同的变量和常量。

{
  let message = 'Hello, world!';
  alert(message);
  console.log(message);
}

二、作用域

作用域是变量和常量可以被引用的范围。JavaScript 中的作用域有两种：全局作用域和局部作用域。

全局作用域是整个程序都可以访问的作用域。在全局作用域中声明的变量和常量可以在程序的任何地方使用。

局部作用域是函数内部的作用域。在局部作用域中声明的变量和常量只能在该函数内部使用。

let globalVariable = 'Hello, world!';

function sayHello() {
  let localVariable = 'Hello, JavaScript!';
  console.log(globalVariable); // 'Hello, world!'
  console.log(localVariable); // 'Hello, JavaScript!'
}

sayHello();
console.log(globalVariable); // 'Hello, world!'
console.log(localVariable); // ReferenceError: localVariable is not defined

三、变量

变量是用来存储数据的容器。变量可以使用 let 或 const 来声明。let 声明的变量可以重新赋值，而 const 声明的变量则不能重新赋值。

let message = 'Hello, world!';
message = 'Hello, JavaScript!';

const PI = 3.141592653589793;
// PI = 3.14; // TypeError: Assignment to constant variable.

四、数据类型

JavaScript 中有六种基本数据类型：

• 字符串（string）：由一个或多个字符组成的序列。字符串可以使用单引号或双引号来表示。
• 数字（number）：可以是整数、小数或指数。
• 布尔值（boolean）：可以是 true 或 false。
• 未定义（undefined）：表示变量尚未被赋值。
• 空值（null）：表示变量的值为空。
• Symbol：一种唯一标识符，用于表示对象。

let message = 'Hello, world!'; // string
let age = 25; // number
let isMarried = false; // boolean
let salary; // undefined
let empty = null; // null
let symbol = Symbol('mySymbol'); // symbol

五、运算符

运算符是用于对操作数进行操作的符号。JavaScript 中有许多运算符，包括算术运算符、比较运算符、逻辑运算符和赋值运算符。

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

console.log(a == b); // false
console.log(a != b); // true
console.log(a > b); // true
console.log(a < b); // false
console.log(a >= b); // true
console.log(a <= b); // false

console.log(a && b); // true
console.log(a || b); // true
console.log(!a); // false

a += b; // a = a + b
a -= b; // a = a - b
a *= b; // a = a * b
a /= b; // a = a / b
a %= b; // a = a % b