Skip to content

JavaScript 基础语法

JavaScript 语法是编写 JavaScript 代码时必须遵循的规则和结构。掌握基础语法是学习 JavaScript 的第一步,也是最重要的一步。在本章节中,我们将学习 JavaScript 的基本语法规则。

JavaScript 语句

JavaScript 程序是由一系列可执行的语句组成的。语句是执行特定任务的指令。在 JavaScript 中,语句通常以分号(;)结尾,但分号是可选的。

javascript
let x = 5;
let y = 6;
let z = x + y;

语句分隔符

虽然分号是可选的,但为了代码的清晰性和避免潜在问题,建议始终使用分号分隔语句。

javascript
// 推荐写法
let name = "张三";
console.log(name);

// 不推荐写法(虽然可以工作)
let age = 25
console.log(age)

JavaScript 代码块

JavaScript 语句可以组合成代码块,用花括号 {} 包裹。代码块通常用于函数、条件语句和循环语句中。

javascript
function myFunction() {
    let message = "Hello World";
    console.log(message);
    return message;
}

JavaScript 注释

注释是代码中不会被执行的部分,用于解释代码的作用,提高代码的可读性。

单行注释

使用 // 开头的注释是单行注释,注释内容从 // 开始到行尾结束。

javascript
// 这是一个单行注释
let x = 5; // 这也是单行注释

多行注释

使用 /* */ 包裹的注释是多行注释,可以跨越多行。

javascript
/*
这是一个多行注释
可以跨越多行
用于详细解释代码
*/
let y = 10;

JavaScript 变量

变量是存储数据值的容器。在 JavaScript 中,使用 var、let 或 const 关键字声明变量。

javascript
var name = "张三";
let age = 25;
const PI = 3.14159;

变量命名规则

  1. 变量名必须以字母、下划线(_)或美元符号($)开头
  2. 变量名可以包含字母、数字、下划线和美元符号
  3. 变量名区分大小写
  4. 不能使用 JavaScript 保留关键字作为变量名
javascript
// 正确的变量命名
let myVariable = "正确";
let _private = "正确";
let $price = 99.99;
let userName123 = "正确";

// 错误的变量命名
// let 123name = "错误"; // 不能以数字开头
// let my-variable = "错误"; // 不能包含连字符
// let let = "错误"; // 不能使用保留关键字

JavaScript 数据类型

JavaScript 有多种数据类型,包括:

  • 字符串(String):用于存储文本
  • 数字(Number):用于存储数值
  • 布尔值(Boolean):表示 true 或 false
  • 对象(Object):用于存储复杂数据
  • 数组(Array):特殊的对象类型,用于存储有序数据集合
  • null:表示"无值"
  • undefined:表示未定义的值
javascript
let name = "张三";        // 字符串
let age = 25;            // 数字
let isStudent = true;    // 布尔值
let person = {           // 对象
    name: "李四",
    age: 30
};
let colors = ["红", "绿", "蓝"]; // 数组
let empty = null;        // null
let notDefined;          // undefined

JavaScript 运算符

运算符用于对操作数执行操作。

算术运算符

javascript
let x = 10;
let y = 5;

console.log(x + y);  // 加法:15
console.log(x - y);  // 减法:5
console.log(x * y);  // 乘法:50
console.log(x / y);  // 除法:2
console.log(x % y);  // 取模(余数):0
console.log(x ** y); // 幂运算:100000

赋值运算符

javascript
let x = 10;

x += 5;  // 等同于 x = x + 5
x -= 3;  // 等同于 x = x - 3
x *= 2;  // 等同于 x = x * 2
x /= 4;  // 等同于 x = x / 4

比较运算符

javascript
let x = 5;
let y = 10;

console.log(x == y);  // 等于:false
console.log(x != y);  // 不等于:true
console.log(x === y); // 严格等于:false
console.log(x !== y); // 严格不等于:true
console.log(x > y);   // 大于:false
console.log(x < y);   // 小于:true
console.log(x >= y);  // 大于等于:false
console.log(x <= y);  // 小于等于:true

逻辑运算符

javascript
let x = 5;
let y = 10;

console.log(x < 10 && y > 5);  // 逻辑与:true
console.log(x < 10 || y < 5);  // 逻辑或:true
console.log(!(x == y));        // 逻辑非:true

JavaScript 函数

函数是一段可重复使用的代码块,用于执行特定任务。

javascript
// 函数声明
function greet(name) {
    return "你好," + name + "!";
}

// 调用函数
let message = greet("张三");
console.log(message); // 输出:你好,张三!

JavaScript 条件语句

条件语句用于根据不同的条件执行不同的代码块。

javascript
let age = 18;

if (age >= 18) {
    console.log("您已成年");
} else {
    console.log("您未成年");
}

JavaScript 循环语句

循环语句用于重复执行代码块。

javascript
// for 循环
for (let i = 0; i < 5; i++) {
    console.log("循环次数:" + i);
}

// while 循环
let count = 0;
while (count < 5) {
    console.log("计数:" + count);
    count++;
}

JavaScript 错误处理

JavaScript 提供了 try...catch 语句来处理错误。

javascript
try {
    // 可能出现错误的代码
    let result = x / y;
} catch (error) {
    // 处理错误
    console.log("发生错误:" + error.message);
} finally {
    // 无论是否出错都会执行的代码
    console.log("执行完成");
}

JavaScript 严格模式

严格模式是 JavaScript 的一种受限变体,它消除了 JavaScript 语言的一些不合理、不严谨之处。

javascript
"use strict";

// 在严格模式下,未声明的变量会报错
// x = 5; // 这会报错
let x = 5; // 正确写法

JavaScript 代码风格建议

  1. 使用一致的缩进:通常使用 2 个或 4 个空格进行缩进
  2. 使用有意义的变量名:变量名应清楚表达其用途
  3. 添加注释:对复杂逻辑添加注释说明
  4. 保持代码简洁:避免过长的代码行和过深的嵌套
  5. 使用代码格式化工具:如 Prettier 保持代码风格一致
javascript
// 好的代码风格示例
function calculateArea(width, height) {
    // 计算矩形面积
    const area = width * height;
    
    // 输出结果
    console.log("矩形面积为:" + area);
    
    return area;
}

// 调用函数
calculateArea(10, 5);

总结

JavaScript 基础语法包括:

  1. 语句:JavaScript 程序的基本单位,通常以分号结尾
  2. 代码块:用花括号包裹的语句集合
  3. 注释:单行注释(//)和多行注释(/* */)
  4. 变量:使用 var、let、const 声明,遵循命名规则
  5. 数据类型:字符串、数字、布尔值、对象、数组等
  6. 运算符:算术、赋值、比较、逻辑运算符
  7. 函数:可重复使用的代码块
  8. 条件语句:if...else 语句
  9. 循环语句:for 循环、while 循环
  10. 错误处理:try...catch 语句
  11. 严格模式:提高代码质量和安全性

掌握这些基础语法是学习 JavaScript 的重要第一步。在下一章节中,我们将深入学习 JavaScript 的数据类型。

本站内容仅供学习和研究使用。