目录
[一、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(浏览器操作)
权威参考:
二、变量与常量
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())