麦田里的POLO桔-CSDN博客

原创「硬核JS」一次搞懂JS运行机制 - 读后感

拨云见日、柳暗花明。看完了这篇文章，整个人唯一的感觉就是茅塞顿开。通篇的描述都可以说是深入浅出、面面俱到。强力推荐这篇文章！

2021-10-04 22:31:24 904

原创 HTTPS原理解析

原理：公钥加密数据，只能由私钥解密；私钥加密数据，只能由公钥解密。服务器同时拥有公钥、私钥，将公钥给客户端，客户端用公钥加密，加密后的数据只能由服务器的私钥解密。原理：客户端、服务端均用。对数据进行加密、解密。

2021-09-29 11:20:56 159

数组常用方法：1. join()join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)　　　　书写格式：join(" ")，括号里面写字符串("要加引号")，var arr = [1,2,3]; console.log(arr.join()); 　　　　// 1,2,3 console.log(arr.join("-")); 　　 // 1-2-3 console.log(arr); 　　　　　　　　// [1, 2, 3]（原数组不变）...

2021-05-07 20:25:41 561 4

原创原型与原型链详解

prototype：原型每一个函数都有一个prototype属性，它默认指向一个空对象。举个例子，我们来查看一下Date函数的原型：console.log(Date.prototype) // Object这就表示，Date函数的原型，是一个Object对象，这个对象身上有很多的方法，这些方法均是Object()原型给它的实例对象使用的。我们再来看一个自定义函数的原型：function fun() {}console.log( fun.prototype )...

2021-04-16 17:41:17 4294 6

原创简述TCP的三次握手和四次挥手

TCP是一种精致的，可靠的字节流协议。在TCP编程中，三路握手一般由客户端（Client）调用Connent函数发起。TCP3次握手后数据收发通道即打开（即建立了连接）。简述三路握手过程：第一次握手：Client将标志位SYN置为1，选择序号seq=x，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。第二次握手：Server收到数据包后由标...

2021-03-23 21:01:05 33896 12

原创多标签页之间的通信

解决方案、解决方案。

2023-11-18 15:38:17 1556

原创命令式编程与声明式编程的区别

可以看到，每个查询都有单独的语句，每个查询语句都相当于都是一个黑盒，无需关注黑盒内部是如何实现的，拿着语句加上必要的字段即可实现目的。对遍历行为进行封装。这是一个高度频繁使用的功能，封装过后即可不再关注这一功能细节，而是将注意力放在如何实现做乘法或者加法。有了遍历的黑盒，可以实现单独针对遍历的功能进行优化，提升遍历效率的同时，而外界又无任何感知。关注对不同行为解耦（黑盒模型，即将功能进行封装，达到使用时无需注功能内部实现的目的）一条语句拆分成了三段，其实就是对不同功能的语句进行拆分，提升复用效率。

2023-06-08 11:09:41 248

原创 TS如何解决属性在另一个类型中不存在的问题？

TS 在遇到以下这些条件语句时，会在语句的块级作用域内「收紧」变量的类型，这种类型推断的行为称作类型守卫 (Type Guard)。=、!==（这里列举常用的 4 种）类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型这里就可以通过判断 animal 中是否存在 meow 属性，来确定变量是否为 Cat 类型的对象let call;// 鼠标放到 animal 上，可以看到类型被限定为 Cat } else {

2022-12-28 23:33:54 5559 1

原创记录一个yarn dev时解决了很久的bug

✘ DylanMa@C02GD5MKMD6R  ~/Desktop/babi/vcloud-finance/packages/web   zhuoya/alarm  yarn devyarn run v1.22.18$ DEBUG=webpack* node --max_old_space_size=8192 scripts/devServer.jsprocess.env.NODE_ENV: development[HPM] Proxy created: ** -> http:/.

2022-05-18 18:37:28 817 1

原创借助 nvm 安装并使用某个版本的 node，关闭再打开控制台查看 node 版本提示 zsh: command not found

已经借助 nvm 已经安装了 node，并且使用 nvm use 使用了对应版本的 node，但是切换一个控制台，使用 node -v 查看 node 版本，提示zsh***这个问题可能是由于 default 版本与当前 use 版本不一致导致，借助命令 nvm alias default vxxx 将 dafault 切换为 nvm use 的版本，重新打开控制台打印 node 版本即可发现问题解决...

2022-05-16 16:46:11 1259

原创常见 React Hooks 的概念与使用，这一篇文章就够了

16.8 的新特性，可以实现在不编写 class 的情况下，使用 state 和其它的一些 React 特性。Redux 作者总结了 class 的几个缺点：大型组件很难拆分和重构，也很难测试业务逻辑分散在组件的各个方法之中，导致逻辑重复或逻辑关联组件类引入了复杂的编程模式，比如 render props 和高阶组件简而言之就是：class 组件比较 “重”。一、useStateuseState 用来解决函数式组件只有属性，没有状态的问题。使用方法：const [n, setN]

2022-04-07 20:27:59 2432

原创 Mobx-React 用法简述

一、是什么？一个非常简单的状态管理工具，对比 Redux，Mobx 会更容易上手，更容易理解，且编写方便。二、使用方法1. 直接借助 Javascript（不推荐）const map = observable.map({ key: "value"});map.set("key", "new value");const list = observable([1, 2, 4]);list[2] = 3;const person = observable({ firstName: "

2022-03-28 17:48:00 5692

原创单体架构、面向服务架构、微服务简单了解【微前端】

微服务属于什么？一种架构风格。软件架构大体经历了：单体架构 → 面向服务的架构(SOA) → 微服务1. 单体架构特征：单体架构是一种将所有功能打包在一个容器中运行的设计风格一个实例中继承了一个系统的所有功能通过负载均衡软件 / 设备实现多实例调用。优点：易开发、易调试、易部署缺点：可靠性差：某个模块bug可能导致会导致整个应用的崩溃。不易协同：协同开发时，版本冲突频繁。升级困难：牵一发而动全身。2. 面向服务的架构(SOA)特征：是一种分布式服务架构，将应用

2022-03-14 15:10:57 608

原创 WebSocket 与 HTTP 关联的小知识~

1.来源于出处首先，WebSocket来自H5，是H5定义的众多规范和API中的一个。HTTP协议就只有HTTP协议。2.二者的关联WebSocket协议基于TCP协议，它需要借助HTTP先建立连接，即客户端发送转换协议的请求，服务器转换协议并响应101，接下来再发送的请求/响应既是基于Websocket协议。（这学互联网的基本都知道吧~）3.WebSocket建立的是持久连接，而HTTP即使是1.1，建立的也只是长连接持久连接在连接建立后，只要不主动关闭，连接就可以始终保持。而长连接就必须依赖心

2022-03-13 19:19:26 6339

原创需求做完不知道干什么？那就写个React吧

阉割版 React - 使用文档Note: index.js 需要搭配 index.html 使用，因为存在多个版本，所以需要保证两个文件名相同！配置缘故，在 index.js 中书写 JSX，默认使用原生 React 的 createElement，尽管引入的是自己的 React，也并不会使用我们自己写的 createElement因此我们需要先去 Babel 将JSX 编译为 JS ，这里面显式地调用了 createElement ，一起看个一段写在 index.js 中的代码：render()

2022-03-03 10:36:20 828

原创不懂就问：map中使用await为什么会失效？

问题发生的场景：页面加载时，会加载一个n行的列表，列表每一行对应一组数据，一组数据由一个请求获得。我们需要将请求获取到的数据按照一定顺序显示到页面上下面先看一下数据大致的请求与存储方式：dataSource = [obj1, obj2, ...];getData = async (dataSource) => { let selectArr = []; let { title } = this.props; _.map(dataSource, (item, index)

2022-01-26 10:02:38 1957

原创 Redux-saga快速解读

首先，对于redux来说，redux-saga就是一个中间件。其次，redux-saga主要用于处理action中涉及到的一些副作用，来确保reducer始终都是一个纯函数。常规操作redux中的state，流程是这样的：UI（点击按钮） → dispatch（action）→ reducer（根据action操作state）→ store（合并reducer更新的state）→ UI更新toLoginIn: (username, password)=>{ dispatch(

2022-01-12 15:19:22 725

原创奇怪的小知识 - 如何清空一个数组？在不改变地址的情况下呢？

let arr = [1, 2, 3];不考虑地址问题：arr = [];地址不改变：// 方法一：arr.length = 0;// 方法二：for(let i in arr)( arr.pop();)// 方法三：arr.splice(0, arr.length);

2021-12-31 19:39:06 421

原创二叉树的广度优先遍历

二叉树的广度优先遍历：从根节点开始，一层一层遍历二叉树，自左向右地打印每一个节点思路：先创建一个数组，用数组模拟队列。压入根节点，然后开始遍历：从数组头弹出一个元素，然后看数组let arr = [];function getRes(node){ if(node){ console.log( node.val ); arr.push(node); } while(arr.length > 0){ let.

2021-12-04 14:44:11 2193

原创一道题，就能让你完美地掌握：this指向、作用域&作用域链、闭包、特殊数据类型

inner = 'window';function say() { console.log(inner); console.log(this.inner);}var obj1 = (function() { var inner = '1-1'; return { inner: '1-2', say: function() { console.log(inner); console.log(.

2021-12-03 20:22:31 960

原创手写发布订阅器

发布订阅器的基本实现其实非常简单，核心思路就是维护一个对象，对象的key、value分别表示事件及其对应的回调函数数组。然后可以通过暴露的方法去清除事件对应的回调，也可以通过方法去触发事件对应的回调。属性：消息队列{ "click": [fn1, fn2, fn3], "abc": [fnA, fnB]}/*能向消息队列里添加内容 on删除消息队列中的内容 off触发消息队列内的内容 emit*/class Observer { constructor()

2021-11-29 11:24:03 188

转载递归调用栈溢出问题分析与解决

文章出自：递归调用栈溢出问题分析与解决 - 灰信网（软件开发博客聚合）https://www.freesion.com/article/59181236995/本文主要是相对做一个保存，主要是因为文章所在的网站本人没有注册账号，再去注册一个就实在是太多了，原文排版还是很不错的，大家可以直接通过上面的连接查看原文问题模拟让递归爆栈还是很简单的，例如如下代码就能轻而易举实现// 故意来一次爆栈体验function stackOverflow(){ stackOverflow();.

2021-11-28 18:19:20 3352

原创 Promise、async、await

我们都知道，JavaScript是一门单线程的编程语言，但是在单线程中进行异步编程，可以有很多多线程所不具备的优点。由于所有的操作都运行在同一个线程中，因此我们无需考虑线程同步、资源竞争的问题。并且可以从源头上避免线程的切换，从而降低线程自身的开销。但是它也会伴随着一些问题，假如我们有这样一种需求：我们需要在定时器内添加定时器，代码就是这样的：如果我们还需要在内部嵌套很多定时器，随即就会产生一个回调地狱，这种代码的可读性非常差，以至于我们在分析这样的代码时，需要额外花费很多的事件去分析代码的逻.

2021-11-28 17:58:37 342

原创 JS中绑定this的四种方式

let car = { type: 'truck', size: 'big', description: function(){ console.log( "The Car is ", car.type , ". And the size is ", car.size, "." ); }}这里面多次出现了car.***，语句上显得十分冗余，我们可以借助this来简化代码：let car = { type: 'truck', size: 'bi.

2021-11-19 18:18:26 657

原创暑期实习总结

刚入职：学习TS遇到的问题：1. 在指定返回值为void时，如果设定了返回值，结果会怎么样？答案是：会报错，只要我们对函数设定的返回值类型与return 的类型不一致，就会报错function abc(a: number, b: number): number{}let m: number = abc(1, 2);function abc(a: number, b: number): void{ return a+b;}let m: number = abc(1, 2);

2021-11-19 11:36:15 486

原创 React + TS 完成 TodoList

整体结构：根据项目的层级结构，将项目分为上下两个组件，一个是输入组件Input，一个是展示组件ListTodoList Input List 首先，我们分析一下最外层的App.tsximport React from 'react';import TodoList from './components/TodoList';function App() { return ( <div className="App"> &l...

2021-11-09 21:19:28 1091 1

原创笔试题总结

1. HTTP 在一次请求完成后就会断开连接？这句话很明显是错误的。HTTP先后有多个版本，只有在HTTP/1.0及之前的版本中，无法建立保持连接状态。HTTP各版本特点总结_拯救世界的光太郎-CSDN博客HTTP 0.9特点：只有一个请求行；服务器仅返回数据，没有响应头。瓶颈：仅支持HTML，无法传输其他类型文件；文件编码格式过少，仅局限于ASCII。HTTP 1.0特点：引入请求头和响应头（数据类型、语言版本、编码类型、用户代理）；数据压缩；引入状态码；提供了Cache缓存机制（head里的缓存

2021-11-05 20:35:22 138

原创牛客 & 赛码网编程题JavaScript的输入输出

1. 获取输入：readline()2. 打印输出：print()2. 分隔多个输入：split(' ')let line = '';while(line = readline()){ var lines = line.split(' '); print('一次循环：') for(let i of lines){ print(i); } print('----------------')}...

2021-11-02 16:34:13 2078

原创一篇文章，带你快速回顾： Vue 面试题的关键知识点

一、1. 插值语法<template> <div id="app"> {{ name }}  </div></template><script>export default { data () { return { name: '弼马温' } }}</script><style></styl

2021-11-02 11:29:00 284

原创 LeedCode＜简单＞144. 二叉树的前序遍历（Morris 遍历）

题目描述：给你二叉树的根节点 root ，返回它节点值的前序遍历。示例 1：输入：root = [1,null,2,3]输出：[1,2,3]示例 2：输入：root = []输出：[]示例 3：输入：root = [1]输出：[1]示例 4：输入：root = [1,2]输出：[1,2]示例 5：输入：root = [1,null,2]输出：[1,2]一般的前序遍历大家基本上都知道，下面这个方法还是挺有意思的M...

2021-10-29 20:20:18 103

原创 LeedCode＜简单＞141. 环形链表（高效的 “龟兔赛跑算法”）

题目描述：给定一个链表，判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。如果 pos 是 -1，则在该链表中没有环。注意：pos 不作为参数进行传递，仅仅是为了标识链表的实际情况。如果链表中存在环，则返回 true 。否则，返回 false 。进阶：你能用 O(1)（即，常量）内存解决此问题吗？示例 1：输入：head

2021-10-28 21:20:49 83

原创笔试题总结

1. display属性值：（让判断几个值，那个是display的属性值，考的不常见的）none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS

2021-10-27 21:21:46 92

原创 LeedCode＜简单＞136. 只出现一次的数字（至简的异或^ 运算符）

题目描述：给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度。你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例2:输入: [4,1,2,1,2]输出: 4常规的方法有很多，但是用“异或 ^”来解决这道题，真的！太强大了！1 ^ 0 = 1、1 ^ 1 = 0、0 ^ 0 = 0、0 ^ 1 = 1简单来讲，就是相同为假，不同为真。真正.

2021-10-25 20:29:06 66

原创 LeedCode＜简单＞121. 买卖股票的最佳时机

题目描述：给定一个数组 prices ，它的第i 个元素prices[i] 表示一支给定股票第 i 天的价格。你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获取的最大利润。返回你可以从这笔交易中获取的最大利润。如果你不能获取任何利润，返回 0 。示例 1：输入：[7,1,5,3,6,4]输出：5解释：在第 2 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5 。...

2021-10-25 16:06:48 52

原创 LeedCode＜简单＞112. 路径总和

题目描述：给你二叉树的根节点root 和一个表示目标和的整数targetSum ，判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和targetSum 。叶子节点是指没有子节点的节点。示例 1：输入：root = [5,4,8,11,null,13,4,7,2,null,null,null,1], targetSum = 22输出：truefunction hasPathSum(root: TreeNode | null, targetSum:...

2021-10-24 22:56:47 149

原创 LeedCode＜简单＞111. 二叉树的最小深度

题目描述：给定一个二叉树，找出其最小深度。最小深度是从根节点到最近叶子节点的最短路径上的节点数量。说明：叶子节点是指没有子节点的节点。示例 1：输入：root = [3,9,20,null,null,15,7]输出：2示例 2：输入：root = [2,null,3,null,4,null,5,null,6]输出：5对递归的理解还是不够透彻，下文还是个人的思路分析【完全不建议参考，递归的学习过程心路历程会发生很多质的变化，想要学习递归，更应该看一个可以将其使用非常熟

2021-10-24 17:59:17 105

原创防抖节流代码分析

代码出处：【前端性能】高性能滚动 scroll 及页面渲染优化// 防抖动函数function debounce(func, wait, immediate) { var timeout; // ① return function() { // ② var context = this, args = arguments; // ③ var later = function() { /

2021-10-22 18:40:55 642

原创手搓 call、apply，“函数柯里化” + “圣杯模式继承” 实现 bind

一、call在开始手写 call 之前，我们先来回忆一下 call 的用法。举个简单的例子：function person(){ console.log(this.name);}let hero= { name: '迪迦'}person.call(hreo); // 迪迦可以看到，其作用就是将传入的对象绑定到 this 身上，然后就可以在函数中操作对象的属性了。简单来说，call 就是修改 this 指向的。我们换一种思考方式，call 的作用就好像在对象中加了

2021-10-18 16:08:34 169

原创 JS “DOM 分级” 与 “DOM 事件模型”

查了很多文章，都没有把这两个概念做一个系统的区分。这两个概念究竟有什么联系，也都没有一篇文章能够解释请求，其实标题为“DOM 分级”的文章网上一扒一大堆，可内容却都讲“DOM 事件模型”，不知道这些人自己有没有搞明白这两个概念。首先，DOM分级有四级：DOM0级、DOM1级、DOM2级、DOM3级DOM事件模型有三个：DOM0级提出的DOM0级模型、DOM2级提出的DOM2级模型、IE事件模型DOM0级提出了原始的事件模型；但DOM1级没有定义事件相关的内容，仅仅是定义了HTML和XML

2021-10-11 15:55:25 458

原创 Ajax、axios、fetch 用法、区别，跨域问题

XML（可扩展标记语言）Ajax最开始向服务器请求数据，数据格式就是XML，客户端接收到数据，提取后处理数据。但是现在使用的数据格式一般都是JSON，相较于XML来说，数据更加简洁，并且数据的转换也更加的容易，可以借助JSON的API快速将JSON数据转化成js对象，灵活度远胜于HTML。同样是标记语言，XML一般是用来保存、存储、传输数据，HTML则是用来向网页中呈现数据HTML内都是一些预定义标签，XML中没有预定义标签Ajax优点：在网页不刷新的情况下，向服务器发送ht

2021-10-08 11:46:18 805