【JS基础-Day1】JS入门 — 变量、数据类型与转换
📺 对应视频：P1-P19 | 🎯 核心目标：理解 JavaScript 是什么、如何声明变量、掌握数据类型体系以及类型转换规则
一、JavaScript 简介
1.1 什么是 JavaScript？
JavaScript（简称 JS）是一门运行在浏览器端的 脚本语言，是前端三件套（HTML / CSS / JS）的核心灵魂。
| 技术 | 职责 |
|---|---|
| HTML | 网页的骨架（结构） |
| CSS | 网页的皮肤（样式） |
| JavaScript | 网页的肌肉（行为/交互） |
1.2 JS 能做什么？
- 表单动态校验（密码强度提示、手机号格式验证）
- 页面动效（轮播图、弹窗、动画）
- 与后端交互（Ajax 请求、接口调用）
- 服务端开发（Node.js）
- 跨平台 App（React Native、Electron）
1.3 JS 的三个组成部分
JavaScript
├── ECMAScript → 语言核心规范（变量、语法、数据类型…）
├── DOM → 操作 HTML 文档的 API
└── BOM → 操作浏览器窗口的 API
💡 概念扩展：ECMAScript 是标准，JavaScript 是实现。就像 ES 是菜谱，JS 是厨师做出来的菜。
1.4 如何书写 JS？
<!-- 方式一：行内式（不推荐，耦合严重） -->
<button onclick="alert('hello')">点我</button>
<!-- 方式二：内嵌式（学习时常用） -->
<script>
alert('hello world')
</script>
<!-- 方式三：外链式（开发推荐） -->
<script src="./index.js"></script>
⚠️
<script>标签建议放在</body>前，避免阻塞 HTML 解析。
二、变量
2.1 变量是什么？
变量是计算机存储数据的容器，本质上是内存中的一块命名空间。
变量名 → 内存地址 → 存储的数据
age → 0x001 → 18
2.2 声明变量
// ES5 写法（现在仍需了解）
var age = 18
// ES6 推荐写法
let name = '张三'
const PI = 3.14 // 常量，声明后不可重新赋值
2.3 let vs var vs const 核心区别
| 特性 | var | let | const |
|---|---|---|---|
| 块级作用域 | ❌ | ✅ | ✅ |
| 变量提升 | ✅（提升为 undefined） | ❌（暂时性死区） | ❌ |
| 重复声明 | ✅ | ❌ | ❌ |
| 初始化要求 | 可不赋值 | 可不赋值 | 必须赋值 |
| 可重新赋值 | ✅ | ✅ | ❌ |
💡 最佳实践：默认用
const，需要改变时换let，尽量不用var。
2.4 变量命名规则
// ✅ 合法命名
let myName
let _private
let $price
let userName2024
// ❌ 非法命名
let 2age // 不能数字开头
let my-name // 不能含连字符
let let // 不能是关键字
命名规范（约定俗成） ：
- 小驼峰：
getUserName（变量、函数） - 大驼峰：
UserInfo（类、构造函数） - 全大写：
MAX_SIZE（常量） - 下划线前缀：
_private（私有变量）
三、数据类型
3.1 整体分类
JS 数据类型
├── 基本类型（值类型，存储在栈中）
│ ├── Number 数字
│ ├── String 字符串
│ ├── Boolean 布尔值
│ ├── Undefined 未定义
│ ├── Null 空值
│ └── Symbol 符号（ES6，唯一值）
│
└── 引用类型（存储在堆中，栈保存地址）
├── Object 对象
├── Array 数组
└── Function 函数
3.2 Number 数字类型
let age = 18 // 整数
let price = 9.99 // 浮点数
let big = 1e6 // 科学计数法，即 1000000
let hex = 0xff // 十六进制
let inf = Infinity // 无穷大
let nan = NaN // Not a Number（非数字）
// 重要：NaN 的特殊性
console.log(NaN === NaN) // false！NaN 不等于任何值包括自身
console.log(isNaN(NaN)) // true，用 isNaN() 检测
浮点数精度问题（经典坑）：
console.log(0.1 + 0.2) // 0.30000000000000004
// 解决方案：
console.log((0.1 + 0.2).toFixed(2)) // "0.30"
console.log(Math.round((0.1 + 0.2) * 100) / 100) // 0.3
💡 概念扩展：JS 使用 IEEE 754 双精度浮点数，二进制无法精确表示某些十进制小数，这是底层设计，不是 Bug。
3.3 String 字符串
let name1 = 'single' // 单引号
let name2 = "double" // 双引号
let name3 = `template` // 模板字符串（反引号，ES6）
// 字符串长度
console.log('hello'.length) // 5
// 字符串拼接（旧方式）
let age = 18
console.log('我今年' + age + '岁') // 烦人的加号拼接
// 模板字符串（推荐）
console.log(`我今年${age}岁`) // 清爽多了
console.log(`${1 + 2}`) // 表达式也可以
常用转义字符：
'\n' // 换行
'\t' // Tab
'\' // 反斜杠本身
''' // 单引号
'"' // 双引号
3.4 Boolean 布尔值
let isLogin = true
let hasError = false
// 以下值在布尔上下文中为 false（falsy values）
false, 0, '', null, undefined, NaN
// 其余均为 true（truthy values）
true, 1, 'hello', [], {}, function(){}
⚠️ 空数组
[]和空对象{}都是 truthy，这是常见混淆点！
3.5 Undefined vs Null
// Undefined：变量声明了但没赋值
let x
console.log(x) // undefined
console.log(typeof x) // 'undefined'
// Null：主动赋值为空，表示"这里本来有个值，现在没了"
let user = null
console.log(typeof null) // 'object' ← 历史遗留 Bug！
区别总结：
undefined：系统给的默认值，"还没给"null：程序员主动设置的空，"特意不给"
四、数据类型检测
// typeof 操作符
console.log(typeof 42) // 'number'
console.log(typeof 'hello') // 'string'
console.log(typeof true) // 'boolean'
console.log(typeof undefined) // 'undefined'
console.log(typeof null) // 'object' ← 著名的坑
console.log(typeof []) // 'object'
console.log(typeof {}) // 'object'
console.log(typeof function(){}) // 'function'
// 更精确的检测方式（进阶）
Array.isArray([]) // true，检测数组
Object.prototype.toString.call(null) // '[object Null]'
五、类型转换
5.1 隐式转换（自动转换）
// 数字 + 字符串 → 字符串拼接
console.log(1 + '2') // '12' ← 注意！
console.log(1 - '2') // -1 ← 减法会转数字
console.log(+'123') // 123 ← 正号可以转数字（技巧）
console.log(+true) // 1
console.log(+false) // 0
console.log(+null) // 0
console.log(+undefined) // NaN
5.2 显式转换（手动转换）
→ 转数字：
Number('123') // 123
Number('123abc') // NaN，有非数字字符就是 NaN
Number('') // 0
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
parseInt('12.9px') // 12，取整数部分，忽略后续非数字
parseFloat('12.9px') // 12.9，保留小数部分
parseInt('abc') // NaN
→ 转字符串：
String(123) // '123'
String(true) // 'true'
String(null) // 'null'
String(undefined) // 'undefined'
(123).toString() // '123'
(255).toString(16) // 'ff'，转十六进制
→ 转布尔：
Boolean(0) // false
Boolean('') // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(NaN) // false
Boolean('0') // true ← 注意！字符串'0'是 true
Boolean([]) // true ← 空数组也是 true
5.3 类型转换速查表
| 原始值 | → Number | → String | → Boolean |
|---|---|---|---|
false | 0 | "false" | - |
true | 1 | "true" | - |
0 | - | "0" | false |
"" | 0 | - | false |
null | 0 | "null" | false |
undefined | NaN | "undefined" | false |
"123" | 123 | - | true |
[] | 0 | "" | true |
六、运行机制与调试
6.1 JS 代码执行方式
源代码 → JS引擎（V8）→ 词法分析 → 语法分析 → AST → 字节码 → 机器码 → 执行
6.2 常用输出方式
console.log('普通日志') // 控制台输出（最常用）
console.warn('警告信息') // 黄色警告
console.error('错误信息') // 红色错误
console.table([{name:'张三'}]) // 表格形式显示数据
alert('弹窗提示') // 阻塞式弹窗（开发少用）
document.write('<h1>写入页面</h1>') // 直接写入页面
6.3 接收用户输入
// prompt 接收输入（返回字符串类型！）
let age = prompt('请输入年龄：')
console.log(typeof age) // 'string'
// 记得转换类型
age = Number(age)
七、本章知识图谱
JS入门
├── 语言定位：浏览器脚本语言
├── 三大组成：ECMAScript + DOM + BOM
├── 引入方式：行内 / 内嵌 / 外链
├── 变量
│ ├── 声明：var / let / const
│ └── 命名：驼峰命名、语义化
├── 数据类型
│ ├── 基本类型：Number、String、Boolean、Undefined、Null
│ ├── 引用类型：Object、Array、Function
│ └── 检测：typeof（注意 null 的坑）
└── 类型转换
├── 隐式：+号优先字符串，其他运算符转数字
└── 显式：Number()、parseInt()、String()、Boolean()
八、高频面试题 & 易错点
Q1： undefined == null 结果是什么？
console.log(undefined == null) // true（宽松比较）
console.log(undefined === null) // false（严格比较）
Q2： typeof null 为什么是 'object' ？
JS 早期实现中，值的类型标签存储在低 3 位，
null的位是 000，与object的标签相同，这是历史遗留 Bug，无法修复（修复会破坏大量现有代码）。
Q3： parseInt vs Number 有什么区别？
Number('12px') // NaN，遇到非数字字符整个转 NaN
parseInt('12px') // 12，从左到右解析，遇到非数字停止
Q4：怎么判断变量是否是数组？
Array.isArray([]) // ✅ 推荐
[] instanceof Array // ✅ 也可以
typeof [] // ❌ 返回 'object'，无法区分
🚀 下一篇：【JS基础-Day2】运算符与分支语句
