前端整理
文章平均质量分 51
云云的云
码无止境
展开
-
【JS面试题】将数据转换树形结构
复盘一道面试中写的不好的场景题题目描述写一个函数flatToTree(),将扁平化数据转成json树形结构实例输入let flatArr = [ {id: 1, title: "A", parent_id: -1}, {id: 2, title: 'B', parent_id: -1}, {id: 3, title: 'C', parent_id: 2}, {id: 4, title: 'D', parent_id: 3},](元素自身id唯一,pid是父节点。父节点为-1.原创 2022-03-16 14:32:44 · 1118 阅读 · 0 评论 -
面试官:怎么手撸一个promise?
前段时间面试时面试官问了我如何手写一个promise,心想只手写过promise的api,那如果直接手写promise应该从哪做起呢?Promise结构&特性结构:1、Promise对象创建一个异步函数2、异步函数中有resolve、reject两个函数参数3、Promise中的fulfilled、pending、rejected三种状态4、Promise的.then执行回调返回新的Promise5、Promise的链式编程特性:1、主动抛出错误,会调用 reject() 方法.原创 2021-11-09 21:52:55 · 553 阅读 · 0 评论 -
Js继承汇总
1、原型链继承基本思想:通过原型链继承多个引用类型的属性和方法原型链扩展了原型搜素机制:在读取实例上的属性时,首先在实例上搜索这个属性,没找到则会继续搜索实例的原型,实现原型链继承之后,搜索继续向上搜索原型的原型。//原型链继承function Father() { this.value = "F";}Father.prototype.getFatherValue = function () { return this.value;};function Son() { this原创 2021-08-27 11:13:59 · 110 阅读 · 0 评论 -
你不知道的Effect hook
第一遍学hook的时候,只是匆匆带过了几种hook的使用,也用useState、useEffect写了一个小demo但是在看项目代码的时候,发现了effecthook之前没学到的东西,遂回头再学一次,加深理解并记录下来。1、定义Effect Hook 可以让你在函数组件中执行副作用操作,数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。2、使用2.1 初次理解effect hook 一定程度上.原创 2021-08-27 10:56:35 · 255 阅读 · 0 评论 -
在CRA中自定义webpack
在create-react-app中想要自定义修改webpack有两种方式:eject和不使用eject的其他方式。使用ejecteject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目,这样用户就能完全取得 webpack 文件的控制权。npm run eject 会复制所有依赖文件和相应的依赖(webpack、babel等)到你的项目。是单向操作,eject后就回不去了。使用方法:在新建的cra应用中直接npm run eject。tips:我在第一.原创 2021-08-26 15:35:24 · 456 阅读 · 0 评论 -
重排重绘与GPU加速
重排重绘我们知道在浏览器渲染过程中存在重排和重绘过程重排当出现以下行为时,会引起重排。添加或删除DOM元素元素的位置发生变化元素的尺寸发生变化浏览器的窗口尺寸变化重绘对 DOM 操作简单修改样式(比如修改元素的 visibility、color、background-color 等)时会引起重绘重排一定会引起重绘!相比较来看,重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。(跟踪重绘:打开Chrome的DevTools中re原创 2021-08-26 15:04:23 · 437 阅读 · 0 评论 -
Js中map与Object对比思考
在实际应用中,有用到map来存数据,自然联想到了普通对象Object和数组我知道数组有序,对象无序,那map这种特殊的结构是有序吗?思考后查阅了资料,整理总结如下文章目录mapObjectmap&Object对比Objectsmap&Object应用场景map一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为[key,value]的数组。Object一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一.原创 2021-08-16 11:16:04 · 652 阅读 · 0 评论 -
Js常见排序算法整理
1、冒泡排序冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较,看是否满足大小关系要求。如果不满足就让它俩互换。一次冒泡会让至少一个元素移动到它应该在的位置,重复 n 次,就完成了 n 个数据的排序工作。const bubbleSort = (num) => { for (let i = 0; i < num.length - 1; i++) { console.log("FIRST"); let flag = 0; for (let p = 0; p原创 2021-07-07 14:29:20 · 241 阅读 · 0 评论 -
Scss快速上手:减少80%重复的样式代码!
Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能在学习成熟的项目时,看到了十分规整的scss代码(以及一堆看不懂的语法),加上之前对sass/scss的好奇,不妨借此机会系统整理总结学习一下。(部分内容参考sass官方文档)1、变量$在代码中最常见到首部的变量声明$color-button:#3ecacb;.button{ color:$color-button;}tip:变量支持块级作用域.原创 2021-06-21 15:56:49 · 680 阅读 · 0 评论 -
面试官:1到n去掉一个数,打乱顺序,你怎么找出缺失的数?
春招面某厂的时候,面试官冷不丁问了这么个问题:1到n去掉一个数,打乱顺序,你怎么找出缺失的数?1、先排序,之后一切都好说。最容易想到的肯定是排序,排完遍历一遍就能找到丢失的数。快排,复杂度O(nlogn),就问面试官你满意不?(面试官皱了皱眉,还有其他的办法吗?)2、用hash总可以了吧。遍历数组放入hashMap中,之后从1到n遍历哈希表,返回值为空的key就是缺失的数。时间复杂度O(n) 空间复杂度O(n)。这下比快排还快,面试官应该满意了吧。(面试官炸了眨眼,除了这俩办法呢?).原创 2021-04-25 20:33:56 · 1072 阅读 · 0 评论 -
JS数组去重+数组拍平大整理
数组去重的N种实现方式1、Set去重//Setlet arr = [1, 3, 5, 5, 2, 2, ]let res = Array.from(new Set(arr))console.log(res); //[ 1, 3, 5, 2 ]简单,方便,刷算法时常用缺点是不支持多维数组2、Sort排序+遍历去重//sortlet arr = [1, 3, 5, 5, 2, 2, ]function sortUniq(arr) { arr.sort((a, b) =&g原创 2021-04-24 12:17:32 · 379 阅读 · 0 评论 -
计算机网络常见面试题整理
分层的概念问题 1:OSI 有哪几层,会画出来,知道主要几层的各自作用应用层(数据):确定进程之间通信的性质以满足用户需要以及提供网络与用户应用表示层(数据):主要解决拥护信息的语法表示问题,如加密解密会话层(数据):提供包括访问验证和会话管理在内的建立和维护应用之间通信的机制,如服务器验证用户登录便是由会话层完成的传输层(段):实现网络不同主机上用户进程之间的数据通信,可靠与不可靠的传输,传输层的错误检测,流量控制等网络层(包):提供逻辑地址(IP)、选路,数据从源端到目的端的传输数据原创 2021-02-14 21:35:20 · 465 阅读 · 0 评论 -
JS数组常用方法返回值问题
总是记错是否返回原数组,不妨整理一遍Array改变原数组.push() :末尾新增unshift():首位新增pop():末尾删除shift():首位删除splice():替换或删除sort()排序reverse() 反向不改变原数组(返回新数组)slice()切割(前闭后开)concat()联合数组join();连接符拼接成字符串(与str.split互逆)字符串不改变原有!!...原创 2021-02-12 16:24:21 · 282 阅读 · 0 评论 -
ajax中的状态码
xmlhttp.readyState的值及解释:0:请求未初始化(还没有调用 open())。1:请求已经建立,但是还没有发送(还没有调用 send())。2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。4:响应已完成;您可以获取并使用服务器的响应了。xmlhttp.status的值及解释:100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功20.原创 2020-12-07 21:18:44 · 120 阅读 · 0 评论 -
JS原型链相关知识点
分享一些自己记的笔记——js原型链相关知识点原创 2020-11-14 10:54:12 · 113 阅读 · 0 评论 -
知识整理——html、css相关
1、什么是HTML语义化?语义化,指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化),便于开发者阅读,维护和写出更优雅的代码的同时,让浏览器的爬虫和辅助技术更好的解析。2、为什么要语义化?丢失css样式时页面内容代码仍旧结构清晰。有利于SEO(SearchEngineOptimization)搜索引擎优化,有助于爬虫抓去更多的有效信息,提高网站排名。方便其他辅助设备解析便于维护,使代码更具有可读性。3、HTML应改掉的坏习惯(语义化标签的滥用)<p>&a原创 2020-09-27 10:53:33 · 174 阅读 · 0 评论 -
知识整理——计算机网络
用于自学记录整理一、OSI七层网络模型标准OSI七层模型(Open System Interconnection)将计算机网络体系结构的通信协议划分为七层,自下而上依次为:物理层(Physics Layer)数据链路层(Data Link Layer)网络层(Network Layer)传输层(Transport Layer)会话层(Session Layer)表示层(Presentation Layer)应用层(Application Layer)其中第四层完成数据传送服务,上面三原创 2020-09-24 19:50:08 · 94 阅读 · 0 评论 -
微信小程序简易模板与心得分享
最近和同学做了小程序项目,主要负责前端的实现,主要是几个常用的页面,经过大家多次讨论和修改,也具有了基本的美观和实用性。记录一下几个过程中遇到的问题和学到的小技巧,把几个可以重复利用的模板写下来,以后可能会用到。更主要是记录自己的心得,也许可以帮助到像我一样初识小程序的朋友。。。。一、tabBar与iconFont的使用要设计一个多页面的小程序,简洁美观的方案可以采用小程序自带的tab...原创 2020-05-06 10:55:13 · 1375 阅读 · 0 评论 -
微信小程序中阿里iconfont使用记录
在弄小程序的时候,想应用几个小图标又嫌都以图片形式放上去麻烦就找了找有没有合适的icon从而发现了新天地——阿里爸爸的iconfonthttps://www.iconfont.cn接下来简单记录一下我的使用和踩坑过程PNG首先是下了几个png图片,用来做底部tabBariconfont可以直接将想要的图标加入库然后下载,令我感到很棒的是可以自定义颜色下载。这让我可以直接完...原创 2020-03-30 19:29:23 · 454 阅读 · 0 评论 -
前端网页落雨效果(圣诞祝福升级版)
.Html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-03-01 21:39:51 · 674 阅读 · 0 评论 -
VScode如何快速生成Html标签(Emmet的简单使用)
写前端的时候往往会遇到需要写很多重复标签或是复杂包络关系的时候,这时候单单复制绝不是个好办法。我也是在看大佬敲代码的时候发现了这个技巧,然后简单了解了一下,这里介绍给大家。首先举个例子,这也是我第一次见到别人敲的代码div>input.obj*8回车或者Tab之后,就生成了这样的代码是不是很方便快捷,第一次看到的我都惊呆了。然后我们来看一下这些技巧的使用规则常用语法#id...原创 2020-02-05 17:14:42 · 10508 阅读 · 5 评论 -
原生JS实现addclass
**只介绍关键部分代码,可自己尝试应用**CSS .class1{ display: none; }HTML<div id="card0"> </div>JS代码 function addClass(ele, str) { if (ele.className) { var oriNam...原创 2020-01-17 01:17:25 · 1009 阅读 · 0 评论 -
前端入门整理(3)Javascript
#前端入门整理(3)Javascript社团培训讲到js课程,整理的过程正好复习一遍。-.-一、JavaScript简介前端基础:html是骨架,css是血肉,那么JavaScript就是灵魂所在,可以说,想要做出交互的动态网页,没有js是行不通的。虽然最初始作为是web页面的脚本语言而产生的,但现在越来越流行而且功能也越来越强大,还是要好好掌握的。二、JavaScript写在哪里?内...原创 2019-12-18 21:49:34 · 408 阅读 · 0 评论 -
前端入门知识整理(2)纯CSS实现轮播图
纯CSS实现轮播图效果之前做滚播图一直用的是bootstrap的框架,突然想试试自己写一个,于是就用css动画试了试,发现其实很简单,下面介绍一下思路和代码 (首先要掌握html和css更有助理解)思路:用一个盒子盛放排列好的图片,然后在用一个盒子利用 overflow 属性进行显示,然后在用动画属性让盛放图的盒子按要求左右动起来就完成了。参考下面的结构图下面上代码<htm...原创 2019-12-08 12:44:19 · 369 阅读 · 0 评论 -
前端入门知识整理(1)Vscode使用
前端入门(1)最近社团需要,所以整理了一下从0开始学习前端的一些知识。安装软件 (VScode)以及对应插件的安装,相关配置。介绍vscode常用快捷键初始化第一个html程序1.软件以及插件安装前端开发其实对开发工具的要求很低,甚至用记事本也可以写。但是一个好的工具可以让我们事半功倍,在前端开发中,有一个非常好用的工具,Visual Studio Code,简...原创 2019-11-30 10:23:52 · 1298 阅读 · 5 评论