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())