大前端基础之JS数组API总结及其方法重构封装 四.1、在JS中什么叫数组： 数组是数据的有序集合，每个值叫做一个元素，简称元，而每个元素在数组中有一个位置，以数字表示，称为索引，从0开始。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。数组元素的索引不一定要连续，元素之间可以有空隙，叫做稀疏数组 。每个数组都具有一个length属性。针对非稀疏数组，length属性就是数组元素的个数，针对稀疏数组，元素的length属性比所有元素的索引要大。 四.2、数组的构建方式 1）、字面量的创建；var arr=[ ]; 2）、构造函数创建；var arr=new Array(); 如果通过这个方式创建数组，参数仅有一个时，且这个参数是正整数的时候，不能是负数或者小数，则表示创建一个具备该正整数长度的数组，里面有这个长度若干个空元素，如果不是数值，这个数据就会作为该数组的第零个元素，长度为1 四.3 JS数组的特点； 1）arr.length 数组的长度，元素的个数，长度可被修改，最大下标为长度减1，仅记录下标的个数，不包含属性的数量 2）arr[arr.length]=20，在数组最尾部添加一个元素 3）在对象中属性名填入任何内容都会隐式转换成字符，在数组中所有的下标都会隐式转换成number（NaN），不能转换的就会默认添加为数组的属性名 4）数组不可以用点语法获取下标变量，但是可以用点语法获取属性 5）当给数组添加键值对的时候，数组长度并不会改变，调用的时候用点语法

四.4：数组的API；总的来说数组的API有以下几个，那下面小编就介绍几种在JS中经常用到的API和数组方法重构(其中arr参数表示为数组，item参数表示为元素，index为索引)； push()+pop(), shift()+unshift(), forEach(), map(), some(), every(), filter(), reduce()+reduceRight(), indexOf()+lastIndexOf(),join(), sort(), slice(), splice(), concat(), reverse(), Array.form(), Array.of(), find()+findIndex(), entries()+keys()+values(), includes()

1. 安装Docusaurus​

Docusaurus: 现代化的 Jamstack 文档网站;

# 我们直接用docusaurus提供的脚手架直接搭建
npx create-docusaurus@latest docusaurus-tailwind classic --typescript

npm run start

2.集成tailwindcss​

docusaurus底层样式是infima实现的，所拥有的postcss类比较少，所以我们需要集成tailwindcss来扩展样式;

在继承tailwindcss时，我分别用了tailwindcss3.x和tailwindcss4.x去实现，里面的差别还是很大的。

基于storybook自定义charts组件的文档​

storybook是一个UI组件的开发环境，它可以帮助你创建、预览和测试你的UI组件。在这个文档中，我们将介绍如何使用storybook来创建一个自定义的charts组件。

1. 安装storybook并创建storybook项目​

npm create storybook@latest

当前命令会创建一个基于react的storybook项目，并自动安装所需的依赖，期间选择自己选择的技术库，这里我选择的是react和vite。

2. 创建一个自定义的charts组件目录​

当前创建的项目中是一个storybook项目，其包含.storybook，src及vite的一些配置文件等，现我们将其改成多包处理，将storybook单独隔离，charts组件也是一个包，在最外层管理当前项目的共同依赖，如react，vite等。

├── packages
│   ├── charts-pc
│   │   ├── core // 核心逻辑
│   │   ├── react // 组件
│   │   ├── vite.config.ts // 单独的vite配置文件
│   │   ├── tsconfig.json // 当前包的ts配置文件
│   │   ├── packages.json
├── storybook
│   ├── .storybook
│   ├── src
│   │   ├── stories
│   ├── packages.json
├── vite.config.ts // 全局的vite配置文件
├── tsconfig.json // 全局的ts配置文件
├── package.json
├── ......

3. 配置storybook​

在storybook中，插件是主流，用插件添加一些常用的功能，如文档、样式、测试等。

. 配置.storybook/main.ts

react​

react-redux​

• React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state
• https://github.com/reduxjs/react-redux
• https://cn.react-redux.js.org/api/hooks

@rematch/core​

• Rematch是在redux的基础上再次封装，使用rematch，我们就不需要再声明action类型、action创建函数、thunks配置。
• https://github.com/rematch/rematch
• https://rematchjs.org/docs/getting-started/installation

@rematch/immer​

• Rematch 的 Immer 插件。使用 immer 包装您的 Reducer，提供安全地进行可变更改并产生不可变状态的能力。在 Immer 中，reducer 可以执行突变以实现下一个不可变状态。Immer不要求您从 Reducer 返回下一个状态，Rematch 也不会强迫您这样做。
• https://rematchjs.org/docs/plugins/immer/

@rematch/persist​

• 提供自动 Redux 状态持久性。一般是本地
• https://rematchjs.org/docs/plugins/persist/

网络​

axios​

• https://github.com/axios/axios
• https://axios-http.com/zh/docs/intro 中文
• https://axios-http.com/docs/intro 英文

NextJs中本身自带next lint命令。

create-next-app时就可配置默认的eslint，也可以自定配置

配置eslint，覆盖next lint默认规则，并兼容旧版本eslint​

// eslint.config.mjs
// 注意  eslint版本不同，配置文件后缀不同，并且.eslintignore相关也是在当前文件配置ignores
import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  { ignores: ['scripts/**', 'node_modules/'] },
  ...compat.config({
    // ignorePatterns: ['scripts/**', 'node_modules/'],
    extends: [
      'next/core-web-vitals',
      'next/typescript',
      'plugin:prettier/recommended',
      'prettier',
    ],
    rules: {
      'no-console': ['error', { allow: ['warn', 'error', 'debug'] }],
      'react/no-unescaped-entities': 'off',
      '@next/next/no-page-custom-font': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      // "@next/next/no-img-element": 'off',
    },
    // overrides: [
    //   {
    //     files: ['**/*.ts', '**/*.tsx', '**/*.js'],
    //   },
    // ],
    // parserOptions: {
    //   project: './tsconfig.json',
    // },
  }),
];

export default eslintConfig;

安装husky和lint-staged​

npm install husky --save-dev
npx husky install

npm install lint-staged --save-dev

...
"scripts": {
  "prepare": "husky"
}
...

增加.lintstagedrc文件​

概述：​

本文旨在通过从0开始搭建一套完整的React开发框架来掌握如webpack、react、ts、loader、babel、eslint、prettier、husky、lint-staged等各个部分基础是如何协同编译开发的，进而去了解create-react-app之类的CI都做了哪些事情。
webpack中文网

1 初始化项目​

npm init

yarn init & npm init 都是ok的，都是为了初始化一个package.json文件

2 构建核心打包环境​

npm i webpack webpack-cli webpack-dev-server -D

1. 依赖说明
   | 模块名 | 说明 | 版本 |
   | --- | --- | --- | | webpack | 模块化打包工具，打包代码时的核心依赖 | ^5.72.1 | | webpack-cli | 支持在命令行中执行webpack的工具 | ^4.9.2 | | webpack | 开启本地开发服务器 | ^4.9.0 | | webpack-merge | 合并webpack-config文件 | ^5.8.0 |

JS正则表达式​

先来个常用的8到16位高级密码正则表达式 /^(?=\D+\d)(?=.[a-z])(?=.[A-Z])[a-zA-Z0-9]16$/
解释
(?=\D+\d) 条件是首字母不能是数字，但是整个字符串中必须含有1个数字 (?=.[a-z]) 必须包含一个小写字母，字母可以在任意位置* (?=.*[A-Z]) 必须包含一个大写字母，字母可以在任意位置 [a-zA-Z0-9]16 大小写字母和数字字符最少8个，最多个16

正则表达式 作用: 查找、替换，通常用作验证，截取，隐藏，编码 一、正则表达式的创建 1、字面量写法 var reg=/表达式/修饰符 var reg=/ab/g; 修饰符 1）g 全部 2）i 不区分大小写 3）m 多行匹配 2、构造函数创建方法 var reg=new RegExp("表达式","修饰符")； var reg=new RegExp("ab","g"); 第二种方法实际上是将一个字符串转化为正则对象

二、正则表达式的方法 test exec 1、 test 查看字符串是否有满足正则表达式的内容，会查完，查一次，如果有，返回true，没有就返回false。 var bool=reg.test("abcde");

这里indexOf和text都可以执行，等同，但是一个是返回下标，一个是返回布尔值。

Blog posts support Docusaurus Markdown features, such as MDX.

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.