wingchiehpih的博客

React-HOOKS常用知识点总结.md文章目录React-HOOKS常用知识点总结.md1、类组件与函数组件的区别2、HOOK使用原则3、useState4、useEffect5、useContext6、useReducer7、userCallbcak8、useMemo9、useRef10、useImperativeHandle11、useLayoutEffect12、自定义hook1、类组件与函数组件的区别类组件：可以定义自己的state保存自己的内部状态有自己的生命周期，在对应的生命周

webpack-资源模块类型文章目录webpack-资源模块类型1、asset2、加载字体文件1、asset通过asset 不需要额外安装loader在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；资源模块类型(asset module type)，通过添加4 种新的模块类型，来替

webpack-处理图片等其他资源文章目录webpack-处理图片等其他资源1、file-loader2、url-loader1、file-loader处理jpg、png等格式的图片，我们也需要有对应的loader：file-loaderfile-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；安装：npm install file-loader -D引入图片资源方式：require("../img/ali.png

Webpack初识–常用loader文章目录Webpack初识--常用loader1、背景2、webpack与cli3、webpack1、webpack依赖2、配置入口和出口4、loader1、概念2、css-loader1、安装2、使用方案3、处理less4、处理scss5、postcss1、postcss的作用：2、使用postcss6、browserslist1、背景开发中存在的问题开发过程中需要通过模块化开发部分高级特性，比如ES6，less、scss等开发过程中，希望监听文件实时变化

Webpack初识–常用loader1、背景开发中存在的问题开发过程中需要通过模块化开发部分高级特性，比如ES6，less、scss等开发过程中，希望监听文件实时变化并反应到浏览器中开发完成后需要对代码进行压缩合并等优化操作webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；模块化mo

初识数据结构与算法1、栈stack1、基本概念栈是一种遵从后进先出原则的有序集合添加新元素的一端叫做栈顶，另一端称为栈底操作栈的元素时，只能从栈顶操作（添加、移除或取值）2、栈的实现push：入栈方法pop：出栈方法top：获取栈顶size：获取栈的元素个数clear：清空栈// push的实现class Stack { constructor() { // 存储栈的数据 this.data = {}; // 记录栈的数据个数（相当于数组的 le

深拷贝函数1、深拷贝基础对象赋值的三种方式引用赋值：指向同一个对象，相互之间会影响；浅拷贝：浅层的拷贝，内部引入对象时，依然会相互影响；深拷贝：两个对象不再有任何关系，不会相互影响；实现深拷贝的方式：通过JSON序列化但是会存在bug对函数、Symbol等无法处理如果存在对象循环引用，会报错自定义深拷贝函数实现深拷贝基本功能对Symbol的key做处理对其他数据类型的值进行处理：数组、函数、Symbol、Set、Map对循环引用做处理2、基本实现//

手写防抖和节流函数文章目录手写防抖和节流函数1、防抖函数1、函数防抖2、应用场景3、防抖案例1、第三方库2、手写2、节流函数1、函数节流2、应用场景3、节流案例1、第三方库2、手写1、防抖函数1、函数防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。关键点：事件在n秒内再次触发，则重新计时。直到n秒后不再触发，再执行回调防抖相当于做了一次延迟2、应用场景频繁输入内容、提交或搜索信息频繁点击按钮，触发某个事件监听浏览器滚动，完成特定操作用户缩放浏览器的resize事

本地存储Storage与Cookie文章目录本地存储Storage与Cookie1、Storage2、Storage常见的方法和属性3、Storage常见封装4、IndexedDB5、cookie1、StorageWebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；sessionStorage：会话存储，提供的是本次会话的存储，

JSON详解与JSON深拷贝文章目录JSON详解与JSON深拷贝1、JSON简介2、JSON基本语法3、JSON序列化4、Stringify补充5、Parse补充6、JSON序列化实现深拷贝1、JSON简介JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation（JavaScript对象符号），主要应用于JavaScript中，但是目前已经独立于编程语言，在各个编程语言中都可以使用。目

ES6——Proxy与Reflect浅析文章目录ES6——Proxy与Reflect浅析1、监听对象操作2、Proxy类1、Proxy用途2、捕捉器1、get2、set3、has4、deleteProperty5、函数捕捉器apply6、函数捕捉器construc3、Reflect对象1、基本使用2、Receiver关于ES6的proxy，先从Object.defineProperty开始了解1、监听对象操作通过属性描述符Object.defineProperty//当我们需要获取对象属性值或

ES7-ES12知识点浅析文章目录ES7-ES12知识点浅析1、ES71、Array Inculdes2、指数运算符2、ES81、Object values2、Object entries3、String Padding4、Trailing Commas5、Object Descriptors6、async和await3、ES91、Async iterators2、Object spread operators：3、Promise finally4、ES101、flat flatMap2、Object f

ES6默认参数、解构、剩余参数arguments与展开语法默认参数ES5写法//1.写起来很麻烦, 并且代码的阅读性是比较差//2.这种写法是有bugfunction foo(m, n) { m = m || 'aaa'; n = n || 'bbb'; console.log(m, n);}foo(); //aaa bbbES6写法//给函数参数提供默认值function foo(m = 'aaa', n = 'bbb') { console.log(m, n);}

JavaScript中var、let、const浅析文章目录JavaScript中var、let、const浅析基本使用var关键字let关键词const关键字作用域提升window对象添加属性块级作用域暂时性死区var、let和const选择基本使用在ES5，声明变量采用的都是var关键字，从ES6开始，新增了let、const用于声明变量和常量var关键字ES5中声明变量的一种方式var name;var age;let关键词ES6中用于声明变量不允许重复声明变量le

重学前端-JavaScript高级更新日期：11-23第一次更新：11-23第二次更新：11-24第三次更新：11-25第四次更新：11-26第五次更新：11-27第六次更新：11-281、浏览器原理1、浏览器工作原理输入服务器➡️index.html➡️遇到link标签下载css文件，遇到JavaScript标签下载JavaScript文件2、浏览器内核pGecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；Trident：微软开发，被IE4~IE

重学前端-JavaScript性能优化更新日期：11-2第一次更新：11-2第二次更新：11-31、内存管理1、内存管理开发者主动申请空间、使用空间和释放空间2、垃圾回收和常见GC算法JavaScript中的内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问到是垃圾1、JavaScript可达对象可以访问到的对象（引用、作用域链）从根出发JavaScript中的根理解为全局变量对象2、GC算法1、概念GC就是垃圾回收机制的简写GC可以找到内存中的垃圾、并释

重学前端-JavaScript异步编程文章目录重学前端-JavaScript异步编程更新日期：11-11、单线程2、同步模式与异步模式1、同步模式2、异步模式3、Promise1、链式调用2、异常处理3、静态方法4、并行执行5、执行时序4、Generator异步方案4、Generator异步方案更新日期：11-1第一次更新：11-11、单线程优点：安全简单2、同步模式与异步模式1、同步模式同步执行：依次排队执行同步任务会导致阻塞，用户页面出现卡死情况2、异步模式异步编程根基：回调函数

重学前端-函数式编程范式文章目录重学前端-函数式编程范式更新日期:10-31大前端JavaScript1、函数式编程2、高阶函数3、常用的高阶函数4、闭包5、纯函数6、柯里化1、柯里化基础1、解决硬编码问题2、Lodash中的柯里化3、柯里化案例4、Loadsh中的柯里化实现原理7、函数组合更新日期:10-31第一次更新：10-31第二次更新：11-1大前端开发方向：BFF（中间层）开发、泛客户端开发、传统Web技术的深入JavaScript1、函数式编程尽可能的重用函数2、高阶函数概

三道笔试小题目：拆解url，数组结构转树状结构，深拷贝（包括函数）1、对 url 中的 query 部分做拆解，返回一个 key - value 形式的 object使用split对字符串进行切割，再通过遍历配合数组解构可以轻松实现效果// 入参格式参考：const url = 'http://sample.com/?a=1&b=2&c=xx&d#hash';// 出参格式参考：// const result = { a: '1', b: '2', c: 'xx', d:

字符串数组转化数字数组let values = ['0', '1', '5', '10', '15', '2'];let valueArr = values.map((item) => { return Number(item);});console.log(valueArr); //[0, 1, 5, 10, 15]数字数组转化为字符串数组let strArr = valueArr.map((item) => { return String(item);});cons

演示效果使用到的第三方库：导入：xlsx.full.min.js导出：export.js<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim

一道题目带你了理解JS变量与函数提升p();var p = 3;function p() { console.log('a');}function p() { console.log('b');}p();console.log('c');运行代码，实际打印结果为b index.html:16 index.html:18 Uncaught TypeError: p is not a function inde

JS案例复习-day031、跟随鼠标的天天使<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=

JS案例复习-day021、仿新浪下拉菜单功能<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie

1、js遍历数组用逗号连接var arr = [{ name: 'Tony' }, { name: 'Echo' }]; function getTextByJs() { var str = ''; for (var i = 0; i < arr.length; i++) { str += arr[i].name + ','; } //去掉最后一个逗号(如果不需要去掉，就不用写) if (str.length &gt

JS案例复习-day011、仿注册页面输入密码判断与显示隐藏<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" cont

JavaScript高阶函数map，reduce练习案例mapreducemap// map简单用法,，实现数组乘方 const arr = ['1', '2', '3', '4']; const newArr = arr.map((item) => item * item); console.log(newArr); //(4) [1, 4, 9, 16] // map函数实现数组首字母大写规范 const arr2 = ['adam', 'L

网络请求封装3.1. 网络请求方式的选择3.2. axios的基本使用axios的安装​ npm install axios – saveaxios支持的请求方式axios(config)axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])a...

ES6语法复习定义：ES是ECMAScript的缩写，是一个制定脚本语言标准的组织学习资源地址：阮一峰大神的书1、Let和Const的区别let定义变量const定义常量let，const与var的区别let和constvar能否重复声明变量不可以可以作用域范围块作用域函数作用域let代替var的优势：局部变量不去污染全局变量let pri...