yanzi_0216-CSDN博客

原创在 React 中使用 graphQL （新手指南）

在 React 中使用 GraphQL 的新手指南

2022-10-17 00:26:03 1180

节流和防抖https://zhuanlan.zhihu.com/p/501685828我之前一度不太理解节流和防抖之间的区别，老是容易把它们混为一谈函数防抖（在上一个函数触发后的规定时间之内，再次触发函数，则会重新计时，也就是函数会被推迟触发，只有事件间隔内的最后一次触发事件才会执行）：将多次事件合并成了一个操作，本质上就是在维护一个延时器，规定在指定的时间后触发函数，但是如果在这个期间，事件被再次触发，就会取消之前的延时器从而重新计算时间，这样一来，实际上也就是只有最后一次事件才会执行。函数节

2022-06-06 21:59:19 226

原创【TypeScript】-- type 与 interface 的区别

type 与 interface 的区别type（类型别名）interface（接口）继承 extends实现 implements总结（type 与 interface 的区别）参考资料type（类型别名）类型别名可以用于表示基本类型、对象类型、联合类型、泛型和元组// 基本类型type MtherString = string;// 对象类型type MyObj = { a: string; b: number; c: boolean;};// 函数类型type setPoint

2022-05-07 17:17:08 286 1

原创【TypeScript】-- implements 与 extends 的区别

implements 与 extends 的区别extends（继承）一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法接口可以继承接口或类，类只能继承类implements（实现）实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能类可以实现接口或类，一个类可以实现多个接口示例实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，

2022-05-07 16:16:08 1658 1

原创 TS中通过变量存储key值读取对象的属性值时报错（TS： 7053）

TS中通过变量存储key值读取对象的属性值时报错（TS： 7053）错误还原{ TTMap[key] } 处报错let key: number元素隐式具有 “any” 类型，因为类型为 “number” 的表达式不能用于索引类型 “{ 0: string; 1: string; 2: string; }”。在类型 “{ 0: string; 1: string; 2: string; }” 上找不到具有类型为 “number” 的参数的索引签名。ts(7053)import React fr

2022-04-21 22:24:57 8268 2

原创【手写 Promise】-- 深入理解 Promise

【手写Promise】-- 深入理解Promise在此之前，我对于 Promise 有些不求甚解，回顾了我之前写的手写Promise 这篇文章，发现其错漏百出，我直接 “呵tui！” 。在写这篇文章之前，我看了很多网上的 “手写Promise” 代码，它们大多有以下的问题：回调的代码（then 方法中的函数参数）执行位置错误。比如我之前写的那篇。（回调的代码应该存入回调队列中，在 resolve 中需要清空一次回调队列；并且在 then 方法中，Promise 状态不为 PENDING 的情况下直

2022-04-19 22:16:50 643

原创【你不知道的JS】-- 理解 try...catch...finally 语句

【你不知道的JS】-- 理解 try...catch...finally 语句finally 中的代码总是会在 try 之后执行，如果有 catch 的话则在 catch 之后执行。也可以将 finally 中的代码看作一个回调函数，即无论出现仕么情况最后定会被调用。try 代码块中没有 return 和 throw 语句时try 代码块中没有 return 和 throw 语句时，会首先执行 try 中的语句，如果在执行时抛出了错误就会被 catch 捕获并执行 catch 中的代码，最终执行 f

2022-04-16 20:30:37 340

原创一些奇奇怪怪的 JavaScript 操作

一些奇奇怪怪的 JavaScript 操作在什么条件下if (a == 2 && a == 3) {}是成立的？先看一个奇怪的例子：// 重写 number 类型数据的 value0f 方法Number.prototype.value0f = function() { return 3 };new Number( 2 ) == 3; // true （！！！）2 == 3不会有这种问题，因为2和3都是数字基本类型值，不会调用 Number.prototype.value0

2022-04-16 19:53:48 1035 2

原创对象的 valueOf 方法

对象的 valueOf 方法Object.prototype.valueOf()该方法返回指定对象的原始值，若对象没有原始值，则将返回对象本身。通常由 JavaScript 内部调用，而不是在代码中显式调用。当遇到需要使用预期的原始值的对象时（比如对象的强制类型转换），JavaScript 会自动调用它。不同类型对象的 valueOf() 方法的返回值对象返回值Number数字的基本类型值Boolean基本类型布尔值String基本类型字符串RegExp

2022-04-16 16:48:42 1254

原创【你不知道的JS】-- 复习对象

【你不知道的JS】-- 复习对象一、对象二、类三、原型四、行为委托一、对象字面量和对应形式的对象之间的区别为什么像字符串字面量和数字字面量这些基础类型的值却能够访问属性和方法呢？实际上，例如访问字符串字面量上的属性和方法时，引擎会自动把字面量转换成String对象，比如把 'I am girl' 转换成 new String('I am girl')。可计算属性名ES6增加了可计算属性名，可以在对象字面量中使用 [] 包裹一个表达式来当做属性名。深拷贝深拷贝比较容易实现基本类型数据

2022-04-14 17:43:33 230

原创【你不知道的JS】-- 理解闭包

【你不知道的JS】-- 理解闭包一、什么是闭包二、模块一、什么是闭包什么情况下会产生闭包？当函数被传递到当前词法作用域之外的作用域中被调用时，它都会持有原始定义作用域的引用，这时就产生了闭包。什么是闭包？函数在函数定义时的词法作用域外被使用时，它持有的函数定义时的词法作用域的引用，就叫做闭包。来看几类常见的闭包（并学会辨析它们）// 将函数作为返回值进行传递function foo() { var a = 2; function bar() { console.log(a); }

2022-04-12 17:15:09 317

原创【你不知道的JS】-- 理解作用域

【你不知道的JS】-- 理解‘作用域’一、什么是作用域二、词法作用域三、函数作用域和块作用域函数作用域块作用域四、提升参考资料一、什么是作用域作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用LHS查询；如果目的是获取变量的值，就会使用RHS查询。LHS 和 RHS 都会从当前执行的作用域中开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，直至抵达全局作用域（顶层），无论找没找到都会停止。不成功的 RHS 会导致抛出 Reference

2022-04-10 19:49:47 744

原创【你不知道的JS】-- 理解 this

【你不知道的JS】-- 理解 this一、为什么要用 this二、对于 this 的两个误区三、this 到底是什么四、this 的绑定规则五、this 绑定规则的例外六、特殊的箭头函数参考资料一、为什么要用 this便于隐式‘传递’一个对象的引用二、对于 this 的两个误区this 指向自身this 指向它的作用域function foo() { var a = 2; this.bar(); // 这里用 this.bar() 或 bar() 都一样}function bar()

2022-04-09 21:38:46 1169

转载 Restful 理解及设计指南

Restful 理解及设计指南https://zhuanlan.zhihu.com/p/30396391http://www.ruanyifeng.com/blog/2014/05/restful_api.html

2021-12-24 21:05:33 103

原创 webpack 5 笔记（上）

webpack 5 笔记（上）webpack 的作用webpack 五个核心概念webpack 初始化初始配置打包编译开发环境配置打包样式资源 + html 文件打包图片资源打包其他资源devServer开发环境配置总结生产环境配置css 文件处理提取 css 成单独文件css 兼容性处理css 压缩js 文件处理eslint 语法检查js 文件的浏览器兼容性处理js 文件和 html 文件压缩生产环境基本配置性能优化开发环境性能优化优化打包构建速度：HMR （是基于 devSever 的）优化代码调试：s

2021-11-25 15:58:19 210

转载 git commit 规范

git commit 规范目的commit message格式type(必须)scope(可选)subject(必须)git hooks转载自 https://zhuanlan.zhihu.com/p/182553920mark 一下，方便查看目的git commit 规范的主要目的是为了规范化 commit 格式，使每次的 commit 清晰指明本次提交的目的、备注信息以及影响范围。commit message格式<type>(<scope>): <subje

2021-11-19 16:42:23 1096

转载 vue 嵌套父子组件的生命周期执行顺序

vue 嵌套父子组件的生命周期执行顺序https://blog.csdn.net/qyl_0316/article/details/107505447

2021-09-12 15:34:33 285

原创 eslint 脚本格式化代码规范

eslint 脚本格式化代码规范在 .eslintrc 文件中配置 eslint 规则例如设置 jsx 中的属性值全部使用双引号而不是单引号 "jsx-quotes": ["error", "prefer-double"]在 package.json 中添加一个脚本语句，并在其中指明需要进行格式化的文件 "eslint": "eslint --fix ./packages/admin-express/src/components/**/*.tsx"执行这个 eslint 脚本： yarn

2021-04-08 12:45:17 487

原创 react hooks 中的“闭包陷阱”

react hooks 中的“闭包陷阱”问题描述开发当中遇到了一个问题，当在 useEffect 中使用 setInterval 定时器时，定时器的函数参数中使用到的 state 无法获取到最新的状态。看代码：function ADD（）{ const [count, setCount] = useState(1); const fn = () => { setInterval(() => { console.log(count); }, 1000); }; useE

2021-03-31 14:52:50 2941

原创 TS 中的 keyof 和 typeof 操作符

TS 中的 keyof 和 typeof 操作符TypeScript keyof 操作符使用object(key)获取对象属性时报错keyofkeyof 用于遍历某种类型的属性（可以操作接口、类以及基本数据类型）在 TS 中定义一个获取函数属性的函数如下：function prop(obj: object, key: string) { return obj[key];}在上面代码中，为了避免调用 prop 函数时传入错误的参数类型，我们为 obj 和 key 参数设置了类型，分别为

2021-03-25 16:53:14 12824

原创理解react hook中 useCallback 和 useMemo 的区别以及应用场景

理解react hook中useCallback和useMemo的区别以及应用场景彻底理解 React hook useCallback和useMemo的区别useCallback ：场景：父组件中有状态 A 、状态 B ，函数 C（函数 C 中只使用到了状态 B），父组件需要将函数 C 传递给子组件使用。不使用 useCallback 的情况（子组件使用 memo() 函数进行优化）：父组件中的状态 A 发生了改变，导致父组件重新渲染，虽然子组件状态没有改变，使用到的父组件传递过来的函数

2021-03-25 14:53:49 1158

原创使用展开运算符拷贝对象

使用展开运算符拷贝对象展开运算符可用于具有 iterator 接口（可遍历数据类型）的数据的展开，比如展开数组而想要使用展开运算法展开一个 Object 对象类型是会报错的（但是在 React 中使用展开运算法展开一个对象，经过 babel 编译之后，是可以成功使用展开运算符展开一个对象的。但是这种方法仅适用于标签的属性传递，不能直接在 JS 语句中使用进行使用）但是可以通过花括号包裹的方式实现对一个对象字面量的浅拷贝//构造字面量对象时使用展开语法 let person = {name:'to

2021-02-01 10:41:37 761

原创 JS 中 event.target 与 event.currentTarget 的区别

JS 中 event.target 与 event.currentTarget 的区别event.target 返回触发事件的元素（在点击事件中，就相当于被你点击的那个元素对象）event.currentTarget 返回绑定事件的元素，即事件的委托对象（绑定了事件处理函数的元素）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</titl

2021-01-31 21:00:24 315

原创 2021字节跳动前端实习面经

字节跳动面经一面面试时间：2021-1-7 14:30 - 15:50二面面试时间：2021-1-7 16:00 - 16:40三面面试时间：2021-1-18 18:00 - 19:00HR 面时间：2021-1-20 17:30一面自我介绍CSS部分第一个问题：display 有哪几种用法display: none; 的作用是什么，有什么效果。与 visibility: visible; 的区别是什么flex 的用过没有，写一个左栏定宽，中、右两栏等宽的布局上述代码中 fle

2021-01-30 20:58:51 2788 1

原创高频面试题之this指向问题

高频面试题之this指向问题想要理解this，你可以先记住以下三点：1：this永远指向一个对象；2：this的指向完全取决于函数调用的位置；3：立即执行函数中的this指向window。先来看几道题目题目一被 let 声明的变量不会作为全局对象 window 的属性，而被 var 声明的变量却可以所以题目中全局中的 length 变量必须用 var 声明后续才可以使用，否则会出现新的情况，后续题目五会涉及到var length = 10function fn() { retur

2021-01-15 18:01:54 962 1

原创 JS 中 bind 函数连续调用的问题

JS 中 bind 函数连续调用的问题let a = 'a-window'const o = { a: 'a-o'}const c = { a: 'a-c'}function test() { console.log(this.a)}test.bind(o).bind(c)()上述执行结果是 ‘a-o’ 而不是 ‘a-c’原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / app

2021-01-14 21:26:24 964

原创理解浏览器事件循环 event loop

理解浏览时事件循环 event loop浏览器事件循环机制浏览器事件循环机制：js任务分为同步任务和异步任务，同步任务会直接进入 js 主线程执行，形成一个执行栈，当前一个任务执行完，后一个任务才会执行。异步任务不直接进入主线程，它会先在Event Table中注册回调函数，然后进入任务队列中，等执行栈中为空后，任务队列中的函数就会进入主线程中执行。宏任务：script(整体代码)，setTimeout，setInterval，ie支持的setImmediate，MessageChannel，

2021-01-14 21:11:27 99

原创理解发布订阅模式

理解发布订阅模式

2021-01-14 19:52:15 222

原创原生AJAX

原生AJAX发送 post 请求var xhr = new XMLHttpRequest()// open 方法的第一个参数的作用就是设置请求的 methodxhr.open('POST', './add.php')// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据xhr.setRequestHeader('Content‐Type', 'applic

2021-01-14 15:52:56 93

原创赛马+火车运煤+过桥+倒水+抛硬币

经典智力题–赛马+火车运煤+过桥+倒水+抛硬币赛马题一共有25匹马，有一个赛场，赛场有5个赛道，就是说最多同时可以有5匹马一起比赛。假设每匹马都跑的很稳定，不用任何其他工具，只通过马与马之间的比赛，试问，最少得比多少场才能知道跑得最快的5匹马？(1) 首先将25匹马分成5组，并分别进行5场比赛之后得到的名次排列如下：A组： [A1 A2 A3 A4 A5]B组： [B1 B2 B3 B4 B5]C组： [C1 C2 C3 C4 C5]D组： [D1 D2

2021-01-11 20:19:39 152

原创防抖和节流

防抖和节流https://www.jianshu.com/p/c8b86b09daf0https://www.cnblogs.com/coco1s/p/5499469.htmlhttps://blog.csdn.net/hupian1989/article/details/80920324防抖（Debouncing）防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。// 简单的防抖动函数function debounce(func, wait, imme

2021-01-06 22:11:36 85

原创牛客刷题按行读取输入数据

牛客刷题按行读取输入数据获取输入（注意：readline得到的是字符串，本例需要转化为数字）while(line=readline()){var lines = line.split(’ '); //字符串转换为字符数组var a = parseInt(lines[0]);var b = parseInt(lines[1]);print(a+b);}当然如果是函数的话，也可以像下面这样while(line=readline()){var lines = line.split(’ ')

2021-01-06 20:49:49 789

原创为vue项目网站设置ioc小图标遇到的问题

为vue项目网站设置ioc小图标遇到的问题步骤1，将 favicon.ico 图标文件放在src目录下（我这是为了将其与index.html文件放在同一文件夹下，其实也可以放在src/images文件夹下）2，在 index.html 文件中引入 ico 图标<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport

2020-12-29 17:57:11 362

转载 Vue中监听键盘事件（包括在第三方库中的使用）

Vue中监听键盘事件（包括在第三方库中的使用）https://blog.csdn.net/xiaxiangyun/article/details/80404768

2020-12-04 15:12:20 317

原创 git出现Permission denied的解决办法

git出现Permission denied的解决办法问题描述1，在 master 分支的基础下创建了一个新的分支 log ，并且在新的分支上添加了两个新的文件 file1 和 file2，然后对修改进行了 commit 。2，接下来我想要将 log 分支合并到主分支 master 上，但是当我执行切换分支的命令 git checkout master 时，报错 fatal: cannot create directory at 'src/utils/animo': Permission deni

2020-12-02 09:47:47 18891

空空如也

空空如也