- 博客(124)
- 收藏
- 关注
RSS订阅原创 记忆化dfs、dp与javascript计算精度的问题
记忆化dfs、dp与javascript计算精度的问题解法动态规划记忆化dfs关于javascript计算精度1. JS没有int型限制，为什么在计算过程中每一次都要严格保证这个上限呢？2. 为什么取模的时候要对加数也取模？一个槽点网易2021校招笔试-前端开发工程师(正式第二批）有这么一道题：来源：牛客网已知摩尔斯电码和字符映射关系如下：A -> 0B -> 1C -> 10D -> 11E -> 100F -> 101G -> 110H
2021-08-31 10:07:21
296
原创 二分查找的细节
二分查找的细节二分查找原理很简单，就是在一个已经排好序(或者分段排好序)的数组中用O(logn)的时间复杂度找到目标值，实现如下:function findTarget(nums:number[], target:number): number{ if(nums.length <= 1) return nums[0] === target ? 0 : -1; let left = 0, right = nums.length - 1; // 目标数组的首尾 while(left < r
2021-07-17 18:09:52
284
原创 webpack从0开始初始化搭建一个React17 + TS项目
webpack从0开始初始化搭建一个React17 + TS项目1. package.json2. webpack.config.js2.1 入口文件2.2 CDN引入依赖2.3 TS解决方案2.4 样式解决方案2.4.1 模块化解决方案2.4.2 自定义antd的样式变量2.4.3 全局变量管理快速初始化搭建一个react项目，可以使用React官方的create-react-app，也可以使用一些封装好的脚手架比如阿里的飞冰ice。但是这些方法想要进行定制化配置需要费一些周折（比如create-rea
2021-07-12 16:38:03
1122
原创 antd-vue树形控件实现默认展开全部节点
antd-vue树形控件实现默认展开全部节点背景分析解决方案树形控件官方文档版本信息： "vue"："2.6.11" "ant-design-vue": "1.7.0" "vuex": "3.1.1"背景在做项目的时候遇到需要默认选中和展开所有节点的需求。自动选中所有节点a-tree的v-model默认就是checkedKeys，因此默认选中所有节点(父节点和子节点)，只要在created周期钩子里将checkedKeys初始化成所有子节点就好了。自动展开所有节点：defaultE
2021-03-19 15:07:53
11132
原创 JS踩坑笔记
JS踩坑笔记1. for...in 遍历数组的“下标”2. for...in今天做题的时候遇到两个坑，虽然很简答，但是mark一下 ：1. for…in 遍历数组的“下标”for…in 语句遍历的是一个对象的key，在遍历数组的时候尤其具有迷惑性：const arr = [1,2,3]for(let i in arr) { console.log(typeof i) // string}对，没看错，这遍历出来的不是0,1,2 这样的number类型的下标，而是string，为什么呢？
2021-02-17 22:23:20
117
原创 图的深度优先遍历和广度优先遍历
图的深度优先遍历和广度优先遍历深度优先遍历广度优先遍历邻接表的形式表示一个图：const graph = { 0: [1,2], 1: [2], 2: [3,0], 3: [3,0]}深度优先遍历深度优先遍历就是优先遍历完一条完整路径，和树的深度优先遍历基本一样，但是需要用visited来记录遍历过的节点，以避免死循环。// 记录访问过的节点const visited = new Set()const dfs = cur => { console.log(c
2021-02-17 11:39:20
225
原创 JS中Map和Object频繁增删性能测试
JS中Map和Object频繁增删性能测试测试测试JS中的Map和Object都可以实现映射关系，它们的频繁增删性能如何呢？下面写了3个测试函数来测试： // 测试Object function testObject(maxTimes){ const obj = new Object() for(let i=0;i<maxTimes;i++){ obj[i+'a'] = i } for(let i=0;i<maxTi
2021-02-15 20:47:53
612
2
原创 JS中字面量创建基本类型和构造函数创建基本类型的区别
JS中的基本包装类型Tips1 弄清楚转型函数和构造函数的区别Tips2 尽量避免显式创建基本包装类型Tips3 自己实现instanceof时避免踩坑我们先看下面的一个例子：let a = ''console.log(a instanceof String) // falselet b = new String()console.log(b instanceof String) // true这很好理解，因为a是基本数据类型中的String，而b是String构造函数创建的一个的一个实例。但
2021-02-09 22:52:18
412
原创 【前端面试】JS中通过原型链和class语法分别实现类的继承
【前端面试】JS中通过原型链和class语法分别实现类的继承原型链实现继承一个细节ES6 class 语法实现继承JS中的类本质上是一个function类型的对象，这是JS的独特之处。原型链实现继承在ES6的class语法推出之前，要实现类的继承要通过修改原型链来实现：首先定义一个父类，本质上是定义父类的构造函数，其对应的Person.prototype会自动被创建function Person(name, age) { this.name = name this.age = age}
2021-02-09 18:31:36
400
原创 节流和防抖的理解
节流和防抖的理解防抖应用示例理解节流应用示例节流和防抖都是为了提升网页性能的技术。监听用户触发的事件往往被触发的频次较高或者需要消耗较高的性能（例如发送ajax请求查询数据库中的内容），因此需要降低事件被触发的频次。参考：节流和防抖的区别，以及如何实现防抖防抖的含义是：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。实现方式： 每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点： 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
2021-01-21 17:52:59
375
原创 手动实现拥有两个单向关联的checkbox的树形组件
手动实现拥有两个单向关联的checkbox的树形组件数据基础架构最近在做项目的时候，遇到了一个需求：如图所示，这是一个树形组件(n叉树)，父节点嵌套子节点。每个节点都有查看和编辑两个权限，分别对应两个checkbox。业务逻辑如下：如果后代节点中有一个被选中，那么祖先节点一定会被选中；而选中分为全选和半选，例如：2. 页面顶部有两个checkbox，用来控制全部的节点：3. 如果查看权限被关闭，那么编辑权限也会被置为空选且禁用。第一点都可以通过antv的树形组件几行代码轻松实现：
2021-01-11 16:15:54
607
原创 关于vue的属性不会做自动类型转换
关于vue的属性不会做自动类型转换今天做项目的时候，遇到一个问题： <a-select v-model="value" :open="value.length" >本意是当value里没有东西的时候(length === 0) 不显示下拉菜单，但是却报了这样的错误：[Vue warn]: Invalid prop: type check failed for prop “visible”. Expected Boolean, got Number
2021-01-08 14:27:42
586
原创 理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理scoped/deep/实战总结scopedvue项目一般是单页面、多组件，整个项目共用一个css样式表，有时候我们在写组件的过程中并不希望组件的样式污染全局作用域（毕竟不同组件之间重名的class很正常），因此我们会在组件的样式标签上加上scoped，例如下面这个最基本vue组件框架：<template>...</template><script>import ...export defualt
2020-12-11 23:18:52
8320
5
转载 【转载】vue项目main.js文件下import router from ‘./router‘默认导入router文件夹下index.js的原因
【转载】vue项目main.js文件下import router from './router'默认导入router文件夹下index.js的原因在vue项目文件夹下的src目录的main.js文件中，是这么引入router的：import router from './router'等效于import router from './router/index.js'这个不是vue的规定而是node加载模块的方式,当require(’./router’)(import会被转为require),n
2020-12-02 23:51:03
3649
原创 【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight测试结果讨论参考博客：https://blog.csdn.net/qq_35430000/article/details/80277587https://www.cnblogs.com/chuaWeb/p/html_css_1.html以下测试和结论均基于Chrome浏览器 86.0.4240.198 (
2020-12-02 15:30:59
673
原创 【基本概念】document / documentElement / html 和 body?
【一些概念】document / documentElement / html 和 body?document / documentElement / html 和 body?1. document2. html 和 body3.documentElementdocument / documentElement / html 和 body?1. document说到document一定要先提 DOM：document object model，翻译过来就是文档对象模型。借用 DOM 是什么？ - 果
2020-12-02 14:27:58
892
1
原创 【移动端适配】动态调整rem
【移动端适配】动态调整rem今天看项目的时候看到src/utils/adapative.js里对于移动端的rem是这样定义的：// 设计宽度const designWidth = 375// 设计字体大小const designFontSize = 16//向外输出一个获取rem具体数值的接口，以备不时之需export function getFontSize () { const { clientWidth } = document.documentElement const fo
2020-11-27 15:01:39
201
原创 记一次简单的防止页面加载过程中的抖动
记一次简单的页面防抖今天在做项目的时候遇到一个问题：一个很简单的页面，但是有一个问题：如果网速比较慢，比如说我在Chrome里模拟3G网：那么在图片加载的过程中，用户会感觉到明显的抖动，为了解决这个问题，可以在图片的外层加一个wrapper来占位：<div class="wrapper"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide> <img
2020-11-21 22:56:28
600
2
原创 vue动画特效-渐变动画和@keyframes
vue动画特效-渐变动画和@keyframes过渡原理实现@keyframes动画使用animated.css同时使用过渡和@keyframes动画今天学习vue的动画的时候，感觉机制有点繁琐，总结一下。过渡Vue里使用动画需要用到一个封装好的组件<transition>，Vue官方文档是这么介绍的：Vue 提供了 <transition>的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态
2020-11-14 17:08:33
2473
原创 栈模拟遍历二叉树前、中、后序模板
栈模拟遍历二叉树前、中、后序模板前序遍历中序遍历后序遍历用递归的方法遍历而二叉树，是深度优先搜索的一个基本应用，就像是爬格子之于动态规划，三数之和之于双指针，反转链表之于链表一样。但是用递归栈来模拟，则是一道medium甚至hard的题目，如果要保证在面试中马上需要反复练习。首先看一个模拟递归栈的模板：var traverseWithCallStack(root){ //用来模拟递归栈的数组 const stk = []; //存一下传进来的root let node = root; //
2020-11-13 17:48:42
358
原创 【滴滴日常实习-前端1轮面经】
【滴滴日常实习-1轮面经】css部分滴滴一轮面试，本来应该是线下面试的，题主出差刚回来，又熬了几天夜(苦逼土木人)，就选择了线上面试。面试官是个小姐姐，说话很和气，问的问题都比较友好，并且都是按照简历内容信手拈来地提问。介绍一下自己？css部分居中是怎么实现的？水平居中：【行内元素】：text-align : center;【块元素】：确定了大小的块元素用 margin:0 auto;【开启了绝对定位且知道元素宽度】：left:50% + margin-left: 负一半的wid
2020-11-12 23:27:21
528
1
原创 CSS中彻底搞懂盒模型、定位
CSS中彻底搞懂盒模型、定位盒模型与定位没有开启定位的情况水平方向：垂直方向：开启了绝对定位的情况水平方向：垂直方向：小结盒模型与定位CSS中的盒子模型应该不用多说了，每一个html元素都有一个盒模型，由内而外依次是：margin/border/padding/content，如果元素开启了绝对/相对定位，则最外层还要加上top/right/bottom/left。没有开启定位的情况父元素的宽度取决于子元素（子元素的盒子模型在水平方向充满父元素），任何元素都要满足下面的等式：水平方向：marg
2020-11-12 20:57:11
264
1
原创 【字节日常实习-前端凉经】
【字节日常实习-前端凉经】一轮 电话面二轮 视频面博主人生中第一次面试竟然是字节跳动，真是蚍蜉撼树哈哈。当时无心插柳随手投了一个，没想到对方不在意我的非科班身份，给了我面试机会。坐标杭州，背景是双985非科班硕士，除了肯加班一无是处。一共三轮面试，博主水平太差，在第二轮就凉凉了。在这里感谢字节给我的面试体验，我会继续努力的。总结一下两轮面试，供大家参考。一轮 电话面面试官上来先说大概十几分钟，最后被我扯到了20分钟。1. 做过什么项目？生而为非科班，我很抱歉，只有一些和前端无关的算法项目和自己
2020-11-11 00:23:31
2236
6
原创 【前端面试】手写Ajax、JQuery.ajax以及axios
【前端面试】手写Ajax、JQuery.ajax以及axios原生JS手写Ajax丐版(精简版)设置超时版promise版浏览器需要与服务器进行通信，这个过程是用ajax实现的。借用一下W3School的描述：原生JS手写Ajax丐版(精简版) //将query对象变成可以用在url里的字符串 function obj2Query(queryObj){ let temp = [] for(key in queryObj){
2020-11-09 15:22:20
241
1
原创 encodeURI 与 encodeURIComponent
encodeURI 与 encodeURIComponentencodeURI（注意是URI不是URL）encodeURIComponent（注意是URI不是URL）encodeURI 与 encodeURIComponent都是浏览器自带的方法，作用都是对URL编码，以保持URL正常被解析。参考知乎的说法：encodeURI（注意是URI不是URL）encodeURI 是解析整个 URL 的，举个例子：在百度搜索“卢本伟牛逼”我们发出的GET请求的URL本该是：https://www.b
2020-11-07 22:56:45
242
原创 【前端面试】javascript 基于事件冒泡的事件代理
【前端面试】javascript 基于事件冒泡的事件代理给单一元素绑定事件循环方式绑定事件事件代理解决问题事件捕获和事件冒泡是JS Web-API 中的一个重要内容，不清楚的童鞋可以百度一下。或者可以参考这篇博客：终于弄懂了事件冒泡和事件捕获！这里编写一个bindEvent函数，实现对事件的普通绑定和代理绑定。一个很简单的案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
2020-11-07 16:48:46
136
原创 【C++刷题笔记】函数指针与仿函数：自定义排序规则
【C++刷题笔记】函数指针与仿函数：自定义排序规则方法一：传函数指针的方式：方法二：传仿函数的方式：自带的less和greaterpriority_queue的情况C++中的sort函数性能十分强大，有时我们需要自定义排序方式，sort的第三个参数接收一个bool类型的函数指针，用来指定排序的规则。方法一：传函数指针的方式：定义一个降序函数template<typename T>bool descend(T & a, T &b) { return a > b;
2020-11-06 22:34:49
702
原创 【前端面试】javascript中手写call,apply,bind函数
javascript中手写call,apply,bind函数callapplybindcallFunction.prototype.myCall = function (context, ...args) { // if(typeof this !== 'function'){ //不需要判断类型，因为myCall定义在Function.prototype上 // throw new TypeError(`${this} is not a function!`) // }
2020-11-04 21:14:58
407
原创 【前端面试】javascript中类型判断和实现深拷贝的两种方式
javascript中类型判断和实现深拷贝的两种方式类型判断【值类型】【引用类型】深拷贝用JSON实现深拷贝通过递归实现深拷贝类型判断JS中的变量分为值类型和引用类型【值类型】包括： undefined，string，Number，Boolean，Symbol这里需要注意：string在C++中属于STL容器，在python中也属于需要deepcopy的那种，但在js里它是直接以value的形式直接存在栈空间的。#include<string>string* a = new
2020-11-04 16:04:02
237
原创 【小白读vue官方文档】vue给自定义组件设置v-model
vue给自定义组件设置v-model众所周知v-model是一个语法糖，通过v-bind实现父组件向子组件传指，通过$emit实现子组件向父组件传指，这样就完成了双向数据绑定。一个组件上的 v-model默认会利用名为 value的 prop 和名为 input的事件，但是像单选框、复选框等类型的输入控件可能会将 valueattribute 用于不同的目的。model选项可以用来避免这样的冲突：如果是原生的html元素，实例对象上有默认的value和input属性，v-model很自然地就把va
2020-11-02 19:51:14
633
2
原创 【小白读vue官方文档】vue-model给复选框绑定值
vue-model给复选框绑定值个人理解今天看vue官方文档的时候，有句话不理解：复选框<input type="checkbox" v-model="toggle" true-value="小猫" false-value="小狗">// 当选中时vm.toggle === '小猫'// 当没有选中时vm.toggle === '小狗'这里的 true-value和 false-valueattribute 并不会影响输入控件的 valueattribute，
2020-11-02 16:58:47
894
原创 【小白读vue官方文档】vue中非props属性、$attrs和禁用 Attribute 继承
vue中非props属性一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。举个例子：自定义一个test组件，并接受父组件传来的test1 test2 class style 属性，其中 test1 属性在props里被接收，并在模板中显示用$attrs显示。关于$attrs,vue的官方文档这么描述：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和 style除外)。 &
2020-11-02 11:10:07
1854
5
原创 vue中报错: Component template should contain exactly one root element
vue中报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.今天写练习的时候遇到一个问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-11-01 20:17:55
1118
原创 【小白爬Leetcode416】分割等和子集 Partition Equal Subset Sum
【小白爬Leetcode416】分割等和子集 Partition Equal Subset Sum题目解法一 暴力dfs（超时）解法二 记忆化dfs题目Leetcode538 easy\color{#7fb788}{easy}easy点击进入原题链接：把二叉搜索树转换为累加树 Convert BST to Greater Tree 解法一 暴力dfs（超时）这道题只用dfs是超时的：超时代码：class Solution {public: bool canPartition(ve
2020-10-31 22:16:21
84
原创 【小白爬Leetcode381】O(1) 时间插入、删除和获取随机元素 - 允许重复 Convert BST to Greater Tree
@[TOC](【小白爬Leetcode381】O(1) 时间插入、删除和获取随机元素 - 允许重复 Convert BST to Greater Tree)题目Leetcode381 hard\color{#ff0000}{hard}hard点击进入原题链接：O(1) 时间插入、删除和获取随机元素 - 允许重复 第一想法：当时第一想法是：O(1)的时间插入、删除，这不就是哈希表的典型应用嘛！至于这个random…生成随机数？于是有了下面这种解法：维护一个哈希表，hashKey用插入的数字
2020-10-31 22:12:57
117
原创 vue中通过bus实现非父子组件通信
vue中通过bus实现非父子组件通信需求实现众所周知，vue中父可以通过子的props属性传值，子组件则可以通过$emit()向父组件传递数据，但如果是非父子组件，则可以通过bus来进行传值，这种设计模式叫做发布-订阅模式。需求假设这样一个应用场景，页面上有两个元素，我想在单击一个元素的时候使得另一个元素的内容变成和这个元素一样的。点击内容1之后，变成下面这样的效果：实现页面的结构很简陋，如下：其中test是我们将用vue注册的自定义组件。<!DOCTYPE html>&l
2020-10-31 19:44:46
247
原创 function和箭头函数不同的情况下，vue中this的指向
function和箭头函数不同的情况下，vue中this的指向vue实例methods属性中的回调函数的this都会指向vue实例。举个例子： const vm = new Vue({ el:'#app-3', data:{ inputValue:'', list:[] }, methods:{ h
2020-10-27 21:52:17
724
原创 webpack实现css样式对不同浏览器的兼容
webpack实现css样式对不同浏览器的兼容1.安装指定版本的 postcss-loader 和 postcss-preset-env2.配置webpack.config.js3.在项目文件的package.json中配置browserslist4. 选择process.env.NODE_ENV5.测试兼容后的代码众所周知，css在不同浏览器中的兼容性问题是一个十分令人头痛的问题，而用webpack工具中的postcss 就可以将打包好的css文件写成兼容一些老浏览器的css环境： "devDep
2020-10-26 22:05:15
1235
原创 阿美利加大统领得小感冒引发的思考: ajax+node+promise+nginx 实现一次简单的本地联调
特朗普新冠引发的思考: ajax+node+nginx 实现一次简单的本地联调最近在练习前后端联调的时候,做了一个练习:通过前端页面localhost:8001的ajax 向后端服务器localhost:8000发送一个路由为api/getNews的请求,服务器返回 特朗普得新冠的新闻,并在返回对象中带了一个commentsURL路由对象.前端页面解析返回的response,解析出commentURL路由,并根据这个路由拿到关于 特朗普得新冠 这个新闻的评论.为了突出联调过程本身,对服务器逻辑做了
2020-10-22 09:31:00
416
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人