前端入门学习笔记（Day06）

 前端入门学习笔记（Day06）

 一、JavaScript变量定义方式

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

 1. 隐式定义

直接赋值定义变量，无需关键字：

```javascript

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

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

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

```

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

 2. 显式定义（var关键字）

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

```javascript

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

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

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

```

 3. 常量定义（const关键字）

使用`const`定义常量，常量的值一旦确定就不能修改，且必须初始化：

```javascript

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

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

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

```

 4. 块级变量（let关键字）

`let`是ES6新增的变量定义方式，用于解决变量提升问题，具有块级作用域：

```javascript

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

```

 二、JavaScript数据类型

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

1. **数值类型**：包含整数和浮点数

   ```javascript

   var a = 10; // 整数

   var b = 3.14; // 浮点数

   ```

2. **布尔类型**：表示`true`（真）和`false`（假）

   ```javascript

   var isTrue = true;

   var isFalse = false;

   ```

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

   ```javascript

   var str = "hello";

   ```

4. **undefined**：变量已声明但未赋值

   ```javascript

   var a; // a的值为undefined

   ```

5. **null**：表示空值

   ```javascript

   var a = null;

   ```

与C语言的区别**：

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

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

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

 三、类型转换

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

 1. 自动类型转换

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

```javascript

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

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

var c = "abc";

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

```

 2. 强制类型转换

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

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

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

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

```javascript

var a = "3.14";

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

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

```

 四、变量作用域

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

 1. 全局变量

在函数外部定义的变量，作用范围是整个脚本：

```javascript

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

function myfun() {

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

}

myfun();

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

```

 2. 局部变量

在函数内部定义的变量，仅在函数内部有效：

```javascript

function myfun() {

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

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

}

myfun();

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

```

 3. 变量重名处理

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

```javascript

var h = "hello";

function test() {

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

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

}

test();

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

```

 五、变量提升与let关键字

 1. 变量提升现象

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

```javascript

function test() {

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

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

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

}

```

 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编程的重要基础，为后续学习更复杂的语法和应用奠定了基础。