JavaScript学习笔记：2.基础语法与数据类型

原创已于 2025-12-11 17:57:26 修改 · 552 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记

于 2025-12-11 16:57:45 首次发布

JavaScript学习笔记专栏收录该内容

2 篇文章

订阅专栏

JavaScript学习笔记：2.基础语法与数据类型

上一篇笔记我们聊了JavaScript的入门常识，这一篇就来深挖它的"内功心法"——基础语法与数据类型。作为一门让无数开发者又爱又恨的语言，JS的基础看似简单，实则藏着不少"陷阱"和"彩蛋"。今天就用接地气的方式，带你吃透这些核心知识点，从此写代码少踩坑、多优雅～

一、语法那些事儿：规范里藏着效率

1. 大小写敏感：别让"大小写"坑了你

JS是出了名的"细节控"，区分大小写这件事一定要刻进DNA。比如你定义了const Früh = "早上好"（德语里"早"的意思），再想用früh调用就会报错——这俩在JS眼里就是两个完全不同的变量。

更坑的是null和Undefined这种关键字，小写的null是合法的空值，大写的Null就是未定义变量，新手常栽在这上面。记住：JS里的关键字、变量名、函数名，全是"大小写敏感体质"，写的时候多瞟一眼键盘～

2. 分号：加不加？这是个哲学问题

JS里的分号用来分隔语句，理论上"一行一句"时可以省略——这要归功于ECMAScript的自动分号插入（ASI）机制。但我劝你别偷懒，最好养成随手加分号的习惯。

比如下面这段代码：

const a = 1
const b = 2
[a, b] = [b, a]

看似没问题？实际运行可能报错！因为JS会把第三行的[a,b]当成数组访问，和第二行的2连在一起变成2[a,b]，直接逻辑混乱。

正确做法是所有语句结尾都加分号，既避免ASI机制的"蜜汁操作"，也让代码结构更清晰。毕竟多打一个分号，能少排半小时错，这笔买卖不亏～

3. 注释：代码的"说明书"怎么写才优雅

注释不仅是给别人看的，也是给未来的自己看的。JS的注释语法和C++很像，分两种：

// 单行注释：适合写简短说明，比如"这里是计算总价的逻辑"
/* 
  多行注释：适合写详细说明
  比如函数的功能、参数含义、返回值
  注意：不能嵌套！不能嵌套！不能嵌套！
*/

这里有个小技巧：如果想在多行注释里包含*/，可以用反斜杠转义：/* 嵌套注释 *\/ */，这样JS就不会误把中间的*/当成注释结束符了。

另外，有些文件开头会看到#!/usr/bin/env node这种注释，这叫hashbang注释，是给服务器看的，告诉它用Node.js引擎执行这个文件，日常开发不用写，但见了别慌～

二、变量声明：var、let、const三足鼎立

JS的变量声明有三种方式，就像三兄弟各有脾气，用对了顺风顺水，用错了一地鸡毛。

1. 三兄弟的核心区别

关键字	作用域	变量提升	能否重复声明	能否重新赋值
var	函数/全局作用域	有（值为undefined）	能	能
let	块级作用域	无（暂时性死区）	不能	能
const	块级作用域	无（暂时性死区）	不能	不能（对象属性可改）

2. 避坑指南：谁是你的首选？

优先用const：如果变量的值不会变（比如常量、函数、对象），直接用const。它能防止误修改，让代码更安全。注意：const声明时必须初始化，而且不能重新赋值，但对象的属性可以改：
```
const person = { name: "张三" };
person.name = "李四"; // 合法！
person = { name: "王五" }; // 报错！
```

变量要变用let：如果变量的值需要修改（比如循环变量、计数器），就用let。它的块级作用域特别香，不会像var那样"穿透"循环：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出0、1、2
}
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出3、3、3
}

尽量不用var：var的函数作用域容易造成变量污染，还能重复声明，比如var a = 1; var a = 2;不会报错，调试时能把人逼疯。除了维护老项目，新代码里尽量和var说再见～

3. 变量命名：规矩要记牢

变量名（标识符）不是随便起的，得遵守规则：

开头可以是字母、下划线（_）或美元符号（$）
后面可以加数字、字母、下划线或美元符号
可以用Unicode字符，比如const 小明 = "前端工程师"（但不推荐，兼容性可能有问题）

合法命名：userName、_age、$total、temp99
非法命名：123abc（以数字开头）、user-name（有连字符）、let（关键字）

记住：好的变量名能让代码自己说话，别写a、b、c这种"天书"命名，不然过一周你自己都不知道这变量是干啥的～

三、数据类型：JS的"八大门派"

最新的ECMAScript标准定义了8种数据类型，分为"基本类型"和"引用类型"两大类，就像武林中的名门正派和江湖势力，各有各的特点。

1. 基本类型：不可变的"独行侠"

基本类型有7种，它们是JS世界的"原子"，不可分割、不可修改：

Boolean：只有true和false，注意别和Boolean对象搞混（后者是包装器，日常不用）
null：表示"空值"，是关键字，必须小写（Null会报错）
undefined：表示"未定义"，变量声明后没赋值就是它
Number：整数或浮点数，比如42、3.14，注意NaN是特殊的Number（表示"不是数字"）
BigInt：处理超大整数，结尾加n，比如9007199254740992n（普通Number存不下这么大的数）
String：字符序列，用单引号、双引号或反引号包裹
Symbol：唯一且不可变，用来做对象的唯一属性名，比如const key = Symbol("key")

这里有个冷知识：null == undefined是true，但null === undefined是false。因为==只比较值，===既比较值也比较类型——null是"空对象"类型，undefined是"未定义"类型，本质不同～

2. 引用类型：可修改的"团队协作"

只有Object一种，包括数组、函数、正则等。它和基本类型最大的区别是：基本类型存的是值，引用类型存的是地址（指针）。

举个例子：

// 基本类型：赋值是复制值
let a = 1;
let b = a;
b = 2;
console.log(a); // 1（a不受影响）

// 引用类型：赋值是复制地址
let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1,2,3,4]（arr1也变了）

这就是为什么修改复制后的引用类型会影响原对象——它们指向同一个内存地址，相当于"共享同一个房子"。

3. 类型转换：JS的"自动翻译官"

JS是动态类型语言，变量类型会自动转换，有时候很方便，有时候却让人抓狂。

（1）"+"运算符：既能加数字，也能拼字符串

当+两边有字符串时，就会变成字符串拼接：

console.log("37" + 7); // "377"（字符串拼接）
console.log(42 + "是答案"); // "42是答案"（字符串拼接）

其他运算符（-、*、/）会把字符串转成数字：

console.log("37" - 7); // 30（字符串转数字）
console.log("37" * 7); // 259（字符串转数字）

（2）手动转换：靠谱的三种方式

自动转换不靠谱时，就手动转换：

字符串转数字：parseInt("101", 2)（二进制转十进制，结果5）、parseFloat("3.14")、+("1.1")（一元加运算符，简洁高效）
数字转字符串：num.toString()、String(num)
任意类型转布尔：Boolean(value)，记住"假值"：0、""、null、undefined、NaN、false，其他都是"真值"

四、字面量：直接写值的"快捷键"

字面量是直接在代码中写的值，不用计算、不用调用函数，就像"快捷键"一样方便。

1. 数组字面量：创建数组的优雅方式

const coffees = ["美式", "拿铁", "卡布奇诺"]; // 直接创建数组

注意：数组里的多余逗号会创建空槽，比如const fish = ["鲨鱼", , "小丑鱼"]，打印出来是["鲨鱼", <1 empty item>, "小丑鱼"]，遍历的时候会跳过空槽，坑得很～尽量别这么写，空值就显式写undefined。

2. 对象字面量：创建对象的"极简语法"

const person = {
  name: "张三",
  age: 25,
  sayHi() { console.log("你好～"); } // 方法简写，不用写function
};

对象字面量有个坑：不能放在语句开头，不然{会被当成代码块的开始，报错！比如直接写{ name: "张三" }会报错，要写成const obj = { name: "张三" }。

另外，属性名可以是字符串、数字，甚至动态计算：

const propName = "height";
const person = {
  [propName]: 180, // 动态属性名，等价于height: 180
  "favorite-color": "blue" // 不合法标识符的属性名，要用引号
};
console.log(person["favorite-color"]); // 访问时要用方括号

3. 模板字面量：字符串拼接的"救星"

用反引号（）包裹的字符串，支持多行和插值，再也不用写一堆+`号了：

const name = "李四";
const age = 30;
// 多行字符串
const intro = `我叫${name}，
今年${age}岁，
喜欢写JavaScript。`;
// 插值计算
const result = `1+1=${1+1}`; // "1+1=2"

带标签的模板还能做更复杂的处理，比如格式化数据，这在处理列表、对象时特别有用，比console.log的格式化字符串优雅多了～

五、总结：基础不牢？这些重点要记牢

语法规范：大小写敏感、结尾加分号、注释不嵌套
变量声明：优先const，变量要变用let，远离var
数据类型：7种基本类型（不可变）+1种引用类型（可变），===比==更靠谱
类型转换：避免依赖自动转换，手动转换用parseInt、parseFloat、+
字面量：数组、对象、模板字面量能大幅提升编码效率，注意避开空槽、属性名等坑

JS的基础语法和数据类型就像盖房子的地基，看似简单，却决定了上层建筑的稳定性。这些知识点里的"坑"，很多资深开发者都栽过，现在记下来，以后写代码就能少走弯路～