前端超细拆解第2期：JavaScript 语法与数据类型

一、JavaScript 基础语法

语法是编写代码的 “规则”，决定了代码是否能被正确解析和执行。

1. 书写规范

区分大小写：let name = "Tom" 和 let Name = "Tom" 是两个不同的变量。
语句结束符：分号 ; 用于结束语句（可选，但建议添加，避免自动分号插入的坑）
空格与换行：JS 忽略多余的空格 / 换行，合理使用可提升可读性。

2. 标识符（变量 / 函数名规则）

标识符是给变量、函数、对象属性命名的 “名字”，规则：

以字母（a-z/A-Z）、下划线 _、美元符 $ 开头；
后续字符可包含数字（0-9）；
不能使用 JS 关键字（如 let、if、function）或保留字（如 class、async）。

3. 变量声明

JS 有 3 种声明变量的方式，核心区别是作用域和提升规则：

声明方式	作用域	能否重复声明	能否重新赋值	变量提升
var	函数作用域	能	能	有（提升后值为 undefined）
let	块级作用域	不能	能	有（暂时性死区）
const	块级作用域	不能	不能（引用类型可修改内部值）	有（暂时性死区）

4. 运算符

常用运算符分为几类，示例：

算术运算符：+ - * / %（取余） ++ --

console.log(10 + 5); // 15console.log(10 % 3); // 1（10除以3余1）let num = 5;console.log(num++); // 5（先使用，后自增）console.log(++num); // 7（先自增，后使用）

赋值运算符：= += -= *= /=

let x = 10;x += 5; // 等价于 x = x + 5console.log(x); // 15

比较运算符：==（值相等） ===（值 + 类型相等） != !== > < >= <=

console.log(10 == "10"); // true（只比较值）console.log(10 === "10"); // false（值相等但类型不同）console.log(5 > 3); // true

逻辑运算符：&&（与） ||（或） !（非）

console.log(true && false); // falseconsole.log(true || false); // trueconsole.log(!true); // false

javascript前端(前端超细拆解第2期：JavaScript 语法与数据类型)

二、JavaScript 数据类型

JS 数据类型分为 基本数据类型（值类型）和 引用数据类型（引用类型），核心区别：

基本类型：值存储在栈内存，赋值时复制 “值本身”；
引用类型：值存储在堆内存，栈内存只存 “地址”，赋值时复制 “地址”。

1. 基本数据类型（6 种）

类型	说明	示例
String	字符串（文本）	"hello"、'world'
Number	数字（整数 / 浮点数 / 特殊值）	18、3.14、NaN
Boolean	布尔值（真 / 假）	true、false
Undefined	未定义（变量声明但未赋值）	let a;（a 的值为 undefined）
Null	空值（主动声明 “无”）	let b = null;
Symbol	唯一值（ES6 新增）	let s = Symbol("id");

核心示例：

// Stringlet str1 = "Hello JS"; // 双引号let str2 = '单引号也可以'; // 单引号let str3 = `模板字符串：${str1}`; // ES6模板字符串，支持变量插值console.log(str3); // 模板字符串：Hello JS// Numberlet num1 = 100; // 整数let num2 = 3.14; // 浮点数let num3 = NaN; // Not a Number（非数字，如 10 / "a" 会返回NaN）console.log(NaN === NaN); // false（NaN是唯一不等于自身的值）console.log(isNaN(10 / "a")); // true（判断是否为NaN）// Booleanlet isTrue = true;let isFalse = false;// 非布尔值转布尔：0、""、null、undefined、NaN 转 false，其余转 trueconsole.log(Boolean(0)); // falseconsole.log(Boolean("")); // falseconsole.log(Boolean("abc")); // true// Undefinedlet unDef;console.log(unDef); // undefinedconsole.log(unDef === undefined); // true// Nulllet nul = null;console.log(nul === null); // true// 注意：typeof null 返回 "object"（JS 历史bug）console.log(typeof nul); // object// Symbollet s1 = Symbol("name");let s2 = Symbol("name");console.log(s1 === s2); // false（Symbol永远唯一）

2. 引用数据类型（核心 3 种）

类型	说明	示例
Object	普通对象（键值对）	{ name: "Tom", age: 18 }
Array	数组（有序集合）	[1, 2, "hello"]
Function	函数（可执行的代码块）	function add(a,b){return a+b}

核心示例：

// Objectlet person = {  name: "张三",  age: 20,  sayHi: function() { // 对象方法    console.log("你好！");  }};console.log(person.name); // 张三person.sayHi(); // 你好！// Arraylet arr = [1, 2, "hello", true];console.log(arr[2]); // hello（数组索引从0开始）arr.push(3); // 向数组末尾添加元素console.log(arr); // [1, 2, "hello", true, 3]// Functionfunction add(a, b) {  return a + b;}let result = add(5, 3);console.log(result); // 8// 引用类型的赋值特性（重点）let obj1 = { num: 10 };let obj2 = obj1; // 复制的是地址，指向同一个堆内存obj2.num = 20;console.log(obj1.num); // 20（obj1也被修改）

3. 类型检测

常用 3 种方式，各有适用场景：

// 1. typeof：适合检测基本类型（除null）console.log(typeof "hello"); // stringconsole.log(typeof 18); // numberconsole.log(typeof true); // booleanconsole.log(typeof undefined); // undefinedconsole.log(typeof null); // object（bug）console.log(typeof []); // objectconsole.log(typeof {}); // objectconsole.log(typeof function(){}); // function// 2. instanceof：适合检测引用类型（判断是否为某个构造函数的实例）console.log([] instanceof Array); // trueconsole.log({} instanceof Object); // trueconsole.log(function(){} instanceof Function); // true// 3. Object.prototype.toString.call()：万能检测（最准确）console.log(Object.prototype.toString.call("hello")); // [object String]console.log(Object.prototype.toString.call(null)); // [object Null]console.log(Object.prototype.toString.call([])); // [object Array]

前端