JavaScript学习笔记

最新推荐文章于 2025-05-28 08:00:00 发布

原创最新推荐文章于 2025-05-28 08:00:00 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文全面介绍了JavaScript的基础知识，包括数据类型、变量定义、操作符、函数、执行环境与作用域、垃圾收集等内容。同时深入探讨了引用类型，如Object和Array的具体使用方法。

JavaScript学习笔记

参考书目：《Javascript高级程序设计(第3版)》
这本书是一个学习JavaScript非常好的资料，内容虽多但都十分有用，强烈推荐

一、JS数据类型

Undefined 未定义，声明但未初始化
Boolean 布尔值
- 转换为True的值：true，非空字符串，非零数字，对象，N/A
- 转换为False额值：”“，0和NaN，null，undefined
String 字符串
Number 数值
Object 对象或null
Function 函数

二、定义变量

let 作用于该代码块，不存在变量提升
var 作用于该语句所在函数，存在变量提升
const 声明常量，不能随意更改

三、操作符

一元操作符
1. ++： ++变量
2. –： –变量(两个减号)
3. +： +变量，不会产生任何操作
4. -： -变量，转为负数
位操作符
- 正负数以二进制码存储，负数使用的格式是二进制补码，负数=二进制正数取反+1
  1. 按位非(NOT)——~变量
  2. 按位与(AND)——变量&变量
  3. 按位或(OR)——变量|变量
  4. 按位异或(XOR)——变量^变量
  5. 左移——变量<<位数，用0填充
  6. 有符号右移——变量>>位数，保留符号位，用符号位填充
  7. 无符号右移——变量>>>位数，用0填充
布尔操作符
1. 逻辑非——!变量
2. 逻辑与——变量&&变量
3. 逻辑或——变量||变量
乘性操作符 * / %
加性操作符 + -
关系操作符 < > <= >=
相等操作符
1. 相等和不相等(先转换再比较) == !=
2. 全等和不全等(仅比较而不转换) === !==
条件操作符
1. variable = boolean_expression ? true_value : false_value
赋值操作符 = *= /= += -= <<= >>= >>>=
逗号操作符

四、函数

理解参数：ECMAScript函数不介意传递进来多少个参数，也不在乎传递进来的参数是什么数据类型
没有重载：如果再ECMAScript中定义了两个相同名字的函数，则该名字只属于后定义的函数

五、执行环境及作用域

基本类型和引用类型的值
1. 动态的属性：
  对于引用类型的值，可以添加属性和方法，也可以改变和删除其属性和方法；但是不能给基本类型的值添加属性。
2. 复制变量的值：
  引用类型复制后还是指向同一个对象，变化相互影响；基本类型的值复制后完全独立，不会相互影响
3. 传递参数：
  ECMAScript中的所有函数的参数都是按值传递的
4. 检测类型
  - 检测基本类型数据：typeof variable
  - 检测引用类型数据：variable instanceof constructor
执行环境与作用域
1. 执行环境(execution context，也称“环境”)
  - 全局执行环境是最外围的一个执行环境
  - 每个函数都有自己的执行环境
2. 延长作用域链，当执行流进入下面的任何一个语句时，作用链就会加长
  - try-catch 语句中的catch块
  - with语句
3. JS没有块级作用域，C、C++、Java有块级作用域
  - let声明的变量只作用于块级，var声明的变量就会自动添加到最接近的环境中(函数的局部环境)，这就是变量提升
  - 如果初始化变量时没有用var声明，该变量会自动被添加到全局环境
4. 搜索过程从作用域的前端开始，向上逐级查询与给定的名字匹配的标识符。
垃圾收集：JavaScript是一门具有自动垃圾回收机制的编程语言
1. - [x] 标记清除(常用)
    1. 给内存中的所有变量添加标记
    2. 去掉环境中的变量和环境中变量引用变量的标记
    3. 此时被标记的变量就是准备删除的变量
    4. 垃圾回收器完成内存清除工作
2. - [ ] 引用计数(不常用，有循环引用的问题)
3. 性能问题，垃圾回收器太频繁运行会导致性能问题
4. 管理内存
  解除引用：一旦数据不再有用，最好将其值设置为null来释放其引用

六、引用类型

在ECMAScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。

Object类型
1. 创建object实力有两种方法
  - [ ] 使用new 操作符后跟Object构造函数
```
var person = new Object();
person.name = "Nicholas";
person.age = 19;
```
  - [x] 使用对象字面量表示法
```
var person = {
    name : "Nicholas",
    age : 19
}
```
2. 访问对象属性也有两种方法
  - [x] 点表示法
```
console.log(person.name);
```
  - [ ] 方括号语法，若果属性名使用的是关键字或保留字，用方括号就不会报错
```
console.log(person[name]);
```
Array类型
1. 创建数组方法
```
var colors = new Array();
var colors = new Array(2);
var colors = [];
var colors = ["red", "blue", "green"];
```
2. 检测数组
```
if(value instanceof Array){
    // 对数组执行某些操作
}
if(Array.isArray(value)){
    // 对数组执行某些操作
}
```
3. 转换方法
  1. .toString()
  2. .valueOf()
  3. .toLocalString()
  4. .join() // 改变数组分隔符
4. 栈方法
  1. .push() // 推入队尾，返回修改后长度
  2. .pop() // 移除队尾，返回移除的项
5. 队列方法
  1. .push() // 推入队尾，返回修改后长度
  2. .shift() // 移除第一项，并返回该项
  3. .unshift() // 在数组前端插入，并返回长度
6. 重排序方法
  1. .reverse() // 反向
  2. .sort() // 从小到大排序，按字符串排序
  3. 按数值排序
```
function compare(value1, value2){
    return value2 - value1;
}
arr.sort(compare);
```
7. 操作方法
  1. .concat() // 数组拼接，不影响原数组
  2. .slice() // 数组截取，不影响原数组
  3. .splice() // 主要用途是向数组中插入项，影响原数组
```
arr.splice(num1, num2, arr1)  // 删除位置，删除数量，插入数组
```
8. 位置方法
  1. .indexOf() // 查找元素所在位置，(可选)查找起点位置
  2. .lastIndexOf() // 从末尾向前查找
9. 迭代方法
  - 影响this的值。传入这些方法中的函数会接受三个参数：数组项的值、该项在数组中的位置、数组对象本身。
    1. .every() // 对数组的每一项运行给定函数，每项返回True 则返回True
    2. .filter() // 对数组的每一项运行给定函数，返回该函数会返回True的项组成的数组
    3. .forEach() // 对数组的每一项运行给定函数，没有返回值
    4. .map() // 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组
    5. .some() // 对数组的每一项运行给定函数，只要有一项返回True 则返回True
10. 归并方法
  - 这两个方法都接收两个参数：在每一项上调用的函数和(可选的)作为归并基础的初始值
  - 传递给函数4个参数：前一个值、当前值、项的索引、数组对象
    1. .reduce() // 从数组的第一项开始，逐个遍历到最后
    2. .reduceRight() // 从数组的最后一项开始，向前遍历到第一项
Data类型