weixin_43869982的博客

原创 手写实现一个new？

【代码】手写实现一个new？

原创 mac本地服务器？

【代码】mac本地服务器？

原创 ts装饰器？

1、类装饰器(用于为类新增、更改属性和方法)

原创 js树形结构数据过滤？

js菜单树形结构数据过滤

原创 gitlab覆盖远程代码？

// 查看本地仓库配置git config --local --list// 如果有本地与远程关联，保留(多仓库关联)/不保留，看实际需要// 此处我选择不保留，即单仓库关联git remote remove origin// 添加本地仓库与远程仓库关联git remote add origin XXX.git// 强制推送到远程仓库，且覆盖远程代码库git push -f --set-upstream origin master:master...

原创 JS和JSX的区别?

JSX，所以webpack的作用就是把SCSS转换成CSS，把JSX转换成JS，然后在浏览器正常使用。2.js就是本身react里面的jsx（也就是在JS文件里面直接写HTML那种），现在他们可以直接写是因为编辑器可以选择语言的解析模式。3.jsx文件会自动触发编辑器以jsx的模式解析当前的文件，所以可以更不会出错。jsx语法是在js代码里直接写XML的语法，每一个XML标签都会被JSX转换工具转换成纯JS代码，使用JSX可以使组件的结构和组件之间的关系看上去更加清晰。...

转载 react 严格模式控制台调用两次问题？

转载 继承的几种方式？

https://www.cnblogs.com/loving0606/p/14086787.html

原创 数组根据条件分组？

function arrayGroupBy(list, groupId){ function groupBy(array, f){ const groups = {} array.forEach(function (o) { const group = JSON.stringify(f(o)) groups[group] = groups[group] || [] groups[group].push(o)

原创 CSS 伪类和伪元素的区别？

伪类： :focus、:hover、:active伪元素：:before、:after伪类是一个元素的特定状态下的选择器，由于状态是变化的，所以当它处于某种状态是可能使用了某个样式，当它改变状态时又删除了这个样式。它不像id、class等静态选择器是永久选中的。伪元素本质上是创建了一个有内容的虚拟容器；CSS3中伪类和伪元素的语法不同；（css3中，伪元素写法需要2个点）...

原创 判断一个函数是函数？

1、typeof 缺点就是当判断对象为null时，无法区分是null还是object2、Object.prototype.toString.call()

转载 vue-cli 2.x 多环境打包配置，根据打包命令生成不同的打包文件名

1.配置package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "li

原创 【无标题】

css1、box-sizingjs1、深拷贝和浅拷贝2、如何深拷贝3、页面从输入url到页面加载完成经历了那几步4、forEach、map、fileter的区别5、原型和原型链6、reducearray.reduce((pre, cur, index, arr)=>{…}, init);pre: 必需。上一次计算结束后的返回值。cur： 必需。当前元素。index： 可选。当前元素的索引。arr： 可选。当前元素所属的数组对象。init: 可选。传递给函数的初始值，相当

原创 box-sizing？

用来设置盒模型计算方式1、context-box 谷歌浏览器盒模型的计算方式，元素的width是从context算起，不包含padding和border，元素的实际宽高=context+padding+border，所以设置padding和border会使元素宽高变大2、border-box ie浏览器盒模型计算方式，元素的width是从border算起，包含padding和border，所以设置paidding和border会向内填充，不会改变元素大小...

原创 js下载流文件？

export default function(content, fileName) { const blob = new Blob([content]); const a = document.createElement("a"); const url = window.URL.createObjectURL(blob); const filename = fileName; a.href = url; a.download = filename; a.click(); .

原创 vue computed里的this指针？

1、使用箭头函数时，指向a computed:{ previewImgList:()=>{ console.log(this) } }, ![在这里插入图片描述](https://img-blog.csdnimg.cn/b135fbd0d50f4349baafc7c2e15ac5a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q

原创 es6的咱开运算符是深拷贝还是浅拷贝？

两种情况1、若内部元素为普通数据类型为深拷贝 let arr = [1,2,3,4] let arr2 = [...arr] arr[0] = '修改' console.log(arr) //['修改', 2, 3, 4] console.log(arr2) //[1, 2, 3, 4]2、若内部元素为复杂数据类型为浅拷贝 let arr = [ {

原创 vue和react循环中加key的用途？

1、通过添加key可以优化列表，在DOM更新时从而使内部diff算法更高效

原创 react同步更新state的方法？

1、定时器的方式 onChange(){ setTimeout(()=>{ this.setState({ name:'你好你还原' }) console.log(this.state) },0) }2、使用原生事件 componentDidMount(){ document.getElementById('btn').ad

原创 如何获取setState更新后的数据？

两种方式：1、通过回调的方式获取 this.setState({ name:'你好你还原' },()=>{ console.log(this.state.name) //你好你还原 })2、通过生命周期的方式 componentDidUpdate(){ console.log(this.state) }...

原创 React 中 setState() 为什么是异步的？

1、setState执行过程是复杂的，大致过程为更新state、创建虚拟dom、diff算法对比差异最终渲染新的UI。若为同步执行，每次更新这一过程都会重新执行一次，无疑会造成性能问题。异步更新会将多个异步合并成一次，这样设计较为合理。2、如果同步更新，render函数并没有重新执行，那么就会造成state和props数据不一致。...

原创 react通过context传值？

1、创建context对象 const UserContext = React.createContext({ name:'章三' })2、使用UserContext.Provider包含要使用数据的组件 <UserContext.Provider value={this.state}> <Footer /> </UserContext.Provider>3、给类组件的context赋值 cla

原创 类似于双碳项目的图表的兼容实现？

function resize() { var ratioX = (document.documentElement.clientWidth || document.body.clientWidth) / 1920; var ratioY = (document.documentElement.clientHeight || document.body.clientHeight) / 998; var adaptiveContainer = document.qu...

原创 关于vue表单中使用v-if、v-else-if、v-else无法表单验证的问题？

解决方案就是给每个表单加key如：<el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item label="名字" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" pro

原创 target、currentTarget的区别？

target 当前触发事件的元素currentTarget 当前绑定事件的元素

原创 好用的富文本编辑器？

wangEditor：网址

原创 react配置别名alias?

1、tsconfig.json “compilerOptions”对象里加入如下 "baseUrl": "src", // 工作根目录 "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样 "@/*": ["./*"] },2、webpack.config.js 搜索alias，对象里加入如下（我加入了多个，你可以写一个） '@': path.resolve(__dirname, '

原创 ts用法？

一、基本使用1、interface 接口用来声明一个注解 interface Person { firstName: string; lastName: string; }2、枚举类型【enum】 const dianji =()=>{ enum Status { Red = '结婚了', Blue = '没结婚', Pink = '离婚了', } let a: Status = Stat

原创 关于react引入less报错的问题？

那是因为less版本太高，改成这个版本"less-loader": “^5.0.0”,cnpm install less-loader@5.0.0 -S

原创 react 启动报错？

在根目录创建个.env 文件， 加入这段代码即可SKIP_PREFLIGHT_CHECK=true

转载 svg-sprite-loader 使用教程?

https://www.jianshu.com/p/70f9c9268c83

转载 判断2个对象中的值的大小?

let arr = [{a: 1, b: '东边'}, {a: 2, b: '南边'}];// 比较最小值const min = Math.min.apply(Math, arr.map(ele=>{return ele.a})); // 1// 比较最大值const max = Math.max.apply(Math, arr.map(ele=>{return ele.a})); // 2

原创 原型和原型链？

原型：在javascript中，每个函数都有一个prototype，它是一个指针，指向该函数的原型对象，我们可以在prototype上定义公共的属性和方法，这些属性和方法相对于该函数的实例化对象都是可见的。原型链：首先要了解__proto__，__proto__是对象独有的属性，他指向该对象的原型，获取这个对象的属性或方法，如能直接拿到则返回，若拿不到会向该对象的__proto__上查找（也就是父级）,一直到Object,这种链式查找关系就是原型链...

原创 __proto__和prototype的区别

一个建议，将这部分内容放在开头，会更容易让人读懂：我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，然后返回undefined，再往上找就相当于在nu

原创 vue传值的几种方式？

1、父传子，用props2、子传父，用this.emit3、同级组件之间传值，先创建一个eventBus.js文件，两者同时引入，发送方用eventBus.emit3、同级组件之间传值，先创建一个eventBus.js文件，两者同时引入，发送方用eventBus.emit3、同级组件之间传值，先创建一个eventBus.js文件，两者同时引入，发送方用eventBus.emit，接收方用eventBus.on4、用vuex...

原创 阻止事件冒泡和阻止默认行为？

event.stopPropagation() 阻止事件冒泡event.preventDefault() 阻止默认行为

原创 delete？

delete删除数组某个值，数组长度不变，会将删除的值变成undefined。delete同样可以删除对象

原创 for in 和for of的区别？

1、for in遍历数组得到的是索引，for of得到的是value值2、for in遍历json得到的是key值，for of无法遍历json3、for in会遍历自定义属性，for of不会

原创 宏任务和微任务？

由于js是单线程执行，执行过程中若出现阻塞，后面代码会一直等待状态，为了优化这个问题就出现了宏任务和微任务。宏任务包括，setinteval、settimeout。微任务包括promiss、press.event。代码执行过程中若遇到settimeout、setinteval会把它加入到宏任务队列，遇到promiss会加入到微任务队列。所有微任务执行完毕开始执行宏任务。...

原创 常见的http请求状态码？

1、2开头的代表成功，如2002、3开头的代表重定向3、4开头的代表请求错误，403跨域，404找不到接口4、5开头的代表服务端错误，500