JavaScript 基础语法与数据类型
本课是JavaScript语法体系的核心基石，聚焦变量声明与数据类型两大关键知识点，帮学习者搭建基础数据处理的完整逻辑。核心是吃透
var、let、const的作用域与特性差异，分清原始、引用两类数据类型的存储与使用区别，熟练掌握typeof检测、显式类型转换两大实用技能，同时警惕隐式转换陷阱，养成用===严格比较的习惯。课程摒弃纯理论讲解，结合实际场景落地语法用法，既帮学习者规避入门常见错误，又为后续函数、循环、DOM操作等内容筑牢基础，是写出规范、健壮、无bug代码的关键一课。
一、课程学习目的
-
全面掌握 JavaScript 中变量的三种声明方式（
var、let、const）及其核心区别，透彻理解作用域的核心概念与分类； -
能够准确识别并区分 JavaScript 原始数据类型与引用数据类型，熟练运用
typeof操作符完成数据类型检测； -
熟练运用显式类型转换方法（
Number()、String()、Boolean()），清晰理解隐式转换的执行规则与潜在风险陷阱； -
结合儿童英语启蒙等实际场景，运用本课所学知识处理基础数据，养成规范、健壮的代码编写习惯。
二、核心知识点讲解
1. 变量声明与作用域
-
var：遵循函数作用域规则，存在变量提升特性，支持重复声明，容易引发全局变量污染问题。
-
let：遵循块级作用域规则，不存在变量提升，不可重复声明，存在暂时性死区，是现代JS推荐的变量声明方式。
-
const：遵循块级作用域规则，声明时必须完成初始化赋值，常量值不可修改（引用类型的内部属性可正常修改）。
-
作用域 ：分为全局作用域（代码最外层定义，全局可访问）、局部作用域（函数内部或
{}代码块内部，仅内部可访问）。
2. 数据类型详解
原始类型-存储于栈内存，直接存储数据值
-
string：字符串类型，用于存储文本，可用单引号、双引号或反引号包裹内容； -
number：数字类型，涵盖整数、浮点数、正数、负数及特殊数值； -
boolean：布尔类型，仅有true（真）和false（假）两个值； -
undefined：变量已完成声明，但未赋值时的默认状态； -
null：主动定义的空值，常用于清空对象或表示空引用。
引用类型-存储于堆内存，变量存储堆内存地址
-
object：对象类型，以键值对形式存储复杂数据，适配多种结构化数据场景； -
array：数组类型，有序的数据集合，通过索引快速访问内部元素。
3. 类型转换
显式转换-主动调用函数强制转换，代码意图清晰
-
Number()：将目标数据转换为数字类型，无法转换则返回NaN； -
String()：将目标数据转换为字符串类型，适配所有数据类型； -
Boolean()：将目标数据转换为布尔类型，空值、0、undefined、null转换为false，其余为true。
隐式转换-运算或比较时，JS自动执行的类型转换
常见场景：+ 运算符拼接字符串触发字符串转换、== 宽松比较触发自动类型转换，易引发逻辑bug，日常开发需谨慎使用。
三、示例程序
示例 1：变量声明与作用域对比
javascript
// 全局作用域：代码最外层，全局可访问
var globalVar = "我是全局变量";
let globalLet = "我也是全局变量";
const globalConst = "我是全局常量，值不能变";
// 定义函数，构建函数作用域
function testScope() {
// 函数内部：局部作用域，仅函数内可访问
var functionVar = "我是函数内的var变量";
let functionLet = "我是函数内的let变量";
const functionConst = "我是函数内的常量";
// 函数内部打印局部变量，正常输出
console.log(functionVar); // 输出: 我是函数内的var变量
console.log(functionLet); // 输出: 我是函数内的let变量
console.log(functionConst); // 输出: 我是函数内的常量
}
// 调用函数，执行内部代码
testScope();
// 全局作用域打印全局变量，正常输出
console.log(globalVar); // 输出: 我是全局变量
console.log(globalLet); // 输出: 我也是全局变量
console.log(globalConst); // 输出: 我是全局常量，值不能变
// 以下代码会报错，局部变量仅函数内可访问，外部无法调用
// console.log(functionVar); // 报错: functionVar is not defined
// console.log(functionLet); // 报错: functionLet is not defined
// console.log(functionConst); // 报错: functionConst is not defined示例说明 ：此示例清晰对比var、let、const 在全局和函数作用域的访问差异，直观体现局部变量外部不可访问的规则，同时展示 const 常量不可修改的特性。帮助学习者吃透作用域边界与三种声明方式的核心差异，从根源规避作用域导致的代码报错和变量污染问题。
示例 2：数据类型识别与类型转换-儿童英语启蒙场景
javascript
// 模拟儿童英语单词拼写检测场景，贴合入门学习
let userInput = "123"; // 用户输入的内容，此处为数字字符串
let correctAnswer = "onehundredtwentythree"; // 预设的正确英文单词
// 1. 利用typeof检测数据类型，判断数据属性
console.log("userInput 的类型是: " + typeof userInput); // 输出: string
console.log("correctAnswer 的类型是: " + typeof correctAnswer); // 输出: string
// 2. 显式类型转换：调用Number()将字符串转为数字，适配数据处理需求
let userNumber = Number(userInput);
console.log("转换后的userNumber: " + userNumber + ", 类型: " + typeof userNumber); // 输出: 123, number
// 3. 隐式类型转换：+号拼接字符串，数字自动转为字符串
let feedback = "你输入的是: " + userInput + ", 正确答案是: " + correctAnswer;
console.log(feedback); // 输出: 你输入的是: 123, 正确答案是: onehundredtwentythree
// 4. 类型转换陷阱演示：宽松比较==触发隐式转换，严格比较===不转换
let num1 = 123;
let str1 = "123";
console.log(num1 == str1); // 输出: true（隐式转换后仅比较值）
console.log(num1 === str1); // 输出: false（同时比较值和类型，无隐式转换）示例说明 ：本示例结合儿童英语启蒙场景，落地数据类型检测与两类转换用法，先通过 typeof 确认输入数据类型，再用显式转换处理数据，同时演示隐式转换的常见场景与陷阱。重点区分 == 和 === 的核心差异，让学习者明白优先用严格相等、优先显式转换的原因，规避隐性逻辑错误。
四、掌握技巧与方法
-
类型检测：处理用户输入、外部接口数据时，始终用
typeof检测数据类型，提前规避类型错误； -
变量声明：日常开发优先使用
let和const，彻底摒弃var，杜绝变量提升与全局污染；固定不变的值用const，需修改的值用let； -
类型转换：尽量用
Number()、String()、Boolean()显式转换，代码意图更清晰；比较操作必须用===严格相等，拒绝依赖隐式转换； -
场景练习：结合表单校验、数据处理、趣味小场景练习，把抽象语法转化为实际应用能力，强化记忆。
五、课后作业
基础练习
分别使用 var、let、const 声明变量，在全局、函数、代码块三种作用域下测试访问权限，总结三者核心区别，整理成文字笔记。
类型检测
编写代码，用 typeof 依次检测字符串、数字、布尔值、对象、数组、null、undefined 七种数据，记录每一项的输出结果，标注特殊结果。
类型转换
-
将字符串
"12345"转换为数字，将数字67890转换为字符串，打印结果与数据类型； -
将布尔值
true和false分别转换为数字和字符串，记录转换结果； -
尝试将字符串
"hello"转换为数字，观察输出结果，分析结果产生的原因。
场景应用
模拟儿童英语单词测试程序，预设正确英文单词，接收用户输入内容，忽略大小写判断输入是否正确，输出对应提示语，全程做好类型检测与类型比较。
拓展思考
查阅权威资料，梳理 null 和 undefined 的核心区别，记录两者的产生场景、使用场景与实际开发中的区分用法。