- 博客(377)
- 收藏
- 关注
RSS订阅原创 手把手教你搭建 Webpack 5 + React 项目
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？
2023-05-03 15:23:02
3169
2
原创 基于 webpack 5 实现自定义 loader
基于 webpack 5 创建自定义 同步、异步loader，在此基础上实现一个简易的渲染 markdown 的 loader 和 合成雪碧图的 loader。
2022-07-30 20:11:44
1177
2
原创 包管理工具 —— 更推荐的 pnpm
前言一般我们接触的包管理工具有 npm、yarn 以及pnpm，小柒在工作中基本上新项目都采用了pnpm 来作为包管理工具，那我们就来聊一聊换成 pnpm 的好处。npmnpm 从 v1 -v3- v5 版本的迭代都有重大的改变，一起来下看吧~。npm v1 嵌套npm 在 v3 之前 node_modules 里的包都是嵌套的。node_modules├── A@1.0.0│ └── node_modules│ └── B@1.0.0├── C@1.0.0│ └─
2022-03-18 18:44:15
11430
2
原创 一文梳理 React 18 新特性
React 的迭代过程React 从 v16 到 v18 主打的特性包括三个变化：v16: Async Mode (异步模式)v17: Concurrent Mode (并发模式)v18: Concurrent Render (并发更新)React 中 Fiber 树的更新流程分为两个阶段 render 阶段和 commit 阶段。组件的 render 函数执行时称为 render（本次更新需要做哪些变更），纯 js 计算；而将 render 的结果渲染到页面的过程称为 commit （变更到
2022-03-09 10:37:19
2945
原创 JSON.stringify 的 “魅力”
前奏JSON.stringify() 的使用大家肯定不陌生，一般在前端给后端传数据的时候用的多，但它隐藏的“秘密” 你知道多少呢，让我们一起来探索一下吧~。JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串语法JSON.stringify(value[, replacer[, space]])参数value： 必须，通常是 JavaScript 值（通常为对象或者数组）replacer: 可选。如果该参数是一个函数，则每个被序列化的值的每个
2021-12-12 19:43:04
722
2
原创 测一测 package.json 配置你了解多少？
前奏package.json是我们最常见的配置文件，在工作中经常与其打交道。它可以帮助该 npm 包的使用者能更好的理解和使用该 npm 包。小柒详细的梳理了一下package.json中各个配置。必须属性namename 是一个包的唯一标识，不得和其他包名重复，必须小于等于214个字符，不能以 . 和 _ 开头，不能包含大写字母。我们可以通过执行 npm view packageName 可以查看包名是否被占用。version格式按照主版本号.次版本号.修订号的形式。如果是不稳定可以发内部版
2021-11-15 08:55:58
892
原创 React Hook ---- useImperativeHandle
useRefuseRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数返回的对象在组件的整个生命周期内保持不变。forwardRef被 React.forwardRef 包裹的组件接受 props 和 ref 作为参数可以将 ref 从父组件转到子组件的DOM上，使得父组件中可以获取子组件的DOM。useRef 与 forwardRef 示例// 父组件import { useRef } from "react";import Child from "
2021-07-07 20:31:39
455
原创 Work Utils
前面的话常用的小工具方法封装，整理起来，持续更新~formatDuration： 将服务端传过来的时长（秒）格式化为时分秒/** * 将服务端传过来的时长（秒）格式化为时分秒 * @param {number} 秒级 * @return {string} 格式化为时分秒 */export default function formatDuration(second: number) { if (second < 3600) { return [Math.floor((s
2021-02-25 13:47:55
233
1
原创 动态规划 --- Leedcode 322 零钱兑换问题
题目给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1。示例 1:输入: coins = [1, 2, 5], amount = 11输出: 3 解释: 11 = 5 + 5 + 1示例 2:输入: coins = [2], amount = 3输出: -1解析...
2020-09-28 12:11:17
267
原创 TypeScript 学废了么 ？
前面的话现在的项目开发中基本都会使用 TypeScript 来规范 JS 的类型，这篇文章来总结一下 TypeScript 的基本知识。1、TypeScript 概述JS 是一种脚本语言，作为解析型语言，只能在运行时发现错误，是弱类型语言。TS 是 JS 的超集，用于解决大型项目的代码复杂性，在编译的过程中就可以纠正错误，支持强类型、静态类型，支持模块、接口和泛型，最终被编译成 JS 代码，给浏览器使用。2、TypeScript 的安装安装npm install -g typescript
2020-09-27 19:02:38
4123
2
原创 set --- Leedcode 448 找到所有数组中消失的数字
题目给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组，数组中的元素一些出现了两次，另一些只出现一次。找到所有在 [1, n] 范围之间没有出现在数组中的数字。示例:输入:[4,3,2,7,8,2,3,1]输出:[5,6]解析使用 set 剔除重复元素，再进行遍历。 var findDisappearedNumbers = function(nums) { const n = nums.length; const res = []; co
2020-09-25 11:48:10
401
原创 快慢指针 --- Leedcode 26 删除排序数组中的重复项
题目给定一个排序数组，你需要在 原地 删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。示例：给定 nums = [0,0,1,1,1,2,2,3,3,4],函数应该返回新的长度 5, 并且原数组 nums 的前五个元素被修改为 0, 1, 2, 3, 4。你不需要考虑数组中超出新长度后面的元素。解答快慢指针来解题，nums[slow] !== nums[fast]
2020-09-24 08:27:41
224
原创 双指针 --- Leecode 167 两数之和（有序数组）
题目解析使用左右指针。如果两指针执行的元素和 sum === target,那么返回结果如果 sum > target, 右指针减一，使sum变小些如果 sum < target, 左指针加一，使sum变大些var twoSum = function (numbers, target) { if (numbers.length < 2) { return []; } let left = 0; let right = numbers.length
2020-09-22 17:54:35
218
原创 Redux、React-Redux + 实战
Redux介绍Redux 是为React 提供的状态管理机制：Redux 将整个状态存储到一个地方 — store。这个 store 中有个对象 state 用来存放数据组件改变 state 数据的唯一方法是通过调用 store.dispatch 方法，触发一个action。这个 action 相当于一个指令，是一个对象，里面的 type 属性相当于一个指令（是必须的）。reducer 会处理相应的 action指令，处理完毕后，将数据返回给store，于是 state 完成更新。其他组件可
2020-09-16 18:07:40
492
原创 双指针 --- Leedcode 5 最长回文子串
题目：给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。示例 1：输入: "babad"输出: "bab"注意: "aba" 也是一个有效答案。示例 2：输入: "cbbd"输出: "bb"解析： 中心扩散法：从每一个位置出发，向两边扩散即可。首先往左寻找与当前位置相同的字符，直到遇到不相等为止。然后往右寻找与当前位置相同的字符，直到遇到不相等为止。最后左右双向扩散，直到左和右不相等。var longestPalindrome =
2020-09-16 14:32:25
263
原创 树 --- Leedcode 100 相同的树
题目给定两个二叉树，编写一个函数来检验它们是否相同。如果两个树在结构上相同，并且节点具有相同的值，则认为它们是相同的。示例 1:输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1,2,3]输出: true解析明确每个节点该做的事，剩下的交给递归。var isSameTree = function(p, q) { if(p === null &
2020-09-16 10:46:59
322
原创 面试总结三 --- 浏览器与网络
浏览器相关(1) 浏览器缓存HTTP 缓存： 当客户端向服务器请求资源时，会先查看浏览器缓存，如果浏览器有请求资源的副本，就可以直接从浏览器缓存中提取，而不用去原服务器中提取资源。HTTP 缓存分为 强缓存 与 协商缓存加粗样式。强缓存： 如果缓存中有请求的数据，就直接去缓存中提取数据。如果缓存中没有要请求的数据，这是客户端会从服务端获取数据，并且服务器会将数据和缓存规则一起返回，将缓存规则信息包含在响应头中。与强缓存有关的响应头字段：Expires ：告知客户端资源失效的日期Cache
2020-09-14 09:58:17
696
原创 面试总结（二）—— JS、ES6
JS(1) js 数据类型基本类型：Number、String、Boolean、Undefined、NullSymbol、BigInt。引用类型：Object，它包含 Function、 Array 、Date等对于基本类型存储在栈中，而引用类型存在堆中，引用类型中的指针存储在栈中，该指针指向堆中该实体的其实地址。（闭包中访问的变量存在堆中） js中数据是如何存储的(2) 布尔类型的值的转换规则假值 7种 （undefined、null、false、+0 、-0、""、NaN）其他都
2020-08-31 16:45:44
530
原创 React Hooks 入门下
前面的话上篇介绍了 useState 和 useEffect 两个钩子函数，这篇将接着介绍其他常用的钩子函数。1、useCallback作用：该 hooks 返回一个 memoized 回调函数，根据依赖项来决定是否更新函数。其依赖项可以为一个空数组, 表示没有依赖值， 将永远不会被更新。useCallback 可以优化代码，防止不必要的渲染。但也并非所有的方法都要用 useCallback 去包裹一层。使用例子useCallback 与 React.memo 完美搭配：React.m
2020-08-24 15:44:28
457
原创 二叉树 --- Leedcode 235 二叉搜索树的最近公共祖先
题目给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为：“对于有根树 T 的两个结点 p、q，最近公共祖先表示为一个结点 x，满足 x 是 p、q 的祖先且 x 的深度尽可能大（一个节点也可以是它自己的祖先）。”例如，给定如下二叉搜索树: root = [6,2,8,0,4,7,9,null,null,3,5]示例 1:输入: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 8输出: 6 解释:
2020-08-19 21:29:42
166
原创 位运算 --- Leedcode 371 两数之和 （Easy）
题目不使用运算符 + 和 - ，计算两整数 a 、b 之和。示例 1:输入: a = 1, b = 2输出: 3示例 2:输入: a = -2, b = 3输出: 1解答在位运算中，异或的重要特征是一个无进位加法： 5 + 7 = 12 101 111 ——— => 异或的结果是2 010这样的话 a ^ b 得到的结果是： 无进位的结果， 要想得到最终结果，就要找到进位数。在位运算中，我们可以通过与运
2020-08-19 11:50:31
202
原创 二叉搜索树 --- Leedcode 700 二叉搜索树中的搜索 （Easy）
题目给定二叉搜索树（BST）的根节点和一个值。 你需要在BST中找到节点值等于给定值的节点。 返回以该节点为根的子树。 如果节点不存在，则返回 NULL。例如，给定二叉搜索树: 4 / \ 2 7 / \ 1 3和值: 2你应该返回如下子树: 2 / \ 1 3 在上述示例中，如果要找的值是 5，但因为没有节点值为 5，我们应该返回 NULL。 解答二叉树
2020-08-18 18:23:04
133
原创 运算 --- Leedcode 7 整数反转
题目给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。示例 1:输入: 123输出: 321示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21注意:假设我们的环境只能存储得下 32 位的有符号整数，则其数值范围为 [−231, 231 − 1]。请根据这个假设，如果反转后整数溢出那么就返回 0。 解析/*1、先判断符号： 使用 Math.sign 判断符号2、对绝对值进行：字符串 -> 数组 ->
2020-08-13 20:46:06
143
原创 幂运算 --- Leedcode 372 超级立方
题目你的任务是计算 a^b 对 1337 取模，a 是一个正整数，b 是一个非常大的正整数且会以数组形式给出。示例 1:输入: a = 2, b = [3]输出: 8示例 2:输入: a = 2, b = [1,0]输出: 1024解析题目中 b 会是一个非常大的整数，这样可能会导致溢出，并且b是一个数组形式，我们需要处理：用数组表示的指数如何避免溢出如何得到求模的结果1、首先如何用数组表示指数： [1,5,6,4] // 假如 b 是 [1,5,6,4] a^b
2020-08-13 10:49:51
316
原创 React Hooks 入门上
前面的话实习开始没多久，就开始帮着做一个管理系统的项目， 项目技术战使用 react + ts + antd。在三者之前都没接触的情况下，我硬着头皮上了，class 组件都还没搞明白，就开始了 hooks 之旅。。。1、HooksReact Hooks 的意思是: 组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React Hooks 就是那些钩子，需要什么功能，就使用什么功能。2、注意事项只能在函数组件最外层调用 hooks, 不要在条件、循环、嵌套中调用 ho
2020-07-25 17:57:51
515
原创 React 基础入门 （一）
前面的话这是一篇算React入门级的文章，初次接触React，有问题请指出～～～。安装方式这里介绍搭建一个 react 项目的两种方式： CDN链接 和 官方推荐的 create-react-app 脚手架CDN 链接创建一个 index.html 文件，将 React、React DOM、Babel 这三个 CDN 链接引入到 head 标签中。并创建一个 div ，id为 root，作为根元素。<!DOCTYPE html><html lang="en"><
2020-06-22 20:38:45
750
1
原创 zsh 目录权限问题的解决
前面的话记录配置 Mac 环境时，安装 oh-my-zsh 遇到了的目录权限问题。问题解决方法尝试着上面的解决方法，将ZSH_DISABLE_COMPFIX=true拷贝到 ～/.zshrc 文件中:1、在.zshrc文件的第一行添加 ZSH_DISABLE_COMPFIX=true2、运行source命令，重新加载.zshrc文件source ~/.zshrc但是没有用。最终的解决方法：为上面提示的文件夹修改权限（根据具体提示修改）chmod 755 /usr/local/sha
2020-06-15 22:50:48
6741
原创 babel-node / nodemon / standard / jest 的使用
前面的话小柒的实习之旅已经过去一周，认识了许多新朋友、大佬，只有走出来，才能看到自己与别人之间的差距。接下来的时间要向前辈们多学习，提升自己。 这周做了一个小小的任务，记录一下babel-node 和 nodemon两个插件的使用。需求支持 es6修改代码支持热更新babel-node可以在 node 端自行编译并运行 es6 。安装：npm install --save-dev @babel/core @babel/node @babel/preset-env在根目录下创建.bab
2020-06-15 16:50:12
635
1
原创 双指针 --- leedcode 283 移动零
题目给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。示例:输入: [0,1,0,3,12]输出: [1,3,12,0,0]说明:必须在原数组上操作，不能拷贝额外的数组。尽量减少操作次数。解答双指针 i、ji 遍历整个数组上nums[i] != 0 时，将nums[j] = nums[i], 并且 j++最后，i 遍历完后，把 j 以后剩余的位置赋值为 0var moveZeroes = function(nums) {
2020-05-13 10:29:19
182
原创 链表 --- Leedcode 83 删除排序链表中的重复元素
题目给定一个排序链表，删除所有重复的元素，使得每个元素只出现一次。示例 1:输入: 1->1->2输出: 1->2示例 2:输入: 1->1->2->3->3输出: 1->2->3解答var deleteDuplicates = function(head) { var p = head; while(p!=null && p.next != null) { // 如果有重复的数，直接
2020-05-10 21:10:00
151
原创 链表 --- leedcode 234 回文链表
题目请判断一个链表是否为回文链表。示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true解答将链表中的各值存在数组中，再判断是否是回文。var isPalindrome = function(head) { var arr = []; while(head != null){ arr.push(head.val); head = head.next; }
2020-05-10 20:58:37
153
原创 面试总结（一）
前面的话小柒前面已经总结了这些天的面试题，这篇文章为部分内容给出解答。ps: 下面的解答只是参考，有错误请指出~~HTML(1) HTML语义化的理解用正确的标签做正确的事情HTML语义化让页面结构化，内容更清晰即使不使用css也容易阅读便于搜索引擎(2) DOCTYPE的作用是为了告知浏览器的解析器使用什么模式来解析页面。有两种类型：标准模式与怪异模式。(3) 标准...
2020-05-05 11:29:00
486
原创 二叉树 --- leedcode 404 左叶子之和
题目计算给定二叉树的所有左叶子之和。示例： 3 / \ 9 20 / \ 15 7在这个二叉树中，有两个左叶子，分别是 9 和 15，所以返回 24解答var sumOfLeftLeaves = function(root) { return helper(root, false); function helper(roo...
2020-05-03 20:35:27
153
原创 二叉树 --- leedcode 111 二叉树的最小深度
题目给定一个二叉树，找出其最小深度。最小深度是从根节点到最近叶子节点的最短路径上的节点数量。说明: 叶子节点是指没有子节点的节点。示例:给定二叉树 [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7返回它的最小深度 2解答与求树的最大深度不一样的是：要考虑节点只有左节点或者右节点的情况。v...
2020-05-03 20:22:27
171
原创 5 / 3 趁假期，写下近20天的面试总结
前面的话从投简历到现在差不多有20天的面试时间，春招也接近了尾声，小柒这里总结一下。总的来说，对于实习生来说，考的最多的还是前端基础，其次就是计网、数据结构、操作系统这些专业知识，还有一点算法（不说要达到可以竞赛的水平，基本算法思想：双指针、排序、分冶、动态规划、二叉树、链表、栈和队列等要了解）。PS： 问题大概就这么多，可能漏掉了少部分问题，总的来说还是比较全的（记起来再补）。HTML(...
2020-05-03 12:20:08
588
原创 js 手写代码集合
apply的实现 Function.prototype.myApply = function (obj) { obj = obj || window ; // 保存this的指向 obj.fn = this; // 添加一个属性为调用apply的函数 let result; if(arguments[1]) {// 如果存在第...
2020-04-27 13:48:23
630
原创 动态规划 --- leedcode 121 买股票的最佳时期
题目给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。如果你最多只允许完成一笔交易（即买入和卖出一支股票一次），设计一个算法来计算你所能获取的最大利润。注意：你不能在买入股票前卖出股票。示例 1:输入: [7,1,5,3,6,4]输出: 5解释: 在第 2 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5...
2020-04-26 20:47:55
192
原创 leedcode 14 最长公共前缀
题目编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 ""。示例 1:输入: ["flower","flow","flight"]输出: "fl"示例 2:输入: ["dog","racecar","car"]输出: ""解释: 输入不存在公共前缀。解析JavaScript：var longestCommonPrefix = functi...
2020-04-26 20:39:09
128
原创 map/异或 --- leedcode 136 只出现一次的数
题目给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。示例 1:输入: [2,2,1]输出: 1示例 2:输入: [4,1,2,1,2]输出: 4解答JavaScript：方法一： mapvar singleNumber = function(nums) { const map = new Map(); fo...
2020-04-26 17:06:32
197
原创 动态规划 --- leedcode 53 最大子序和 （Easy）
题目给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。示例:输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。解析动态规划解题：创建dp数组， 数组中的每一位表示：当前nums[i]与前面的元素和的最大值dp[i] = Math.max(dp[i...
2020-04-21 13:23:42
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人