JavaScript基础篇——第一章 JavaScript基础的认识

[一、JavaScript 概述](#一、JavaScript 概述)

[1.1 JavaScript 是什么](#1.1 JavaScript 是什么)

[1.2 JavaScript 组成](#1.2 JavaScript 组成)

二、变量与常量

[2.1 变量本质](#2.1 变量本质)

[2.2 变量声明](#2.2 变量声明)

[2.3 变量赋值与更新](#2.3 变量赋值与更新)

[2.4 命名规范](#2.4 命名规范)

[2.5 常量声明](#2.5 常量声明)

[2.6 声明方式对比](#2.6 声明方式对比)

三、数组基础

[3.1 数组声明](#3.1 数组声明)

[3.2 数组取值](#3.2 数组取值)

四、数据类型详解

[4.1 数据类型分类](#4.1 数据类型分类)

[4.2 数字类型（Number）](#4.2 数字类型（Number）)

[4.3 字符串类型（String）](#4.3 字符串类型（String）)

[4.4 模板字符串](#4.4 模板字符串)

[4.5 布尔类型（Boolean）](#4.5 布尔类型（Boolean）)

[4.6 Undefined 类型](#4.6 Undefined 类型)

[4.7 Null 类型](#4.7 Null 类型)

[4.8 数据类型检测（typeof）](#4.8 数据类型检测（typeof）)

这篇文章主要是JavaScript是一种客户端编程语言，主要用于网页特效、表单验证、数据交互和服务端编程（Node.js）。它由ECMAScript（核心语法）和Web APIs（DOM/BOM）组成。变量本质是存储数据的容器，使用let声明，可重新赋值；常量用const声明，不可更改。数组是顺序存储的数据集合，下标从0开始。数据类型包括数字、字符串、布尔值、undefined和null等，其中模板字符串简化了变量拼接。undefined表示未赋值，null表示主动赋空值。JavaScript的弱类型特性使其灵活易用。

一、JavaScript 概述

1.1 JavaScript 是什么

定义：客户端编程语言

作用：

1.网页特效

2.表单验证

3.数据交互

4.服务端编程（Node.js）

运行环境：

1.浏览器环境（DOM/BOM/XHR）

2.Node.js 环境（fs/path/API）

1.2 JavaScript 组成

ECMAScript（核心语法）：

1.变量

2.分支语句

3.循环语句

3.对象等

Web APIs：

1.DOM（文档操作）

2.BOM（浏览器操作）

权威参考：

MDN JavaScript文档

二、变量与常量

2.1 变量本质

变量的本质：计算机存储数据的"容器"

重要理解：

变量不是数据本身，而是存储数据的容器（类似纸箱）,本质是内存中申请的小空间.

2.2 变量声明

基本语法：let 变量名

关键特性：

let 是声明关键字（允许/许可的含义）

注意事项：

禁止重复声明同一变量

复制代码

let age = 18;
let age = 19; // 报错！禁止重复声明

2.3 变量赋值与更新

赋值语法：变量名 = 值

示例：

复制代码

let age = 18;

age = 19;  // 变量更新

document.write(age); // 输出19

重要规则：

1.使用let声明后可直接更新值

2.未声明的变量禁止直接赋值

2.4 命名规范

强制规则：

1.禁用关键字（let, var, if, for等）

2.仅允许：字母/数字/_/$，禁止数字开头

3.严格区分大小写（Age ≠ age）

推荐规范：

1.语义化命名（如userName代替a）

2.小驼峰命名法（如：firstName）

2.5 常量声明

语法：const 常量名 = 值

核心特性：

1.声明时必须初始化（赋值）

2.禁止重新赋值

复制代码

const G = 9.8;

G = 10; // 报错！常量不可更改

使用场景：

1.永远不会改变的值（如数学常数、配置项）

2.最佳实践：不需要重新赋值的数据都用const

2.6 声明方式对比

方式	特点	使用场景
let	可重新赋值	需要变更的变量
const	赋值后不可更改	固定不变的常量
var	旧方式（存在变量提升）	不推荐使用

三、数组基础

3.1 数组声明

语法：let 数组名 = [数据1, 数据2, ..., 数据n]

示例：

复制代码

let names = ['小明', '小刚', '小红'];

本质理解：

1.按顺序存储数据的集合

2.每个数据有自动编号（下标）

3.2 数组取值

语法：数组名[下标]

关键特性：

下标从0开始计数

返回原始数据类型（字符串/数字等）

示例：

复制代码

let names = ['小明', '小刚', '小红'];

console.log(names[0]); // 输出"小明"

console.log(names[1]); // 输出"小刚"

注意事项：

1.访问不存在的下标返回undefined

2.下标必须是整数

四、数据类型详解

4.1 数据类型分类

基本数据类型：

number（数字型）

string（字符串型）

boolean（布尔型）

undefined（未定义型）

null（空类型）

引用数据类型：

object（对象）

4.2 数字类型（Number）

定义：

包含整数、小数、正负数

复制代码

let age = 18;      // 整数

let price = 88.99; // 小数

关键特性：

1.JavaScript是弱数据类型（类型由赋值决定）

2.对比：Java是强数据类型（如 int a = 3）

算术运算符：

运算符	功能	示例	开发应用场景
+	加法	5 + 2 = 7	数值计算
-	减法	9 - 3 = 6	数值计算
*	乘法	3 * 4 = 12	数值计算
/	除法	10 / 2 = 5	数值计算
%	取模（取余）	10 % 3 = 1	判断数字是否被整除

4.3 字符串类型（String）

定义：引号包裹的文本

单引号：'小明'

双引号："男"

反引号：`商品`

重要注意事项：

引号必须成对使用

错误示例：let str = '文本;（缺少结束引号）

嵌套规则：

1.允许：外双内单 "It's OK" 或外单内双 'He said "Yes"'

2.禁止：外单内单 'Don't do this'（需转义：'Don\'t do this')

转义符使用：

复制代码

console.log('I\'m learning'); // 输出：I'm learning

特殊形式：

1.空字符串：let str = ''

2.数字字符串：let tel = '13681113456'（引号包裹的数字是字符串）

4.4 模板字符串

解决痛点：传统拼接繁琐

复制代码

// 传统方式

'我叫' + name + '，今年' + age + '岁'

语法：

复制代码

`大家好，我叫${name}，今年${age}岁`

核心特性：

1.必须使用反引号（Tab键上方）

2.变量嵌入：${变量名}

3.支持换行（普通字符串不支持）

4.5 布尔类型（Boolean）

值：true（真/肯定）、false（假/否定）

应用场景：

复制代码

let isAvailable = true;  // 商品是否可用

let hasPermission = false; // 用户是否有权限

4.6 Undefined 类型

唯一值：undefined

产生条件：

复制代码

let age; // 声明但未赋值

console.log(age); // undefined

开发场景：

检测数据是否传递

复制代码

if (userData === undefined) {

  alert('数据未接收到！');

}

4.7 Null 类型

本质：表示"无"、"空"或"值未知"的特殊值

复制代码

let obj = null; // 初始化为空

与 Undefined 的区别：

特性	undefined	null
含义	未赋值（默认状态）	已赋值，但值为空
场景	系统自动分配	开发者主动设置
示例	let a;（自动undefined）	let b = null;（手动置空）

核心开发场景：

"将来有个变量存放对象，但对象还没创建好，先给null"

复制代码

// 等待从服务器获取的用户数据

let userData = null;

// 数据返回后更新

userData = { name: '小明', age: 20 };

4.8 数据类型检测（typeof）

核心作用：运行时确定变量类型

两种等效语法：

复制代码

typeof x       // 运算符形式（推荐）

typeof(x)      // 函数形式

返回值映射表：

值/表达式	typeof 返回值	说明
18	"number"	数字类型
'hello'	"string"	字符串类型
true	"boolean"	布尔类型
undefined	"undefined"	未定义类型
null	"object"	历史遗留问题（需注意）
[1,2,3]	"object"	数组本质是特殊对象
{name:'Tom'}	"object"	普通对象
function(){}	"function"	函数类型

特殊注意：

1.null 返回 "object" 是JavaScript设计初期的错误（但已无法修正）

2.数组和普通对象无法通过typeof区分（需用Array.isArray()）