JavaScript

Babel

Babel 是一个广泛使用的 JavaScript 编译器，主要用于将现代的 JavaScript 代码转换为与旧浏览器兼容的版本。它支持最新的 JavaScript 语法和特性，通过编译使其可以在不支持这些新特性的环境中运行。

安装 Babel

要在项目中使用 Babel，你需要安装相关的 npm 包。以下是一个简单的步骤：

初始化 npm 项目 如果你的项目还没有 package.json 文件，你可以通过以下命令初始化一个新项目：
```
npm init -y
```

安装 Babel 核心包及命令行工具

npm install --save-dev @babel/core @babel/cli

安装预设（比如 @babel/preset-env） @babel/preset-env 是一个智能预设，可以根据你所支持的环境自动确定要使用的 Babel 插件。
```
npm install --save-dev @babel/preset-env
```

配置 Babel

在项目的根目录下创建一个 .babelrc 配置文件，或在 package.json 文件中添加 Babel 配置。

使用 `.babelrc` 文件

创建 .babelrc 文件并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

使用 `package.json` 文件

在 package.json 文件中添加 Babel 配置：

Node.js 概述

Node.js 是一个强大的、开源的、跨平台的 JavaScript 运行环境，允许开发者在服务器端执行 JavaScript 代码。它构建在 Chrome 的 V8 JavaScript 引擎之上，能够创建可伸缩、高性能的 Web 应用程序。

以下是关于 Node.js 的一些关键点：

异步和事件驱动：Node.js 使用非阻塞、事件驱动的架构，这使得它在处理 I/O 密集型和实时应用程序时非常高效。这种设计使得 Node.js 能够同时处理许多连接，而无需使用多线程。
JavaScript 到处都是：借助 Node.js，开发者可以在客户端和服务器端都使用 JavaScript，这简化了开发流程，因为他们可以在整个堆栈中使用同一种语言。
NPM（Node 包管理器）：Node.js 自带 npm，这是世界上最大的开源库生态系统。npm 允许开发者轻松安装、管理和共享代码包，大大加快了开发速度。
可伸缩性：Node.js 应用程序可以通过添加更多节点来轻松横向扩展现有系统。它的非阻塞性质使得它能够高效处理大量并发连接。
性能：Node.js 以其优秀的性能而闻名，这归功于其事件驱动的架构和 V8 JavaScript 引擎。它特别适用于需要实时更新或同时处理大量连接的应用程序。
跨平台：Node.js 兼容各种操作系统，包括 Windows、macOS 和 Linux，使其具有多样性并被广泛应用于不同的环境中。
社区支持：Node.js 拥有庞大而活跃的开发者社区，他们为其开发做出贡献、分享知识并创建有用的工具和库，进一步增强了其功能。

总的来说，Node.js 通过将 JavaScript 带到后端，彻底改变了服务器端开发，使开发者能够轻松构建快速、可伸缩和数据密集型的应用程序。

Node.js 环境部署

https://nodejs.org/en

Windows

https://mirrors.aliyun.com/nodejs-release/v20.11.1/node-v20.11.1-x64.msi

Linux

https://mirrors.aliyun.com/nodejs-release/v20.11.1/node-v20.11.1-linux-x64.tar.gz

验证

node -v

Node.js VScode 常用插件

Node.js Exec

NPM 概述

NPM（Node Package Manager）是JavaScript的包管理器，也是Node.js的默认包管理器。它可以让开发者分享和重用代码，并管理项目的依赖关系。以下是使用NPM的一些基本操作简介：

安装 Node.js 和 NPM

要使用NPM，首先需要安装Node.js，它包含了NPM。你可以从Node.js官方网站下载安装程序。

基本NPM命令

初始化新项目
```
npm init
```
这个命令会提示你填写一个package.json文件，它描述了你的项目及其依赖关系。你可以使用npm init -y生成一个带有默认值的package.json文件。
安装包
```
npm install <包名>
```
这个命令会安装一个包并将其添加到node_modules目录。要将包保存为项目的依赖项，请使用：
```
npm install <包名> --save
```
对于开发依赖（仅在开发过程中需要）：
```
npm install <包名> --save-dev
```
安装所有依赖项 如果你有一个包含依赖项列表的package.json文件，可以一次性安装所有依赖项：
```
npm install
```
更新包 要将包更新到最新版本：
```
npm update <包名>
```

卸载包

npm uninstall <包名>

要同时从package.json中移除：

npm uninstall <包名> --save

对于开发依赖：

npm uninstall <包名> --save-dev

运行脚本 你可以在package.json文件的"scripts"部分定义自定义脚本。要运行一个脚本：

Promise

Promise 概述

JavaScript 的 Promise 对象表示一个异步操作的最终完成（或失败）及其结果值。与传统的回调函数相比，Promise 提供了一种更简洁和更易于管理的方式来处理异步操作。

创建一个 Promise

你可以使用 Promise 构造函数来创建一个 Promise，它接受一个函数（执行器）作为参数。这个函数有两个参数：resolve 和 reject。

const myPromise = new Promise((resolve, reject) => {
    // 异步操作
    let success = true; // 示例条件
    if (success) {
        resolve('操作成功');
    } else {
        reject('操作失败');
    }
});

处理 Promise

创建 Promise 之后，可以使用 .then() 和 .catch() 方法来处理其最终的成功或失败。

myPromise
    .then((result) => {
        console.log(result); // '操作成功'
    })
    .catch((error) => {
        console.error(error); // '操作失败'
    });

链式 Promise

你可以在 .then() 回调中返回另一个 Promise，从而将多个异步操作串联在一起。

myPromise
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve('另一个操作成功'), 2000);
        });
    })
    .then((result) => {
        console.log(result); // '另一个操作成功'
    })
    .catch((error) => {
        console.error(error);
    });

使用 `Promise.all`

Promise.all 允许你等待多个 Promise 完成。它接受一个 Promise 数组，并返回一个新的 Promise，当所有输入的 Promise 都已解决时，它将解决，或如果其中任何一个 Promise 被拒绝，它将拒绝。

函数

语法：

function 函数名(参数列表) {
    函数体;
    return 返回值;
};

示例：

function add(x, y) {
  return x + y;
};

console.log(add) // [Function: add]，add就是标识符
console.log(add(3, 5)) // 8

示例：声明提升（实际应用中还是要先定义后使用）

console.log(add(3, 5)) // 8

function add(x, y) {
  return x + y;
};

匿名函数

类似于python中的Lambda

语法：

// 标识符还可以使用 let、var 定义
const 标识符 =  function(参数列表) { // 不定义函数名，使用标识符与函数关联
    函数体;
    return 返回值;
};

示例：

const add = function(x, y) {
  return x + y;
};

console.log(add(3, 5)) // 8

函数表达式

语法：

// 标识符还可以使用 let、var 定义
const 标识符 =  function 函数名(参数列表) { // 该函数名只能用在函数内部
    函数体;
    return 返回值;
};

示例：

const add = function fn(x, y) {
  return x + y;
};

console.log(add(3, 5)) // 8
console.log(fn(3, 5)) // ReferenceError: fn is not defined，只能在函数内部使用

示例：实现递归计算n+n-1…

解构

在 JavaScript 中，解构（Destructuring）是一种简洁的语法，用于从数组或对象中提取值，并将它们分配给变量。解构可以大大简化代码，提高可读性和可维护性。

数组解构

数组解构允许你从数组中提取值并分配给变量。

基本用法

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

跳过元素

你可以跳过数组中的某些元素：

const arr = [1, 2, 3];
const [a, , c] = arr;
console.log(a); // 1
console.log(c); // 3

默认值

在解构时，可以为变量指定默认值：

const arr = [1];
const [a, b = 2] = arr;
console.log(a); // 1
console.log(b); // 2

嵌套解构

数组中包含数组时，可以进行嵌套解构：

const arr = [1, [2, 3]];
const [a, [b, c]] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

对象解构

对象解构允许你从对象中提取属性值，并将它们分配给变量。

基本用法

const obj = { x: 1, y: 2, z: 3 };
const { x, y, z } = obj;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

重命名变量

你可以将提取的属性值分配给不同名称的变量：

类

Js 对象模型

JavaScript 中的对象模型是描述 JavaScript 中对象如何组织和相互作用的概念。JavaScript 是一种基于原型的语言，其对象模型基于原型继承而不是经典的基于类的继承。这意味着对象直接从其他对象继承属性，而不是从类（或构造函数）继承。以下是 JavaScript 中对象模型的主要概念：

原型链（Prototype Chain）：JavaScript 中的每个对象都有一个原型（prototype）。原型是一个对象，其他对象可以从中继承属性。当你试图访问对象的属性时，如果该对象本身没有这个属性，JavaScript 将沿着原型链向上查找直到找到相应的属性或到达原型链的末尾（即 null）。
原型（Prototype）：每个对象都有一个原型。原型是一个对象，它包含了对象的共享属性和方法。当你创建一个新对象时，你可以指定该对象的原型。如果没有明确指定，JavaScript 将会默认为其指定一个原型。
构造函数（Constructor Function）：构造函数是一种特殊的函数，用于创建对象。在 JavaScript 中，你可以使用构造函数来创建对象，并且可以通过 new 关键字调用构造函数。构造函数内部使用 this 关键字来指向新创建的对象，并且可以在构造函数内部定义对象的属性和方法。
实例（Instance）：通过构造函数创建的对象被称为该构造函数的实例。每个实例都是一个独立的对象，它们共享构造函数的原型，但具有自己的属性值。
类（Class）：尽管 JavaScript 是基于原型的语言，但 ES6 引入了类的概念，使得面向对象编程更加直观和易于理解。类可以看作是构造函数的语法糖，它提供了更类似于传统类的语法来定义对象和继承关系。
对象属性和方法：JavaScript 中的对象可以具有属性和方法。属性是对象的特征，而方法是对象的行为。你可以使用点运算符（.）或方括号运算符（[]）来访问对象的属性和方法。

总的来说，JavaScript 中的对象模型是基于原型继承的，每个对象都有一个原型，并且可以通过原型链继承属性和方法。构造函数用于创建对象，而类提供了更加清晰的语法来定义对象和继承关系。

字面式声明方式

示例1

let a = 1;
let b = 'abc';
let c = [1,2,3];
let d = x => x * 2;

let obj = {
   'a':100, // a: 100
   b:b, // b: 'abc'
   [b]:[b], // abc: [ 'abc' ]
   [a]:200 // '1': 200，将1转换为字符串
}

console.log(obj) // { '1': 200, a: 100, b: 'abc', abc: [ 'abc' ] }

示例2

let a = 1;
let b = 'abc';
let c = [1,2,3];
let d = x => x * 2;

let obj = {a,b,c,d};

console.log(obj) // { a: 1, b: 'abc', c: [ 1, 2, 3 ], d: [Function: d] }

示例3

let a = 1;
let b = 'abc';
let c = [1,2,3];
let d = x => x * 2;

let obj = {
   'a':100, // a: 100
   b:b, // b: 'abc'
   [b]:[b], // abc: [ 'abc' ]
   [a]:200 // '1': 200
}

for (let k in obj) {
    console.log(typeof k, k, obj[k])
}
// 键都是字符串
/*
string 1 200
string a 100
string b abc
string abc [ 'abc' ]
*/

示例4

let d = x => x * 2;

let obj = {
   d
}

console.log(obj) // { d: [Function: d] }
console.log(obj.d(600)) // 1200

通过函数创建类

在JavaScript中，您可以使用函数来创建类，这种模式通常被称为“构造函数”模式。您可以定义一个函数，然后使用该函数来创建新的对象实例。这种方式非常常见，特别是在ES5之前，当时JavaScript还没有原生的类语法。

模块化

前言

JavaScript 模块化是一种将代码拆分成独立、可重用模块的方法，以提高代码的可维护性和可读性。通过模块化，开发者可以更容易地管理大型代码库，避免全局命名空间污染，并实现代码的按需加载和依赖管理。

以下是几种常见的 JavaScript 模块化方案：

1. 原始模块化方案

IIFE (Immediately Invoked Function Expression)

IIFE 是一种利用闭包的技术，将变量和函数封装在一个立即执行的函数表达式中，从而避免全局命名空间的污染。

var MyModule = (function() {
  var privateVariable = 'Hello World';

  function privateFunction() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateFunction();
    }
  };
})();

MyModule.publicMethod(); // 输出 "Hello World"

2. CommonJS

CommonJS 是 Node.js 中的模块化标准，通过 require 导入模块，用 module.exports 导出模块。

math.js

var add = function(a, b) {
  return a + b;
};

module.exports = {
  add: add
};

app.js

var math = require('./math.js');
console.log(math.add(2, 3)); // 输出 5

3. AMD (Asynchronous Module Definition)

AMD 主要用于浏览器环境，定义了模块和依赖的异步加载方式，通常使用 RequireJS 实现。

数据结构

前言

JavaScript 提供了一系列内置的数据结构，适用于各种应用场景。以下是JavaScript中主要的数据结构及其用途：

基础数据结构

数组（Array）：
- 一组有序的元素，可以通过索引访问。支持多种内置方法，如 push(), pop(), shift(), unshift(), map(), filter(), reduce() 等。
- 在 ES6 之后，新增了Set和Map等集合类对象，丰富了数据结构的选择。
对象（Object）：
- 键值对的集合，键是字符串或符号，值可以是任何数据类型。
- 用于存储和组织相关数据，如哈希表、字典等。

现代集合数据结构

集合（Set）：
- 一组唯一的元素，没有重复项，支持基本集合操作，如add(), delete(), has(), clear()等。
- Set常用于需要唯一元素集合的场景，如去重、集合操作等。
映射（Map）：
- 键值对的集合，键可以是任何数据类型（包括对象、数组等）。
- 支持按插入顺序迭代，提供方法如set(), get(), delete(), has(), clear()等。
弱集合（WeakSet）：
- 类似Set，但其元素是对对象的“弱引用”，不会阻止垃圾回收。
- 适用于跟踪对象而不希望其阻止垃圾回收的场景。
弱映射（WeakMap）：
- 类似Map，但键是对对象的“弱引用”。
- 常用于对象的私有属性，或跟踪对象的附加数据。

函数相关数据结构

生成器（Generator）：
- 使用function*定义，可以暂停并恢复执行，适合生成序列、迭代器等。
迭代器（Iterator）：
- 一个遵循特定协议的对象，提供next()方法，可以在数据结构中进行迭代。

其他数据结构

Promise：
- 表示异步操作的最终结果。提供then()和catch()方法，常用于处理异步代码。
Proxy：
- 用于创建对象的代理，可以定义自定义行为，如拦截属性访问、函数调用等。

这些数据结构的组合与使用，能帮助开发者解决各种复杂的数据处理问题。在选择合适的数据结构时，了解它们的特性和用途至关重要。

数组（Array）

数组（Array）是JavaScript中最常用的数据结构之一，用于存储有序的元素列表。数组的特点包括：

特性

有序：数组中的元素按插入顺序排列。
索引访问：可以通过索引访问元素，索引从0开始。
动态大小：数组的大小可以动态改变，可以添加或删除元素。
任意数据类型：数组中的元素可以是任何数据类型，包括数字、字符串、对象、函数、甚至其他数组。

创建数组

可以使用多种方式创建数组：

循环

JavaScript 中的 for 循环有多种语法，适用于不同的场景。这些语法包括传统的 for 循环、for-in 循环、for-of 循环等。每种 for 循环语法都有其特定的用法和适用范围。让我们来看一下这些循环语法及其使用方式。

1. 传统 `for` 循环

传统的 for 循环用于在固定次数内迭代，或通过迭代变量控制循环。它由初始化部分、条件部分、迭代部分和循环体组成。

for (initialization; condition; iteration) { // setup执行一次; 每次比较，true才会进入循环; 每次做完循环体后要做的事情
    // loop body
}

initialization: 循环开始前执行的代码，用于初始化循环变量。
condition: 在每次循环迭代之前进行测试。如果结果为 true，则继续循环；如果为 false，则结束循环。
iteration: 在每次循环迭代结束时执行的代码，通常用于更新循环变量。

使用场景

for 循环适用于需要固定次数迭代的场景，例如遍历数组、执行固定次数的操作等。由于 let 声明的变量具有块级作用域，在循环结束后，i 不再可用，这在某种程度上防止了循环变量泄露。

注意事项

当循环条件永远不会变为 false 时，可能导致无限循环。
过多的循环迭代可能导致性能问题，因此要确保循环终止条件正确。
使用块级作用域的循环变量可以避免变量泄露，确保代码的局部性。

示例1

(let i = 0; i < 10; i++) 是一种常见的 for 循环结构，通常用于在固定次数内循环执行代码。

for (let i=0; i<10; i++) {
    console.log(i)
}
/*
0
1
2
3
4
5
6
7
8
9
*/

`(let i = 0; i < 10; i++)`

let i = 0

异常处理

抛出异常

在JavaScript中，你可以使用throw语句来手动抛出异常。当你在代码中遇到了某种错误或者条件不符合预期时，你可以使用throw语句来创建一个新的异常对象并将其抛出。这样可以中断程序的执行，并且在调用堆栈中向上传递这个异常，直到遇到一个能够处理它的异常处理器或者直到它达到了全局执行环境。

下面是一个简单的例子，演示了如何在JavaScript中使用throw语句抛出异常：

function divide(x, y) {
    if (y === 0) {
        throw new Error("除数不能为零");
    }
    return x / y;
}

try {
    console.log(divide(10, 0));
} catch (error) {
    console.error("发生错误：" + error.message);
}

在这个例子中，divide函数用来计算两个数的商。如果除数y为零，就会抛出一个带有指定消息的异常。在try块中，我们调用divide函数并尝试捕获可能抛出的异常。如果在try块中抛出了异常，控制流就会转到catch块，我们可以在那里处理异常。

捕获异常

在JavaScript中，你可以使用try...catch语句来捕获异常。try块中的代码被执行，如果在执行过程中抛出了异常，那么控制流会立即跳转到相应的catch块。catch块用于捕获并处理异常，你可以在其中执行一些特定的操作，比如记录错误、向用户显示错误消息或者执行其他的错误处理逻辑。

以下是一个示例，演示了如何使用try...catch语句来捕获异常：

function divide(x, y) {
    if (y === 0) {
        throw new Error("除数不能为零");
    }
    return x / y;
}

try {
    console.log(divide(10, 2)); // 正常情况下不会抛出异常
    console.log(divide(10, 0)); // 这里会抛出异常
    console.log(divide(10, 5)); // 这行代码不会被执行
} catch (error) {
    console.error("发生错误：" + error.message);
}

在这个例子中，我们调用了divide函数三次。第一次调用时，除数不为零，没有抛出异常。第二次调用时，除数为零，抛出了异常。由于我们在try块中调用了这个函数，所以异常被try...catch语句捕获到，控制流转移到了catch块中，并输出了错误消息。第三次调用并不会执行，因为异常已经在前一次调用中被捕获了。

示例1

try {
    console.log('try begin~')
    console.log('try end~')
  }  finally  {
    console.log('finally~')
}

/*
try begin~
try end~
finally~
*/

示例2

try {
    console.log('try begin~')
    throw new Error('这是一个异常')
    console.log('try end~')
  }  finally  {
    console.log('finally~')
}

/*
try begin~
finally~
Error: 这是一个异常
*/

示例3

try {
    console.log('try begin~')
    throw new Error('这是一个异常')
    console.log('try end~')
  } catch {
    console.log('捕获异常并处理')
  } finally  {
    console.log('finally~')
}

/*
try begin~
捕获异常并处理
finally~
*/

语法

hello world!

console.log('Hello world!');

注释

Node.js 注释是在 JavaScript 代码中添加的说明性文本，用于解释代码的目的、功能、实现细节或其他相关信息。注释在 Node.js 中的作用与在其他 JavaScript 环境中一样，可以帮助开发人员更好地理解和维护代码。

Node.js 支持两种常见的注释类型：单行注释和多行注释。

单行注释：使用 // 开始，直到行尾为止。例如：

// 这是一个单行注释，用于解释下面这行代码的功能
const message = "Hello, world!";

多行注释：使用 /* 开始，使用 */ 结束，可以跨越多行。例如：

/*
这是一个多行注释，用于解释下面这段代码的功能
这段代码创建了一个函数，用于打印传入的消息
*/
function printMessage(message) {
    console.log(message);
}

注释应该清晰、简洁地解释代码的意图，遵循良好的注释规范，以便其他开发人员能够轻松理解和维护代码。在 Node.js 中，注释通常用于文档化 API、指导开发过程、标记代码段和添加说明性注解。

PS：

VScode中输入/**后回车可自动启用多行注释

常量

在 Node.js 中，常量指的是使用 const 关键字声明的变量。常量在声明后不能被重新赋值，但可以是任何 JavaScript 支持的数据类型，包括原始类型（如数字、字符串、布尔值）和复合类型（如数组、对象、函数）。

下面是关于 Node.js 常量的一些详解：

声明常量：使用 const 关键字声明常量，语法如下：

const PI = 3.14159;
const MAX_SIZE = 100;

初始化：常量在声明时必须进行初始化，即赋予初始值。
不可重新赋值：声明后的常量不能再次赋值，试图重新赋值会导致语法错误。

JavaScript

Babel

安装 Babel

配置 Babel

使用 .babelrc 文件

使用 package.json 文件

Node.js 概述

Node.js 概述

Node.js 环境部署

Windows

Linux

验证

Node.js VScode 常用插件

NPM 概述

安装 Node.js 和 NPM

基本NPM命令

Promise

Promise 概述

创建一个 Promise

处理 Promise

链式 Promise

使用 Promise.all

函数

函数

匿名函数

函数表达式

解构

数组解构

基本用法

跳过元素

默认值

嵌套解构

对象解构

基本用法

重命名变量

类

Js 对象模型

字面式声明方式

示例1

示例2

示例3

示例4

通过函数创建类

模块化

前言

1. 原始模块化方案

2. CommonJS

3. AMD (Asynchronous Module Definition)

数据结构

前言

基础数据结构

现代集合数据结构

函数相关数据结构

其他数据结构

数组（Array）

特性

创建数组

循环

1. 传统 for 循环

使用场景

注意事项

示例1

(let i = 0; i < 10; i++)

异常处理

抛出异常

捕获异常

示例1

示例2

示例3

语法

hello world!

注释

常量

使用 `.babelrc` 文件

使用 `package.json` 文件

使用 `Promise.all`

1. 传统 `for` 循环

`(let i = 0; i < 10; i++)`