JavaScript 基础语法与核心概念实战指南

• 单行注释：//，快捷键通常是 Ctrl + /。
• 多行注释：/* ... */。
• 结束符：分号 ; 可选加可不加，JavaScript 引擎会自动识别语句结束，但建议养成规范习惯。

输出与输入语法

常用的输出方式有四种：

1. document.write()：直接写入文档流。
2. alert()：弹出警示框。
3. console.log()：输出到控制台。
4. prompt()：显示对话框，可提示用户输入信息。

注意：alert 和 prompt 会阻塞页面渲染，优先执行。

变量管理

变量是计算机用于存储数据的容器。

声明与赋值

使用 let 关键字声明变量并进行初始化：

let age = 18;

练习示例：

<script>
    let num = 20;
    let uname = '小李';
    console.log(num);
    console.log(uname);
</script>

虽然可以写成 let num = 20, uname = '小李' 的形式，但为了可读性，建议分开声明。

变量更新与规则

let 声明的变量允许重新赋值，但不允许重复声明同一名称的变量：

let age = 18;
age = 19; // 合法
// let age = 20; // 报错：Identifier 'age' has already been declared

命名规则：

• 不能使用关键字。
• 只能由下划线 _、字母、数字 $ 组成。
• 不能以数字开头。
• 严格区分大小写。

常量

使用 const 声明常量，一旦赋值不可更改，且声明时必须初始化：

const PI = 3.14;

数组与数据结构

数组允许将一组数据存储在一个变量名下，比单个变量更优雅。

声明语法：

let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];

取值练习：

console.log(arr[6]); // 输出：星期日

术语说明：数组中保存的数据叫元素，编号叫下标，元素个数叫长度。

数据类型

JavaScript 支持多种数据类型，可以通过 typeof 运算符进行检测：

let age = 18;
let uname = '小朱';
let flag = false;
let buy;
let obj = null;

console.log(typeof age);   // number
console.log(typeof uname); // string
console.log(typeof flag);  // boolean
console.log(typeof buy);   // undefined
console.log(typeof obj);   // object

类型转换

隐式转换规则：

• + 号两边只要有一个是字符串，就会把另一个转为字符串。
• + 作为正号解析时，可以将字符串转为数字。
• 除 + 外的算术运算符通常会将数据转为数字类型。

console.log(11 + 11);      // 22
console.log('11' + 11);    // 1111 (拼接)
console.log(11 - 11);      // 0
console.log('11' - 11);    // 0 (减法转数字)
console.log(+'123');       // 123 (正号转数字)

显式转换规则：

1. Number(data)：转为数字类型。
2. parseInt(data)：转为整数。
3. parseFloat(data)：转为浮点数。

console.log(Number('123'));
console.log(parseInt('12.34')); // 12
console.log(parseFloat('12.99px')); // 12.99

如果字符串包含非数字字符，转换可能失败并返回 NaN（Not a Number），其类型仍为 number。

运算符与表达式

常用运算符

• 赋值与自增：与 C 语言类似。
• 比较运算符：
  • = 是赋值。
  • == 是判断相等（会进行类型转换）。
  • === 是全等（不转换类型，开发中强烈推荐）。

优先级

优先级从高到低大致如下：

1. () 括号
2. ++, --, !
3. *, /, %
4. +, -
5. >, >=, <, <=
6. ==, !=, ===, !==
7. &&
8. ||
9. =, ,

流程控制

if 分支语句

if (condition) {
    // 条件成立执行
} else if (condition2) {
    // 条件 2 成立执行
} else {
    // 不满足上述条件执行
}

判断式结果为 true 或 false。除了 0 以外的数字都为真，空字符串为假。

switch 分支语句

switch (expression) {
    case 1:
        // 执行内容
        break;
    case 2:
        // 执行内容
        break;
    default:
        // 默认情况
}

循环语句

while 循环：

let i = 1;
while (i <= 3) {
    document.write('我会循环 3 次<br>');
    i++;
}

for 循环： 适用于明确次数时的遍历，尤其是数组。

let arr = ['马超', '赵云', '妲己', '关羽', '黄忠'];
for (let i = 0; i < arr.length; i++) {
    document.write(arr[i] + '<br>');
}

技巧：

• break：跳出整个循环。
• continue：跳过本次循环，继续下一次。

循环嵌套示例（九九乘法表）：

<style>
    span { display: inline-block; padding: 5px 10px; border: 1px solid pink; margin: 2px; }
</style>
<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            let num = i * j;
            document.write(`<span>${i}*${j}=${num}</span>`);
        }
        document.write('<br>');
    }
</script>

三元运算符

let result = condition ? trueValue : falseValue;

调试技巧

断点调试能帮助理解代码运行逻辑，快速定位 Bug。

操作步骤：

1. 按 F12 打开开发者工具。
2. 切换到 Sources（源代码）面板。
3. 选择对应的 JS 文件，点击行号设置断点。

掌握这些基础语法后，就能构建出动态交互的前端页面了。