前端入门学习笔记（Day06）：JavaScript 基础核心知识引入

引入：

经过前五天对 HTML 结构搭建、CSS 布局美化与 DOM 基础交互的学习，我们的前端技术栈终于触及 “动态逻辑核心”——JavaScript。如果说 HTML 是网页的 “骨架”、CSS 是 “皮肤”，那 JavaScript 就是赋予网页 “思考与行动能力” 的 “神经中枢”，从简单的表单验证到复杂的页面交互，都依赖其核心语法支撑。​

Day06 作为 JavaScript 基础学习的关键节点，聚焦 “语言底层逻辑”：从变量定义的不同方式（隐式、var、let、const），到数据类型的分类与转换规则；从变量作用域的边界划分（全局 / 局部），到 “变量提升” 这一易踩坑的语法特性；再到字符串常用处理方法与数值特殊值的应用 —— 这些内容是后续学习函数、对象、DOM 深度交互的 “地基”，直接决定代码的规范性、可读性与稳定性。​

本文将通过 “原理解析 + 代码示例 + 对比区分” 的方式，带大家系统掌握 JavaScript 基础核心知识，帮你避开语法陷阱，建立清晰的语言逻辑框架，为后续编写复杂动态功能打下坚实基础。

 一、JavaScript变量定义方式

JavaScript作为弱类型语言，变量定义无需提前指定数据类型，主要有以下几种定义方式：

1.1隐式定义

直接赋值定义变量（如a = 123），无需关键字，默认全局变量，易造成变量污染，大型项目禁用；：

```javascript

a = "123"; // 字符串类型

b = 1; // 数值类型（整数）

c = "a"; // 字符串类型（单个字符）

```

这种方式定义的变量默认是全局变量，不推荐在大型项目中使用。

1.2显式定义（var关键字）

使用`var`关键字定义变量，是早期JavaScript中最常用的方式：

```javascript

var h = "123"; // 字符串

var i = "a"; // 字符串

var j = 15.9; // 数值（浮点数）

```

1.3常量定义（const关键字）

使用`const`定义常量，常量的值一旦确定就不能修改，且必须初始化如（const MAX_AGE = 100），适合定义固定值（如配置项）：

```javascript

const MAX_AGE = 100; // 正确的常量定义

// MAX_AGE = 101; // 错误，常量值不能修改

// const MAX_HEIGHT; // 错误，常量必须初始化

```

1.4块级变量（let关键字）

`let`是ES6新增的变量定义方式，用于解决变量提升问题，具有块级作用域（如函数、if 语句）内有效，推荐优先使用：

```javascript

let a = 10; // 块级变量定义

```

 二、JavaScript数据类型

JavaScript的基本数据类型主要包括：

2.1数值类型：包含整数和浮点数

数值型：含整数（10）、浮点数（3.14），支持特殊值（Infinity无穷大、NaN非数字）

   ```javascript  

var a = 10; // 整数

   var b = 3.14; // 浮点数

2.2布尔类型：表示`true`（真）和`false`（假）

仅true/false，用于逻辑判断

   ```javascript  

var isTrue = true;

   var isFalse = false;

2.3字符串类型：文本数据，用单引号或双引号包裹

单 / 双引号包裹（如"hello"），文本数据载体

   ```javascript

   var str = "hello";

2.4undefined：变量已声明但未赋值（如var a;）

   ```javascript

   var a; // a的值为undefined

2.5null：表示空值

主动表示 “空值”，与 undefined 语义不同

   ```javascript

   var a = null;

与C语言的区别：

- C语言需要明确指定数据类型（int、float、char等）

- C语言没有布尔类型，用1表示true，0表示false

- JavaScript会根据赋值自动判断数据类型并分配内存

 三、类型转换

JavaScript中存在自动类型转换和强制类型转换两种方式：

3.1自动类型转换

在运算过程中，JavaScript会根据上下文自动转换数据类型：

```javascript

var a = "3.14"; // 字符串类型

var b = a - 2; // 自动转换为数值类型，结果为1.14

var c = "abc";

var d = c - 2; // 无法转换，结果为NaN（Not a Number）

```

3.2强制类型转换

通过特定函数手动转换数据类型：

- `toString()`：将其他类型转换为字符串

- `parseInt()`：将其他类型转换为整数

- `parseFloat()`：将其他类型转换为浮点数

```javascript

var a = "3.14";

var m = parseInt(a) - 2; // 转换为整数3后减2，结果为1

alert(parseInt("abc")); // 转换失败，输出NaN

 四、变量作用域

变量根据作用范围可分为全局变量和局部变量：

4.1全局变量

函数外部定义，作用于整个脚本（如var a = "全局"），函数内外均可访问

```javascript

var a = "全局变量"; // 全局变量

function myfun() {

  alert(a); // 可以访问全局变量

}

myfun();

alert(a); // 可以访问全局变量

4.2局部变量

函数内部用var/let定义（如function fn() { let b = "局部" }），外部无法访问

```javascript

function myfun() {

  var b = "局部变量"; // 局部变量

  alert(b); // 函数内部可以访问

}

myfun();

// alert(b); // 错误，函数外部无法访问局部变量

4.3变量重名处理

当全局变量和局部变量重名时，函数内部优先使用局部变量：

```javascript

var h = "hello";

function test() {

  var h = "world"; // 局部变量

  alert(h); // 输出"world"

}

test();

alert(h); // 输出"hello"

4.4变量提升陷阱

var定义的变量会 “声明提升” 到作用域顶部（赋值不提升），导致console.log(a)在var a = 20前执行时输出undefined，let可避免此问题。

 五、变量提升与let关键字

5.1变量提升现象

使用`var`定义的变量会自动提升到作用域顶部，但只提升声明不提升赋值：

```javascript

function test() {

  console.log(a); // 输出undefined，不会报错

  var a = 20; // 声明被提升到函数顶部

  console.log(a); // 输出20

}

5.2使用let解决变量提升

`let`定义的变量不会发生变量提升，且具有块级作用域：

```javascript

let a = 10;

function test() {

  // console.log(a); // 报错，变量未定义

  let a = 20; // 块级变量

  console.log(a); // 输出20

}

test();

 六、字符串常用方法

JavaScript提供了丰富的字符串处理方法：

```javascript

var text = "aadsgerh";



// 获取指定索引的字符

var a = text.charAt(0); // 结果为"a"



// 获取字符的Unicode值

var b = text.charCodeAt(1); // 结果为字符"a"的Unicode值



// 获取字符串长度

var c = text.length; // 结果为8



// 转换为大写

var d = text.toUpperCase(); // 结果为"AADSGERH"



// 查找子串第一次出现的位置

var e = text.indexOf("a"); // 结果为0



// 从指定位置开始查找子串

var f = text.indexOf("a", 6); // 从索引6开始查找"a"



// 截取子串（从索引3到5，包含3不包含6）

var g = text.substring(3, 6); // 结果为"sge"



// 截取子串（支持负数索引，-1表示倒数第一个字符）

var h = text.slice(3, -1); // 结果为"sger"



// 分割字符串

var j = text.split("a"); // 以"a"分割，结果为["", "dsgerh"]

 七、数值类型特殊值

JavaScript的数值类型有一些特殊值需要注意：

```javascript

var a = 10;

var b = 10 / 0; // 结果为Infinity（正无穷大）

var c = -10 / 0; // 结果为-Infinity（负无穷大）



// NaN表示非数字（Not a Number）

var d = "abc" - 2; // 结果为NaN

var e = parseInt("abc"); // 结果为NaN

与C语言的区别：

- JavaScript中`/`总是表示正常除法，而C语言中整数相除会进行整除

- JavaScript会自动处理无穷大的情况，而C语言中除以0会导致程序错误

通过今天的学习，我们掌握了JavaScript的变量定义、数据类型、类型转换、变量作用域以及字符串处理等基础知识，这些都是JavaScript编程的重要基础，为后续学习更复杂的语法和应用奠定了基础。

八、核心结论与学习建议

Day06 的知识点是 JS 编程的 “基石”，需重点掌握：

1. 变量定义优先用let/const，避免var和隐式定义，减少代码隐患；
2. 明确数据类型特性（如NaN不与任何值相等，需用isNaN()判断）；
3. 理解作用域边界，避免全局变量滥用；
4. 熟记字符串高频方法，为后续文本处理（如表单验证、数据格式化）打基础。

后续学习可结合 “条件判断”“循环语句”，将基础知识点串联为实际逻辑，逐步提升 JS 编程能力。