You Don't Know JS 入门指南：JavaScript编程基础精要

You Don't Know JS 入门指南：JavaScript编程基础精要

You-Dont-Know-JS 📗📒 (PT-Br translation) JS Book Series. 项目地址: https://gitcode.com/gh_mirrors/you/You-Dont-Know-JS

前言：JavaScript学习之旅的起点

作为You Don't Know JS系列的开篇之作，本章将带领编程新手系统性地了解JavaScript的基础概念。无论你是完全没有编程经验的新手，还是希望夯实基础的开发者，本章都将为你构建完整的知识框架。

一、程序代码的本质

1.1 代码是什么？

程序代码（或称源代码）本质上是一系列精确的指令集合，用于告诉计算机执行特定任务。在JavaScript中，代码可以保存在文本文件中，也可以直接在浏览器开发者控制台中编写。

1.2 语句与表达式的区别

**语句（Statement）**是完整的执行单元，例如：

let total = price * quantity;

**表达式（Expression）**则是产生值的代码片段，上述语句包含四个表达式：

• price（变量表达式）
• quantity（变量表达式）
• price * quantity（算术表达式）
• total = ...（赋值表达式）

1.3 代码执行原理

JavaScript采用即时编译（JIT）方式：

1. 引擎先编译代码
2. 然后立即执行编译后的代码 这与传统解释型语言和编译型语言都有所不同。

二、实践：控制台编程入门

2.1 浏览器控制台使用指南

推荐学习方式：

1. 打开浏览器空白页（about:blank）
2. 调出开发者工具（F12或右键检查）
3. 切换到Console面板

2.2 输入输出基础

输出示例：

console.log("计算结果：", 10 * 5);

输入示例：

const userName = prompt("请输入您的姓名：");
console.log("欢迎您，", userName);

专业提示：开发时优先使用console.log而非alert，因为：

• 不会中断UI线程
• 支持同时输出多个值
• 可查看结构化数据

三、JavaScript核心概念详解

3.1 变量与赋值

现代JavaScript变量声明方式：

// 使用let声明可修改变量
let counter = 0;
counter = counter + 1;

// 使用const声明常量
const MAX_SIZE = 100;

3.2 运算符全景图

| 运算符类型 | 示例 | 说明 | |------------|------|------| | 算术 | + - * / % | 基本数学运算 | | 赋值 | = += -= | 组合运算赋值 | | 比较 | > < == === | 值比较 | | 逻辑 | && || ! | 布尔运算 |

特别注意：

• === 严格相等（类型+值）
• == 宽松相等（会进行类型转换）

3.3 类型系统深度解析

JavaScript的7种原始类型：

1. Number：42, 3.14
2. String："Hello", '模板'
3. Boolean：true/false
4. Null：null
5. Undefined：undefined
6. Symbol（ES6+）
7. BigInt（ES2020+）

类型转换示例

显式转换：

const numStr = "123";
const realNum = Number(numStr); // 显式转为数字

隐式转换：

"5" - 2; // 3 (字符串转为数字)
"5" + 2; // "52" (数字转为字符串)

关键理解：隐式转换遵循一套明确的规则，虽然可能造成困惑，但完全可以通过系统学习掌握。

四、最佳实践建议

1. 变量命名：采用驼峰式命名法（如userAge）
2. 类型安全：优先使用===而非==
3. 代码可读性：适当添加注释说明复杂逻辑
4. 调试技巧：善用console.log分阶段验证代码

结语：继续探索之路

本章建立了JavaScript的基础知识框架，但真正的精通需要：

1. 反复练习控制台示例
2. 逐步构建小型项目
3. 继续学习后续章节的深层概念

记住：每个JavaScript专家都曾是初学者，持续实践是掌握编程的唯一捷径。

You-Dont-Know-JS 📗📒 (PT-Br translation) JS Book Series. 项目地址: https://gitcode.com/gh_mirrors/you/You-Dont-Know-JS