- 博客(23)
- 收藏
- 关注
原创 树与数组之间的转换
又是一年离职季,我也从之前的公司离职了,目前正在找工作中,在最近的面试过程中,遇到了两道之前没有遇到的题,1.把一个数组转换为一棵树。2.把一棵树转换为数组。这是我之前都没有写过的题目,一来就让我懵了头,所以这次的面试也是不出意料的挂了。接下来就进行这两道面试题的复盘。
2023-03-27 02:34:54
1054
2
原创 关于【原型与继承】(读《红宝书》)
/ 实现原型链的一种基本模式// 继承,用 SuperType 类型的一个实例来重写 SubType 类型的原型对象// true其中,SubType 继承了 SuperType,而继承是通过创建 SuperType 的实例,并将该实例赋值给 SubType 的原型实现的。实现的本质是重写子类型的原型对象,代之以一个新类型的实例。子类型的新原型对象中有一个内部属性Prototype。
2023-02-24 20:17:54
142
原创 leetcode 算法总结--二分查找
当退出循环后,没找到mid,只能说明不存在刚刚好mid * mid === x,所以要返回left - 1或者是right。target=2,首次二分时无法判断区间[0,3] 和区间 [4,6] 哪个是有序的。在二分查找的每一步中,左边界为 low,右边界为high,区间的中点为 pivot,最小值就在该区间内。如下图所示,这说明 nums[pivot] 是最小值右侧的元素,因此我们可以忽略二分查找区间的右半部分。对于这种情况,我们只能将当前二分区间的左边界加一,右边界减一,然后在新区间上继续二分查找。
2023-02-18 23:33:16
264
原创 【前端性能优化】vue性能优化
在项目开发过程之中,如果把所有的组件的布局写在一个组件中,当数据变更时,由于组件代码比较庞大,vue 的数据驱动视图更新会比较慢,造成渲染过慢,也会造成比较差的体验效果。所以要把组件细分,比如一个组件,可以把整个组件细分成轮播组件、列表组件、分页组件等。当页面很多,组件很多的时候,SPA页面在首次加载的时候,就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面进行优化,就需要异步组件了。更新时,新的状态值和旧的状态值对比,较快地定位到diff。
2023-02-07 19:25:48
249
原创 关于 HTML5 LocalStorage 的 5 个不为人知的事实
这使得 SessionStorage 成为一种理想的存储技术,用于临时“备份”用户表单值、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复(如果存在),以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复(尽管浏览器会自行执行其中的一些操作,尤其是在从崩溃中恢复时)。因此,虽然它是服务器上的一个新“会话”,但从浏览器的角度来看,它是浏览器重启后单个会话的延续。相反,SessionStorage 中的值会在浏览器会话结束时被销毁,这通常是在浏览器窗口关闭时。根据草案规范,浏览器根据。
2023-02-06 20:11:18
66
原创 分享一下遇到的面试题
replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1。split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。slice() – 提取字符串的一部分,并返回一个新字符串。3. 类选择器: 10。
2023-02-02 21:14:14
90
原创 树的深度与广度优先遍历
树是前端工程师最经常打交道的一个数据结构,比如说html标签组成的dom树、树形控件等。在js中没有树这个数据结构,但是可以用Object和Array来构建树://val是当前的节点值,children是子节点const tree = { val: 'A', children: [ { val: 'B', children: [ { val: 'D',
2022-01-14 20:32:25
4283
原创 css提升页面性能
接下来我们说一下css面试时,问到的页面性能提升1.属性设置使用简写,例如 .box { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }我们可以写成.box { margin: 10px 20px 30px 40px; }这样写可以减小生产包的体积2.使用css样式来替换图标日常使用的图标
2021-10-12 20:33:12
139
原创 清除浮动的几种方法以及优缺点
清除浮动是面试时的高频考点,所以也必须要掌握我们写一个例子,定义一个box父盒子,里面有两个子盒子,父盒子不给高度,里面的两个子盒子浮动<div class="box"> <div class="left"></div> <div class="right"></div> </div>.box { width: 400px; border: 5px solid red;.
2021-10-12 19:09:37
276
原创 手写节流跟防抖,进行封装
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺直接进入案例监听一个输入框,文字变化后触发change事件<input type="text" class="input">直接用keyup事件,模拟触发change事件const input = document.querySelector('.input')添加键盘事件 input.addEventListener('keyup', function() {
2021-10-09 23:17:48
242
1
原创 自定义v-model
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺v-model指令的作用是便捷的设置和获取表单元素的值,绑定的数据和表单元素值相关联,常用于input表单的搜索<div id="app"> <!-- 建立一个input搜索框,用v-model绑定data里面的msg这个变量 --> <input type="text" v-model="msg"> <!-- //查看data
2021-10-09 22:20:07
916
原创 手写一个深拷贝 deepClone
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺这是一个深拷贝的代码const deepClone = (obj) => { let result for(let k in obj) { if(obj[k] instanceof Array) {//在这个地方我会写成result[k] = [],这是一个错误的写法,因为深拷贝后的值没有被接收 result = [] deepClone(obj
2021-10-06 15:17:50
401
原创 手写一个简易的ajax,进行封装
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺Ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简写,它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,浏览器可以做自己想做的事情,直到成功获取响应后,浏览器才开始处理响应数据。通俗点讲,就是浏览器也服务器之间的一种异步通信方式ajax的使用步骤://1.使用XMLHttpRequest这个构造函数创建一个实例//
2021-10-05 23:03:37
1135
原创 手写一个通用事件监听函数
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺这次来写一个通用的事件监听函数,基于我们的事件冒泡,如果你不知道事件冒泡需求,点击每个a,返回对应的内容 <div id="div"> <a id="p1" href="#">激活</a> <a id="p2" href="#">取消</a> <a id="p3" href="#">取消&l..
2021-10-04 16:14:01
1253
原创 JavaScript事件流
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺事件流描述的是从页面中接收事件的顺序,事件发生时会再元素节点直接按照特定的顺序传播,这个传播过程就是DOM事件流比如说我们定义两个盒子,son盒子在far盒子里面,分别给两个盒子添加点击事件点击fr时,输出far点击son时,输出son,同时也输出far const fa = document.querySelector('.fa') const so = ...
2021-10-04 14:49:37
771
原创 css3实现一个旋转木马
这是html部分,放上8个图片<section class="box"> <div><img src="img/iu.png" alt=""></div> <div><img src="img/iu2.png" alt=""></div> <div><img src="img/lin.png" alt=""></div> <div>..
2021-10-03 17:54:47
442
原创 js的同步跟异步
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺异步,原型和原型链,闭包被称为js的三座大山,为何会有异步?那我们要来捋一下js是一门单线程的语言,通俗点讲就是在一个时间段它只能做一件事,就像一条公路,它一次就只能一辆车通过,不能有两辆车并排着通过的,如果有一辆车,它就停公路上,这样子后面的车没法走,那它就会一直卡着,不会往下执行, console.log(100) alert(200)
2021-10-02 23:47:47
167
原创 JavaScript的预解析
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺1.我们js引擎运行js代码时会分两部分执行: 预解析 代码执行什么是预解析,就是js引擎会把js里面所有的 var 以及 function 提升到当前作用域的最前面代码执行,就是js代码按照书写的顺序从上往下执行用代码来看最直接var a = 1;f()function f() { console.log(a) var a = 2;...
2021-10-02 22:58:54
130
原创 手写一个bind函数
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺在函数调用时,浏览器每次都会传递进两个隐式参数:1.函数的上下文对象this,2.封装实参的对象argumentsbind函数,我比较喜欢叫方法,bind()的可以改变this的指向,返回一个新的函数,并且不会立即调用函数//函数放在Function对象的原型对象中,可以通过原型链来调用该方法Function.prototype.bind1 = function() {
2021-10-02 13:33:57
139
原创 改变函数内this指向
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺js中函数内的this指向函数的this指向用一句话来概括,就是谁调用,this就指向谁当然了,在js中,函数内部的this指向也不是万年不变的,我们也可以通过几个方法来改变this指向1.使用call() 在call()方法中,括号中可以加许多参数,第一个参数,就是要指向的this使用call()的时候要注意:call()会立即调用函数,并且会改变this指向c..
2021-10-01 18:47:58
88
原创 何时使用==,何时使用===?
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺==;称为等值符,当等号两边的类型相同时,直接比较值是否相等,当两边的类型不相同时,先转化为类型相同的值,再进行比较console.log(0 == false);//返回trueconsole.log(false == '');//返回trueconsole.log(38 == '38');//返回trueconsole.log(0 == '');//返回true===;称为等同符
2021-09-28 16:22:47
333
原创 typeof运算符判断类型
在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺之前虽然一直有用typeof来判断类型,却不知道它所局限的范围,在查阅资料和写代码后算是了解1.typeof能判断所有的值类型,包括 string,undefined,number,boolean以及symbol(ES6新增的类型,有点类似于字符串let a; console.log(typeof a); //undefineda = 'yidaimi'; console
2021-09-28 11:29:35
1950
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人