一、JavaScript 概述

1.1 什么是 JavaScript？

JavaScript 是一种轻量级、解释型的编程语言，主要用于网页开发，为网页添加交互功能。它支持面向对象、命令式和函数式编程风格。

1.2 JavaScript 的组成

  • 两部分划分：ECMAScript（核心语法） + Web APIs（浏览器提供的接口）
  • 三部分划分：ECMAScript（语言基础） + DOM（文档对象模型） + BOM（浏览器对象模型）

1.3 学习资源推荐

  • MDN Web Docs：权威的 JavaScript 文档和学习资源网站

二、JavaScript 基础语法

2.1 引入方式

2.1.1 内部方式

通过 <script> 标签包裹 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 基础</title>
</head>
<body>
  <script>
    alert('欢迎学习 JavaScript！');
  </script>
</body>
</html>

2.1.2 外部形式

将代码写在独立的 .js 文件中，通过 src 属性引入：

// demo.js
document.write('欢迎学习 JavaScript！');

<script src="demo.js"></script>

注意：如果 script 标签使用了 src 属性，标签内的代码会被忽略。

2.2 注释

  • 单行注释：// 注释内容
  • 多行注释：/* 注释内容 */

快捷键：编辑器中单行注释的快捷键通常是 Ctrl + /

2.3 结束符

JavaScript 使用 ; 作为语句结束符，但多数情况下可以省略，使用回车替代。

2.4 输入和输出

2.4.1 输出方式

  • alert()：弹窗显示信息
  • document.write()：在页面中写入内容
  • console.log()：在控制台输出信息（调试用）

2.4.2 输入方式

  • prompt()：弹窗接收用户输入
// 输出示例
alert('Hello World!');
document.write('页面内容');
console.log('调试信息');

// 输入示例
let userName = prompt('请输入您的姓名：');

注意：alert() 和 prompt() 会阻塞页面渲染，先于页面内容执行。

2.5 字面量

  • 数字字面量：123, 3.14
  • 字符串字面量：'hello', "world"
  • 数组字面量：[1, 2, 3]
  • 对象字面量：{name: '张三', age: 18}

三、变量与常量

3.1 变量概念

变量是计算机中存储数据的"容器"，用于保存和操作数据。

3.2 变量声明与使用

// 1. 声明变量
let age;

// 2. 变量赋值
age = 18;

// 3. 声明与赋值同时进行
let name = '张三';

// 4. 变量使用
document.write(age); // 输出变量值

// 5. 变量更新
age = 19; // 修改变量值

// 6. 声明多个变量
let a = 1, b = 2, c = 3;

// 7. 交换变量值
let x = 5, y = 10;
let temp = x;
x = y;
y = temp;

3.3 变量命名规则

  1. 只能是字母、数字、下划线、$，且不能数字开头
  2. 字母区分大小写
  3. 不能使用 JavaScript 关键字和保留字
  4. 建议使用有意义的名称，见名知意
// 正确示例
let age = 18;
let age1 = 19;
let _age = 20;
let $age = 21;
let userName = '小明';

// 错误示例
// let 1age = 18;    // 不能数字开头
// let let = 18;     // 不能使用关键字

3.4 let 与 var 的区别

  • let：

    • 不允许重复声明
    • 块级作用域
    • 更严谨，推荐使用

  • var：

    • 允许重复声明
    • 函数级作用域

3.5 变量的本质

变量是程序在内存中申请的一块用来存放数据的小空间。

3.6 常量

使用 const 声明不可变的变量：

const PI = 3.14;
const MAX_SIZE = 100;

// 错误：常量不能重新赋值
// PI = 3.14159;

// 错误：常量声明时必须赋值
// const UNINITIALIZED;

四、数据类型

4.1 数据类型分类

  • 基本数据类型：number、string、boolean、undefined、null
  • 引用数据类型：object（包括数组、函数等）

4.2 基本数据类型

4.2.1 数值类型（Number）

let integer = 100;        // 整数
let decimal = 12.345;     // 小数
let negative = -40;       // 负数

console.log(typeof integer);    // "number"
console.log(typeof decimal);    // "number"

4.2.2 字符串类型（String）

let str1 = '单引号字符串';
let str2 = "双引号字符串";
let str3 = `反引号字符串`;
let emptyStr = '';        // 空字符串

// 引号嵌套
let msg1 = "我是'小明'";
let msg2 = '我是"小明"';

// 转义字符
let escaped = 'pink\'123\'';  // pink'123'

console.log(typeof str1);     // "string"

4.2.3 布尔类型（Boolean）

let isStudent = true;
let isWorking = false;

console.log(typeof isStudent); // "boolean"

4.2.4 Undefined

let uninitialized;
console.log(typeof uninitialized); // "undefined"
console.log(uninitialized);        // undefined

4.2.5 Null

let emptyObject = null;
console.log(typeof emptyObject); // "object"（这是 JavaScript 的历史遗留问题）

4.3 引用数据类型

4.3.1 数组（Array）

// 数组声明
let fruits = ['苹果', '香蕉', '橙子'];
let numbers = [1, 2, 3, 4, 5];

// 数组使用
console.log(fruits[0]);     // "苹果"
console.log(fruits[1]);     // "香蕉"

// 数组长度
console.log(fruits.length); // 3（索引号+1）

4.4 类型检测

使用 typeof 运算符检测数据类型：

console.log(typeof 123);           // "number"
console.log(typeof 'hello');       // "string"
console.log(typeof true);          // "boolean"
console.log(typeof undefined);     // "undefined"
console.log(typeof null);          // "object"
console.log(typeof [1, 2, 3]);     // "object"

4.5 JavaScript 语言特性

JavaScript 是弱类型语言，变量的数据类型会根据赋值自动确定。

五、运算符

5.1 算术运算符

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1（取余）

5.2 特殊数值情况

console.log(0.1 + 0.2);    // 0.30000000000000004（浮点数精度问题）
console.log(1 / 0);        // Infinity（无穷大）
console.log('abc' * 1);    // NaN（非数字）
// 任何对 NaN 的操作都会返回 NaN
console.log(NaN + 1);      // NaN

六、类型转换

6.1 隐式转换

JavaScript 会自动在某些情况下转换数据类型：

// 字符串拼接
let num = 13;
let str = '2';
console.log(num + str);     // "132"（数值转字符串）

// 数学运算
console.log(num - str);     // 11（字符串转数值）
console.log('10' * '2');    // 20
console.log('10' / '2');    // 5

// 使用 + 转换为数值
console.log(+'123');        // 123
let salary = +prompt('请输入年薪：');

// 特殊运算
console.log(undefined + 1); // NaN
console.log(null + 1);      // 1

6.2 显式转换

6.2.1 Number() 转换

let strNum = '12';
let realNum = Number(strNum);
console.log(realNum + 8);   // 20

// 转换失败返回 NaN
console.log(Number('hello')); // NaN

6.2.2 parseInt() 和 parseFloat()

console.log(parseInt('12px'));     // 12
console.log(parseFloat('12.34em')); // 12.34
console.log(parseInt('abc'));      // NaN

6.3 字符串操作

6.3.1 字符串拼接

let firstName = '张';
let lastName = '三';
let fullName = firstName + lastName; // "张三"

let age = 18;
let info = '我今年' + age + '岁了'; // "我今年18岁了"

6.3.2 模板字符串

let age = 18;
let name = '李四';

// 传统方式
console.log('我今年' + age + '岁了，我叫' + name);

// 模板字符串方式
console.log(`我今年${age}岁了，我叫${name}`);

七、最佳实践

7.1 编码规范

  1. 变量命名：使用有意义的名称，采用驼峰命名法
  2. 常量使用：不会改变的值使用 const 声明
  3. 类型明确：避免过度依赖隐式转换，必要时使用显式转换
  4. 代码注释：适当添加注释，提高代码可读性
  5. 错误处理：对可能出现的 NaN 情况进行检查

7.2 注意事项

  1. 使用 let 和 const 代替 var
  2. 数组和对象使用前先声明
  3. 注意 undefined 和 null 的区别
  4. 合理使用模板字符串提高代码可读性

这份文档涵盖了 JavaScript 的基础知识，包括语法、变量、数据类型和类型转换等核心概念，为后续学习更高级的 JavaScript 特性打下坚实基础。

# javascript # 开发语言 # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

AI Agent 对比和选型

avatar AI Agent技术社区

别让你的 Agent 一口吃成胖子：AI Agent 任务拆分的工程实践指南

dataclass"""一个可执行、可观测、可恢复的子任务。"""id: str# 执行函数：接收上下文，返回结果# 验证函数：判断执行结果是否满足要求# 失败后最多重试次数# 该任务是否需要人工确认后才执行# 前置任务 id 列表：都成功后才执行本任务Agent 的能力边界，往往由任务拆分的质量决定。模型再强，也架不住一个没有结构、没有边界、没有失败策略的混沌任务。从「稳定中间态」和「外部依赖」

avatar AI Agent技术社区
cover

2026年AI大模型将如何影响程序员？小白必看！收藏这份自救指南

avatar AI Agent技术社区