npx 是现代 JavaScript 工具链中一个极其方便且重要的命令。简单来说，它的全称是 Node Package eXecute（Node 包执行器），它让你无需在本地或全局安装一个 npm 包，就能直接运行它提供的命令。

可以把它想象成一个“一次性”的命令运行器。

npx 的核心作用：解决什么问题？​

在没有 npx 的时代，如果你想使用一个命令行工具（比如 create-react-app 来创建 React 项目），你有两种选择，但它们都有缺点：

1. 全局安装 (npm install -g create-react-app)

   • 缺点1: 全局污染。你的电脑上会安装很多可能只用一次的工具，时间久了会变得混乱。
   • 缺点2: 版本管理困难。一旦全局安装，所有项目都共用这个版本。如果你想在新项目中使用最新版的 create-react-app，就必须先更新全局包，这可能会影响到依赖旧版本的旧项目。

2. 本地安装 (npm install create-react-app)

   • 缺点: 这会将包安装到当前项目的 node_modules 目录下，增加了项目体积。而且，要运行它，你必须使用很长的路径：./node_modules/.bin/create-react-app，非常不方便。

npx 的出现完美地解决了以上所有问题。

npx 是如何工作的？​

当你执行 npx <command> 时，它会按照以下顺序智能地寻找并执行命令：

1. 检查本地项目：首先，检查当前项目目录的 node_modules/.bin 路径下是否存在 <command>。如果存在，就直接执行它。

   • 这使得 npx prettier --write . 可以直接使用项目依赖里安装的 Prettier 版本，非常方便。

2. 检查远程仓库：如果在本地项目中找不到，npx 会去 npm 远程仓库查找是否存在名为 <command> 的包。

3. 下载并执行：如果找到了，npx 会将这个包临时下载到一个中央缓存区，执行完毕后，并不会在你的全局或本地项目中留下“痕迹”。

关键点：npx 自带于 npm 5.2.0 及以上版本，所以只要你的 Node.js 和 npm 版本不是太旧，你就可以直接使用它，无需额外安装。

三个最常见的 npx 使用场景​

1. 项目脚手架（最经典）​

这是 npx 最广为人知的用途。你只需运行一次命令来创建项目，之后就不再需要它了。

# 创建一个新的 React 项目
npx create-react-app my-react-app

# 创建一个新的 Vue 项目
npx create-vue@latest my-vue-app

# 创建一个新的 Vite 项目
npx create-vite my-vite-project

在这些场景下，npx 会自动下载并使用最新版的脚手架工具，帮你生成项目，然后“挥一挥衣袖，不带走一片云彩”。

2. 运行项目本地依赖的工具​

假设你的项目开发依赖（devDependencies）中安装了 prettier 或 tailwindcss。

// package.json
"devDependencies": {
  "prettier": "^3.0.0",
  "tailwindcss": "^3.3.3"
}

你可以直接用 npx 来调用它们，而无需在 package.json 的 scripts 中配置命令，也无需写长长的路径。

# 使用项目本地安装的 prettier 格式化所有文件
npx prettier --write .

# 使用项目本地安装的 tailwindcss 来编译你的 CSS
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

npx 的这个特性保证了所有团队成员都使用 package.json 中锁定的、统一版本的工具。

3. 尝试和运行不常用的包​

想看看 cowsay 这个包的效果？或者临时启动一个 HTTP 服务器？

# 让一头牛说“你好”
npx cowsay "你好，世界！"

# 在当前目录下快速启动一个本地 HTTP 服务器
npx http-server

你不需要为了这个小小的乐趣或临时需求而去 npm install 任何东西。

总结：npx vs npm​

可以做一个简单的类比：

• npm install：像是去商店购买一个工具，把它放进你自己的工具箱（node_modules）或家里的公共储藏室（全局安装）。这个工具会一直留在那里。
• npx：像是去工具租赁公司租用一个工具。你告诉 npx 你要用什么，它帮你拿来，用完后它就负责还回去。你家里干干净净，什么也没留下。

因此，npx 是一个强大的、用于提升开发体验和保持环境整洁的利器。

leylatop/eslint-flow

设计配置与技术实现​

以下操作基于代码仓库实现。

安装 ESLint​

ESLint 负责代码质量检查和发现潜在错误。

使用官方的初始化命令，在项目根目录下运行：

npm init @eslint/config@latest

在安装过程中，ESLint 会通过一系列的问题，帮助用户生成基础配置。

完成和 ESLint 的问题后，会自动安装 ESLint 所需的 npm 包（如 eslint、eslint-plugin-react 等），并自动生成一个 eslint.config.js（老的版本叫 .eslintrc.js）。

根据项目需求，修改 eslint.config.js 的 rule 使 lint 发生变化。

常见 rule​

rules: {
  'quotes': ['error', 'single'], // 使用单引号
  'semi': [2, 'never'], // 禁用分号结尾
  'comma-spacing': ['error', { before: false, after: true }], // 逗号后面添加空格，前面不加空格
  'arrow-spacing': ['error', { before: true, after: true }], // 箭头函数前面添加空格，后面添加空格
  'camelcase': ['error', { properties: 'never', ignoreDestructuring: false }], // 强制使用驼峰命名
  'eqeqeq': ['error', 'always', { null: 'ignore' }], // 强制使用全等运算符
  'comma-dangle': ['error', { arrays: 'never', objects: 'never', imports: 'never', exports: 'never', functions: 'never' }], // 禁止在数组、对象、导入、导出、函数后面添加逗号
  'indent': ['error', 2, { // 强制使用 2 个空格缩进
    SwitchCase: 1, // switch 语句后面添加空格
    VariableDeclarator: 1, // 变量声明后面添加空格
    outerIIFEBody: 1, // 外层 IIFE 体后面添加空格
    MemberExpression: 1, // 成员表达式后面添加空格
    FunctionDeclaration: { parameters: 1, body: 1 }, // 函数声明后面添加 1 个空格
    FunctionExpression: { parameters: 1, body: 1 }, // 函数表达式后面添加 1 个空格
    CallExpression: { arguments: 1 }, // 调用表达式后面添加 1 个空格
    ArrayExpression: 1, // 数组表达式后面添加 1 个空格
    ObjectExpression: 1, // 对象表达式后面添加 1 个空格
    ImportDeclaration: 1, // 导入声明后面添加 1 个空格
    flatTernaryExpressions: false, // 扁平三元表达式后面添加 1 个空格
    ignoreComments: false // 忽略注释
  }],
  'key-spacing': ['error', { beforeColon: false, afterColon: true }], // 强制使用冒号后面添加空格，前面不加空格
  'keyword-spacing': ['error', { before: true, after: true }], // 强制使用关键字后面添加空格，前面不加空格
}

集成到开发流程​

在编辑器中安装 ESLint 插件​

在 VS Code 的扩展商店中搜索并安装 ESLint 插件，这样在编码过程中，有触发 lint 限制，编辑器会报红提醒。

如需每次保存文件时，使用 ESLint 进行自动修复，可以在 VSCode 中配置 settings.json：

{
  // .vscode/settings.json
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit"
  }
}

在 package.json 增加 lint 检测​

在 package.json 的 scripts 中添加命令，方便手动检查整个项目。

（也可以在 CI/CD 打包过程中加入 npm run lint 的检测）

{
  "scripts": {
    // ... 其他脚本
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}

在 git 提交过程中增加 lint 检测​

为了从源头杜绝不规范的代码被提交到仓库，可以使用 husky 和 lint-staged 在提交代码前自动进行检查。

安装 husky 和 lint-staged 依赖：

npm install --save-dev husky lint-staged

配置 husky 和 lint-staged：

1. 运行 npx husky init 来初始化 husky，此步骤自动生成 .husky/pre-commit 文件，并且在 package.json 的 scripts 中新增 "prepare": "husky"
2. 在 package.json 中添加 lint-staged 配置：

// package.json
{
  // ... 其他配置
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint"
    ]
  }
}

3. 编辑生成的 .husky/pre-commit 文件，确保其内容为：

#!/bin/sh

npx lint-staged

现在，每当尝试 git commit 时，lint-staged 会自动对您本次修改并暂存（staged）的文件运行 eslint。如果有错误，提交将会被阻止。

常见问题​

编辑器未按照 ESLint 规则进行检测和报错​

问题描述：

已经在仓库中安装 ESLint 相关依赖，并在仓库根目录下存在 eslint.config.js 或 .eslintrc.js 配置文件。在编辑器修改代码后，编辑器未按照 ESLint 规则进行检测和报错。

解决方案：

1. 检查编辑器是否安装 VSCode 插件，如果未安装，则自行安装
2. 检查根目录下是 eslint.config.js 还是 .eslintrc.js
   • 如果是 .eslintrc.js，则需要在根目录下创建 .vscode/settings.json 文件，告诉编辑器要使用 .eslintrc.js
   • 如果不配置 settings.json，就需要将 .eslintrc.js 升级成 eslint.config.js

{
  "eslint.useFlatConfig": false // 使用 ESLint 的'传统'配置系统（.eslintrc.js），而不是'扁平化'的新配置系统（eslint.config.js）
}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <ol>
      <li>hover toggle child, 展示 child-container</li>
      <li>hover child-container, 会出现“抓不到”的现象</li>
    </ol>
    <div class="grand-parent">
      <div class="parent">
        toggle child
        <div class="child-container">
          <div class="child">1</div>
          <div class="child">2</div>
          <div class="child">3</div>
        </div>
      </div>
      
    </div>
    <div class="sibling">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
    </div>
  </div>
  <style>
    .grand-parent {
      position: relative;
    }
    /* parent 的 opacity < 1, 使 parent 形成了上下文 */
    .parent {
      position: relative;
      opacity: 0.8; 
      cursor: not-allowed;
    }
    
    .child-container {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: aqua;
      z-index: 100;  /* z-index 相对于的是parent上下文 */

    }
    
    .parent:hover .child-container {
      display: block;
    }

    /* 普通定位元素，位于 grand-parent 之后，所以会覆盖掉 grand-parent 内的元素 */
    .sibling {
      position: relative;
    }
  </style>
</body>
</html>

解决方法​

将 opacity 分别给 parent 的子元素，即 child-container 及child-container 的兄弟元素。

原因是：在 parent 设置 opacity < 1, 使 parent 形成了上下文，此时 .child-container 的 z-index 相对于的是parent上下文，不参与全局的上下文。会被后面的文档流覆盖掉。

层叠上下文绘制顺序​

• 层叠上下文的背景和边框
• 负z-index的子层叠上下文
• 块级盒子（block-level boxes） ← 普通元素在这里！
• 浮动元素（floated elements）
• 内联元素（inline elements）
• z-index: 0的子层叠上下文 / 定位元素（z-index: auto）
• 正z-index的子层叠上下文

其他变形​

使元素变为层叠上下文的 css 属性​

1. display 为 flex（flex ｜ inline-flex），同时 z-index 不是 auto；
2. opacity < 1；
3. transform 不为 none；
4. filter 不为 none；
5. mix-blend-mode 不是 normal；
6. isolation 是 isolate;
7. will-change 属性为上面 2~6 的任意一个（will-change： transform、will-change：opacity）
8. -webkit-overflow-scrolling 为 touch

使 grand-parent 形成层叠上下文​

在 grand-parent 形成了层叠上下文；sibling 的 z-index 为 auto，不形成层叠上下文；

1. grand-parent 的 z-index 为 0;

   • hover child-container 会出现“抓不到”的现象
   • grand-parent 的 z-index 为 0；sibling 的 z-index auto 在层级比较中，相当于 0；所以 grand-parent 会被后来的 sibling 覆盖；

2. grand-parent 的 z-index 为 1;

   • hover child-container 不会出现“抓不到”的现象
   • grand-parent 的 z-index 为 1，比 sibling 的 z-index auto 层级高，所以 grand-parent 会覆盖 sibling；

3. grand-parent 的 transform 为 translateX(0);

   • hover child-container 会出现“抓不到”的现象；
   • grand-parent 被文档流中的 sibling 覆盖；

使grand-parent 不形成层叠上下文​

在 grand-parent 不形成层叠上下文；设置 sibling 的 z-index 为 0；

• hover child-container 不会出现“抓不到”的现象；
• child-container 此时的 z-index 相对于根元素；与 sibling 一起 pk，child-container 会覆盖 sibling；

在 grand-parent 不形成层叠上下文；设置 sibling 的 z-index 为 101；

• hover child-container 会出现“抓不到”的现象；
• child-container 此时的 z-index 相对于根元素；与 sibling 一起 pk，sibling 会覆盖 child-container；

总结​

1. 当父级元素中，若哪一层级形成了层叠上下文，元素的 z-index 就会相对于该层叠上下文；否则是相对于根层叠上下文。

2. z-index 会在同一级的上下文中，与其他有 z-index 的元素去 pk，z-index 值较大的元素会覆盖z-index 值较小的元素。

3. 若 z-index 相对于非根层叠上下文；且该层叠上下文被后续文档流，或被后续层级更高的层叠上下文覆盖，则该元素会被覆盖。

• 如果设置三个值，则第二个值为对称值，即省略的第四个值与第二个值一致。

# 上右下左
padding: 10px;

# 上下、左右
padding: 10px 20px;

# 上、左右、下
padding: 10px 20px 15px;

# 上、右、下、左
padding: 10px 10px 20px 15px;


# 全部
border-radius: 50%；

# 左上角&右下角、右上角&左下角
border-radius: 50% 10%；

# 左上角、右上角&左下角、右下角
border-radius: 25% 50% 40%；

# 左上角、右上角、右下角、左下角
border-radius: 10% 30% 50% 70%;

# 左上角、右上角、右下角、左下角的上下值
border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
/* border-top-left-radius: horizontal vertical */
/* horizontal:表示椭圆的水平半长轴在被用作边框的半径 */
/* vertical: 表示椭圆的垂直半长轴在被用作边框的半径 */
/* 两个值可以设置左上角的圆角（圆弧）效果 */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

拆箱操作，即对象转换为基本类型。可以将对象转换为字符串、数字或布尔值。拆箱操作的语法为 unboxing(object)。

对象转为字符串​

const obj = {
  toString: () => {
    console.log('toString');
    return 'hello';
  },
  valueOf: () => {
    console.log('valueOf');
    return 'world';
  },
};
console.log(String(obj)); // toString world

const obj1 = {
  toString: () => {
    console.log('toString');
    return {}
  },
  valueOf: () => {
    console.log('valueOf');
    return 'world';
  },
};
String(obj1); // toString valueOf world, 先执行 toString 方法，如果 toString 方法返回的是非基本类型，则执行 valueOf 方法

const obj2 = {
  toString: () => {
    console.log('toString');
    return Symbol('hello');
  },
  valueOf: () => {
    console.log('valueOf');
    return 'world';
  },
};
String(obj2); // toString 报错，因为 Symbol 不能转换为字符串，直接报错，不执行 valueOf 方法

const obj3 = {
  toString: () => {
    console.log('toString');
    return {};
  },
  valueOf: () => {
    console.log('valueOf');
    return {};
  },
};
String(obj3); // toString valueOf 报错，因为toString 和 valueOf 方法返回的都是非基本类型，直接报错

总结​

1. 在对象转为字符串的拆箱过程中，会先尝试调用对象的 toString 方法，再尝试调用 valueOf 方法；
2. 若对象的 toString 方法返回的值是基础类型（string、number、boolean），则最终值是 toString 返回值到 string 类型的转换（基础类型 => string 类型）；
3. 若 toString 返回值非基础类型值：
   • 若是 Symbol 类型，则直接抛出错误，中断执行(TypeError: Cannot convert a Symbol value to a string)；
   • 若是对象，或数组，则继续执行 valueOf 方法；
4. 在这一步，若 valueOf 方法返回的是基础类型（string、number、boolean），则最终值是 toString 返回值到 string 类型的转换（基础类型 => string 类型）；
5. 若 valueOf 返回值非基础类型值：
   • 若是 Symbol 类型，则直接抛出错误，中断执行(TypeError: Cannot convert a Symbol value to a string)；
   • 若是对象，或数组，则抛出错误，结束执行(TypeError: Cannot convert object to primitive value)；

对象转为数字​

const obj = {
  toString: () => {
    console.log('toString');
    return 'hello';
  },
  valueOf: () => {
    console.log('valueOf');
    return 'world';
  },
};
console.log(Number(obj)); // valueOf NaN，因为 valueOf 方法返回的是基本类型值 `world`，所以下一步是将基本类型转换为数字，但是 world 不能转换为数字，所以最终结果是 NaN；如果 valueOf 方法返回的是可以被转换的值，比如 false 或 "0"，则最终结果是 0


const obj1 = {
  toString: () => {
    console.log('toString');
    return 'hello';
  },
  valueOf: () => {
    console.log('valueOf');
    return {};
  },
};
Number(obj1); // valueOf toString NaN，因为 valueOf 方法返回的是非基本类型值，所以下一步是调用 toString 方法，但是 hello 不能转换为数字，所以最终结果是 NaN

const obj2 = {
  toString: () => {
    console.log('toString');
    return 'hello';
  },
  valueOf: () => {
    console.log('valueOf');
    return Symbol('hello');
  },
};

// valueOf 报错，因为 Symbol 不能转换为数字，直接报错，不执行 valueOf 方法
Number(obj2); 

const obj3 = {
  toString: () => {
    console.log('toString');
    return {};
  },
  valueOf: () => {
    console.log('valueOf');
    return {};
  },
};
Number(obj3); // valueOf toString 报错，因为 valueOf 和 toString 方法返回的都是非基本类型值，直接报错

总结​

1. 在对象转为数字的拆箱过程中，会先尝试调用对象的 valueOf 方法，再尝试调用 toString 方法；
2. 若对象的 valueOf 方法返回的值是基础类型（string、number、boolean），则最终值是 valueOf 返回值到数字类型的转换（基础类型 => number 类型）；
3. 若 valueOf 返回值非基础类型值：
   • 若是 Symbol 类型，则直接抛出错误，中断执行(TypeError: Cannot convert a Symbol value to a number)；
   • 若是对象，或数组，则继续执行 toString 方法；
4. 在这一步，若 toString 方法返回的是基础类型（string、number、boolean），则最终值是 valueOf 返回值到数字类型的转换（基础类型 => number 类型）；
5. 若 toString 返回值非基础类型值：
   • 若是 Symbol 类型，则直接抛出错误，中断执行(TypeError: Cannot convert a Symbol value to a number)；
   • 若是对象，或数组，则抛出错误，结束执行(TypeError: Cannot convert object to primitive value)；

拆箱示例​

• 运算符拆箱

const obj = {}
console.log(obj + 1); // Object => number，因为 `valueOf()` 返回值是 {}， 所以调用了 `toString()`，`toString()` 返回值是 "[object Object]"，所以最终结果是 "[object Object]1"

parseInt方法，解析字符串为数字。可以将字符串转换为整数。parseInt方法的语法为parseInt(string, radix)

参数​

parseInt方法接受两个参数，第一个参数是要转换的字符串，第二个参数是转换时的基数。

• 第一个参数：理论上来说，接收任意类型的参数，但是只会解析字符串，如果参数不是字符串，会先强制类型转换为字符串后，再解析。
• 第二个参数：解析时的基数，即字符串的进制。参数的取值范围为2-36，当参数大于 10 时，字母 'A' 到 'Z'（大小写均可）被用作 10 到 35 的数字。

如果不传入第二个参数，parseInt方法会根据字符串的格式自动判断进制，规则如下：

• 如果字符串以 "0x" 或 "0X" 开头，parseInt会自动将其解释为十六进制数，相当于使用基数 16。
• 如果字符串以非"0" 开头，会自动将其解释为十进制数，相当于使用基数 10。
• 如果字符串以 "0" 开头，早期版本的ECMAScript规定解析为八进制数，但是ES5之后规定为十进制数。
• 如果字符串以+/-号开头，后面跟着数字，会被解释为带符号的十进制数

如果传入第二个参数，parseInt方法会根据第二个参数的值进行解析，规则如下：

• 如果第二个参数为0或没有传入，parseInt会根据字符串的格式自动判断进制。
• 如果第二个参数在2-36之间，parseInt会根据第二个参数的值进行解析。
• 如果第二个参数不在2-36之间，parseInt会返回NaN。

返回值​

parseInt方法的返回值是转换后的整数。如果字符串的第一个字符不能转换为数字，parseInt方法会返回NaN。

- 0-9、A-Z分别对应0-9、10-35（大小写均可）
- 当基数为2时，字符串中的第一位必须是0或1，否则返回NaN；后续字符必须是0或1，否则进行截断处理
- 当基数为8时，字符串中的第一位必须是0-7，否则返回NaN；后续字符必须是0-7，否则进行截断处理
- 当基数为10时，字符串中的第一位必须是0-9，否则返回NaN；后续字符必须是0-9，否则进行截断处理
- 当基数为16时，字符串中的第一位必须是0-9、a-f、A-F，否则返回NaN；后续字符必须是0-9、a-f、A-F，否则进行截断处理
- 当基数为19时，字符串中的第一位必须是0-9、a-i、A-I，否则返回NaN；后续字符必须是0-9、a-i、A-I，否则进行截断处理
- 当基数为其他值时，字符串中的第一位必须根据其范围确定，否则返回NaN；后续字符必须根据其范围确定，否则进行截断处理

注意​

parseInt解析输入的字符串时，会进行截断处理，直到遇到无法解析的字符为止。比如，parseInt('123.45')，会解析为123，因为小数点后的字符无法解析；parseInt('123abc')，会解析为123，因为遇到无法解析的字符a时，a不在10进制范围内，会停止解析。

parseInt('123', 2) // 1 = 1 * 2^2，只解析到第一个字符1，后面的字符不在2进制范围内
parseInt('123', 8) // 83 = 1 * 8^2 + 2 * 8^1 + 3 * 8^0
parseInt('123', 10) // 123
parseInt('123', 16) // 291 = 1 * 16^2 + 2 * 16^1 + 3 * 16^0
parseInt('F', 16) // 15
parseInt('FF', 16) // 255 parseInt 在截断时，进行贪心匹配
parseInt('G', 16) // NaN
parseInt('g', 16) // NaN parseInt对大小写不敏感

// 非字符串参数会被强制转化成字符串,再进行转换, 以下值均为NaN，因为默认基数为10，f 不在10进制范围内
parseInt(false) 
parseInt(String(false))
parseInt(String(new Boolean(false)))
parseInt('false')

奇怪的bug​

parseInt( 1/0, 19 ); // 18
parseInt( 1/0, 23 ); // 22
parseInt( 1/0, 24 ); // 23

原因：1/0 为 Infinity，Infinity 转化为字符串为 "Infinity"，"Infinity" 转化为19进制时，会把I解析为18，而n不在19进制范围内，所以会停止解析，返回18。同理，23进制时，会把I解析为22，n不在23进制范围内，返回22。24进制时，会把I解析为23，n不在24进制范围内，返回23。

补充其他的bug​

parseInt( 0.000008 );       // 0   ("0" 来自于 "0.000008") String(0.000008) => "0.000008"
parseInt( 0.0000008 );      // 8   ("8" 来自于 "8e-7") String(0.0000008) => "8e-7"
parseInt( false, 16 );      // 250 ("fa" 来自于 "false") String(false) => "false"，截取到fa，因为l不在16进制范围内，返回fa
parseInt( parseInt, 16 );   // 15  ("f" 来自于 "function..") String(parseInt) => "function.."

parseInt( "103", 2 );       // 2 截取到10，因为3不在2进制范围内，返回2

// ----------------------------分割线----------------------------

parseInt(" 100") // 100 `parseInt`会忽略前后空格
parseInt(" -17 ", 10) // -17 `parseInt`会忽略前后空格

// ----------------------------分割线----------------------------

parseInt("F", 17) // 15
parseInt("F", 16) // 15

parseInt("1100", 2) + parseInt("1100", 3) // 48 = 12 + 36

// ----------------------------分割线----------------------------

parseInt("100", 0) // 100
parseInt("100", 1) // NaN
parseInt("100", 37) // NaN

// ----------------------------分割线----------------------------

parseInt('0b10') // 0 parseInt 不认识字符串的"0b" 二进制前缀，只解析到 "b" 前面的 0。
parseInt(0b10) // 2 0b10 是一个数字字面量，非严格模式下，会被解析为二进制数，所以0b10 = 1 * 2^1 = 2

parseInt('0o21') // 0 parseInt 不认识字符串的"0o" 八进制前缀，只解析到 "o" 前面的 0。
parseInt(0o21) // 17 0o21 是一个数字字面量，非严格模式下，会被解析为八进制数，所以0o21 = 2 * 8^1 + 1 * 8^0 = 17

parseInt(0x10) // 16 0x10 是一个数字字面量，非严格模式下，会被解析为十六进制数，所以0x10 = 1 * 16^1 + 0 * 16^0 = 16
parseInt( "0x10" );         // 16 ("10" 来自于 "0x10") 字符串以 "0x" 或 "0X" 开头，parseInt 会自动将其解释为十六进制数，相当于使用基数 16。截取掉0x，使用10进行解析，返回16。10 = 1 * 16^1 + 0 * 16^0

parseInt(021) // 17 021 是一个数字字面量，非严格模式下，会被解析为八进制数，所以021 = 2 * 8^1 + 1 * 8^0 = 17
parseInt("021") // 21 '021' 是一个字符串，parseInt 函数在解析字符串时，会忽略前导零。

补充知识：​

• 0b开头：二进制数
• 0开头/0o开头：八进制数
• 0x开头：十六进制数

axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 node.js 中。关键词：跨端、基于 promise

axios底层适配器​

在 axios 源码中定义了3 个 adapters，分别是 http、xhr、fetch。

const knownAdapters = {
  http: httpAdapter,
  xhr: xhrAdapter,
  fetch: fetchAdapter
}

httpAdapter 底层实现​

httpAdapter 是 axios 的默认适配器，适用于 node 环境，它的底层实现分为2种：

• 默认使用 Node.js 的 http 模块来发送请求；
• 当 config.maxRedirects 大于 0 时，引入了一个 follow-redirects库进行重定向，使用该库的 http.request 或 https.request 方法来发送请求。

xhrAdapter 底层实现​

xhrAdapter 是 axios 的另一个适配器，适用于浏览器端请求，它直接调用了浏览器原生的 XMLHttpRequest 对象来发送请求。

fetchAdapter 底层实现​

fetchAdapter 适用于浏览器请求，它直接调用了 fetch 方法来发送请求。

在调用 fetch 方法之前，使用原生的 new Request 方法创建了一个 Request 对象，在请求发送后，调用原生的 Response 对象来处理响应。

适配器的选择逻辑​

axios 选择适配器的逻辑是按照一个优先级顺序进行的。通常情况下，axios 会优先尝试使用在当前环境中可用的、更现代的适配器。具体的选择逻辑可能略有不同，但大致遵循以下原则：

1. 用户指定的适配器: 如果用户在请求配置中明确指定了 adapter 选项，axios 会优先使用用户指定的适配器。
2. 环境检测和默认适配器: 如果用户没有指定适配器，axios 会检测当前环境。
   • 在支持 fetch 的浏览器环境中: axios 可能会优先尝试使用 fetch 适配器。
   • 在不支持 fetch 的浏览器环境中 (例如一些旧版浏览器): axios 会回退到使用 xhr 适配器。
   • 在 node 环境中: axios 会使用 http 适配器。

系统升级​

因为拿到的是 2019年的电脑，即使系统重装了，依然是 12.x的系统，一些软件已经不再支持老版本的系统。再加上电脑是 32g 的内存，所以运行速度还算可以，所以我拿到之后，首先升级了一下系统，升级到了 15.4.1。

软件安装​

梯子 🪜​

首先是🪜，作用不言而喻，我使用的是clash-verge-rev，安装方法是普通的下载安装包，安装。

使用 brew 安装软件和 cli​

1. 首先安装 brew，使用 brew 安装常用的软件和 cli 。使用 brew 进行软件管理，是因为 brew 可以清晰的管理软件的安装、升级、卸载等。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 安装程序员常用软件

brew install —-cask google-chrome
brew install —-cask iterm2
brew install —-cask cursor
brew install --cask dingtalk
brew install --cask chatwise
brew install --cask obsidian
brew install --cask postman
brew install --cask raycast
brew install autojump
brew install git
brew install lazygit

3. autojump 安装后，需安装提示添加内容到 .zshrc，否则不生效

安装 oh-my-zsh​

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

安装完成后，在用户根目录下会多一个 .oh-my-zsh 文件夹，进入该文件夹

cd ~/.oh-my-zsh

安装并配置主题​

cd themes
git clone git@github.com:romkatv/powerlevel10k.git

修改 .zshrc文件，修改ZSH_THEME为以下内容：

ZSH_THEME="powerlevel10k/powerlevel10k"

然后重启iterm2，按照自己的喜好一步步进行选择。

安装并配置插件​

cd plugins
git clone https://github.com/zsh-users/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-completions
git clone https://github.com/zdharma-continuum/fast-syntax-highlighting.git 

修改 .zshrc文件，增加以下内容：

plugins=(
  git
  zsh-autosuggestions
  zsh-completions
  fast-syntax-highlighting
)

Node​

安装volta，用于安装node，以及管理 node 版本。安装完 node版本后，npm 版本也就有了。

curl https://get.volta.sh | bash
volta install node@22

通过安装包的方式安装其他软件​

• Bob：通过这次安装，我感受到了Bob 有个缺点，就是没有账户系统，每次更换电脑都需要重装插件
• 微信输入法：看 cc 的blog推荐，我开始使用微信输入法，感觉比以前的搜狗好用一些，但是非常新奇的功能还待挖掘

Git 配置​

git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"

SSH 生成及配置​

mkdir ~/.ssh
ssh-keygen -t ed25519 -C "github"

将生成的公钥复制到 gitlab 或 github 的 ssh 中，才能克隆代码

npm包安装​

全局安装 change_user_npmrc，分别配置了一下 公司 和 个人 的 npm 镜像源。

（这是我自己写的工具包，目的是能在不同的网络下的方便的切换 npm 镜像。今天看了一下，每天居然有零零星星的几个人进行下载，不知道是否帮助到他人了。）

总结​

最后，又下载了一下漂亮的静态壁纸，配置鼠标速度和方向，基本就完成了。至此，基本完成了电脑的配置，我用它已经基本可以前端开发了，后续再有不舒服的地方，再进行调整。

为什么是对外的博客呢？我每天都在用 Obsidian 记录，记录开发笔记、记录每日待办，记录工作，记录投资理财以及一些经常给自己打鸡血的想法。但对外公开的，只有我的开发笔记。因为在我日常记录的随笔，非常随意。把一些随笔公开，我既觉得羞愧，也觉得不堪。

博客契机​

我最近在微信公众号上看了一篇推文，推文大概意思是，怎么才能不把日子过得浑浑噩噩呢，那就是记录。记录消费、记录想法，这样在复盘的时候才能有依据，再加上我其实一直都想写博客，再加上今天时间充裕（其实是以前懒惰），开干 😏。

新建博客模块的目的​

1. 让自己的网站内容更丰富。除了写博客，我还计划放一个相册模块，放自己旅游和日常的照片，todo永远是做不完的😅

2. 审视自己内心的想法，挖掘并剖析内心龌龊切不好意思的想法，把真实的自己暴露在外面。我一直觉得我是一个表里不一的人，做不到百分百真诚，甚至不能直面自己的内心，我属于那种骗着骗着把自己骗过去的类型...

3. 通过长篇的博客，勤快的深度思考。我觉得写博客的过程，像是自己与自己辩驳，帮助自己想明白一个事情，有逻辑的总结。

4. 锻炼自己的表达和书写能力。其实在码这一篇博客的时候，我就发现我好像失去了中学的写作能力。我不能把我的博客按照我的内心去写下来，或者说，我的内心好像是混沌的。

博客更新的形式和内容​

1. 不定时更新

2. 前期可能是短篇或流水账为主，因为我现在的语言表达能力有点退化...

最后​

其实我最近也在记周记，每周日更新，从健身、学习、工作、家庭4方面总结。为啥是这4个方面呢？因为这四个方面是我梳理的人生主线。但其实都是记录一下，而且大多是流水账，更没有很直观的数据对比（说到这里又想开发一个周记复盘程序）。

我希望通过开通博客模块，能输出尽量长的内容，无论是否有人看，是否有人爱看。在这个快节奏的时代，我看短剧都要开倍速的时代，长篇的内容，无论对于 author 还是 reader 来说都是一种时间付出。但是我希望通过长篇博客直面自己挖掘内心，如果能与reader 产生共鸣那是更好。