![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Per Day
文章平均质量分 62
Always--Learning
选择远远大于努力
展开
-
一道考频较高的面试题:数组和链表的区别
数组和链表虽然看似很基础,但却也经常被面试官问到,所以我们还是需要熟练掌握的。区别1:内存上是否连续数组在内存上是连续的链表在内存上不是连续的,链表是通过指针指向下一个元素。区别2:存放位置不同数组存放在栈中链表存放在堆中区别3:查询时间复杂度不同数组查询时间复杂度是O(1)链表查询时间复杂度是O(N)区别4:插入或删除的时间复杂度不同数组的时间复杂度是O(N)链表的时间复杂度是O(1)区别5:内存分配方式不同数组是静态分配内存链表是动态分配内存...原创 2021-09-28 11:24:45 · 253 阅读 · 0 评论 -
一篇文章掌握Next.js的核心要点
Next.js整体介绍Next.js是React服务端渲染应用框架,用于构建SEO友好的SPA应用。支持两种渲染方式,静态生成和服务器端渲染。基于页面的路由系统,路由零配置。自动代码拆分,优化页面加载速度。支持静态导出,可将应用导出为静态网站。内置CSS-in-JS库styled-jsx方案成熟,可用于生产环境,世界许多公司都在使用。应用部署简单,拥有专属部署环境vercel,也可以部署在其他环境。创建Next.js项目创建npm init next-app mynext原创 2021-09-15 16:59:52 · 878 阅读 · 0 评论 -
搭建next前台开发环境并引入antd
参考文档:https://jspang.com/detailed?id=521:搭建next开发环境npx create-next-app blog2:进入blog目录cd blog3:使用yarn测试yarn dev如果能够进入到下面的界面,说明前三步已经成功了!4:让next支持CSS文件yarn add @zeit/next-css5:按需加载antdyarn add antd yarn add babel-plugin-import6:在pages目录下.原创 2021-09-12 17:33:38 · 337 阅读 · 1 评论 -
面试官让我手写Promise.all
原生的Promise.all有什么特点?特点1:接收一个可迭代对象特点2:传入的数据中可以是普通数据,也可以是Promise对象特点3:可迭代对象的promise是并行执行的特点4:保持输入数组的顺序和输出数组的顺序一致特点5:传入数组中只要有一个reject,立即返回reject特点6:所有数据resolve之后返回结果实现Promise.all1:函数返回的是一个Promise对象function myPromiseAll(iterable) { return new Pr原创 2021-09-10 15:14:30 · 256 阅读 · 0 评论 -
前端面试不会直接挂掉的题目--冒泡排序
在准备面试的过程中,我们往往容易陷入到很多难度比较高的题目中不能自拔,却忽略了比较基础的题目,面试官在不了解我们的情况下,刚开始可能会问我们一道比较基础的算法题,比如数据结构,请问你能手写下冒泡排序吗?如果此时不会的话,可能直接结束面试了。哈哈,让我们今天来一起学习下这个比较简单的排序算法吧什么是冒泡排序?冒泡排序指的是一种排序的思想,假如我们拿到一个数组,数组中是一堆无序的数字,冒泡排序就可以让这堆无序的数字变得有序,之所以叫做冒泡排序而不是其他的XX排序,是因为冒泡排序的每一轮排序中都将最大的.原创 2021-09-09 11:29:30 · 305 阅读 · 0 评论 -
React中使用Echarts实现数据可视化的小案例(基础文章)
1. 安装echarts-for-react插件(两个都要装)npm install echarts-for-reactnpm install echarts2. 导入ReactEcharts库import ReactECharts from 'echarts-for-react';3. 渲染ReactEcharts组件,并通过option导入数据<ReactECharts option={this.getOption(sales,stores)} />4. 设置数据源opt原创 2021-08-24 21:33:03 · 1023 阅读 · 1 评论 -
从原理出发理解instanceof
有了typeof为什么还需要instanceof?我们都知道typeof可以帮助我们判断数据类型,但是在判断object类型的时候typeof只能告诉我们是object但是不能告诉我们具体属于哪类object,请看下面的代码。instanceof的出现可以解决这个问题。instanceof的实现原理在介绍instanceof的具体用法之前,我们先看下instanceof的实现原理,从原理出发可以更好的帮助我们理解它的用法。为了让读者更好的理解代码,我们需要直到下面的预备知识。Object原创 2021-08-23 15:07:09 · 218 阅读 · 1 评论 -
LeetCode——替换后的最长重复字符(滑动窗口)
题目描述解题思路核心的解题思路是:滑动窗口。构造一个数组,该数组拥有26个元素,下标代表的是大写字母A-Z。let letterArr = new Array(26).fill(0);定义滑动窗口的左右边界和滑动窗口中出现次数最多的字母的出现次数。// 定义滑动窗口的左边界let left = 0;// 定义滑动窗口的右边界let right = 0;// 定义滑动窗口中出现次数最多的字母的次数let max = 0;当右边界小于数组长度的时候,进入循环体,首先判原创 2021-08-14 13:55:21 · 247 阅读 · 0 评论 -
必须搞懂的跨域解决方案
跨域是什么?关于跨域是什么,我们这里先不做介绍,我们先介绍下跨域的前置知识(同源策略)。同源策略是浏览器的重要安全策略。同源策略指的是浏览器只有在两个页面拥有相同源的时候,才允许第一个页面中的脚本访问第二个页面中的数据。这里的同源指的是协议、域名、端口号三者同源。跨域请求有没有发送到服务器端?跨域请求实际上已经发送到了服务器,并且客户端也接收到了返回的消息,然而浏览器在接收消息后发现这个信息违反了同源策略且没有被允许跨域,所以在解析该消息的时候会报错。同源策略限制哪些,不限制哪些?限制以下原创 2021-08-13 16:31:23 · 608 阅读 · 0 评论 -
这一次,不再为web页面生命周期烦恼
什么是Web页面生命周期?我们每天在浏览器中通过一个又一个的标签页来浏览相关的信息,当我们在浏览器打开很多个标签页的时候,浏览器在资源紧张的时候,并不会为每一个网页保存资源,浏览器会在标签页不活动的时候,重新分配资源。浏览器对这些页面的干预会通过页面生命周期API暴露出来。这个生命周期就是本次我们讨论的主要话题。页面生命周期的主要事件1. DOMContentLoaded该API表示浏览器已经完全加载了HTML,并构建好了DOM树,但是css和img等外部资源尚未加载完成。注意:这里的外部资源原创 2021-08-11 16:35:01 · 243 阅读 · 0 评论 -
Node报错:npm ERR! code EINVALIDTAGNAME
报错警告npm ERR! code EINVALIDTAGNAME原因没有进行npm init便开始安装包。注意事项这里我们需要注意的是npm init和npm i并不相同,npm i 代表的是npm install表示安装,并不表示初始化,初始化需要我们npm init这个命令不能够简写。...原创 2021-08-08 20:16:40 · 11957 阅读 · 1 评论 -
LeetCode——数组中的第K个最大元素(堆排序-大顶堆)
题目描述解题思路本题如果直接再用API解题肯定是不行的,因为面试不可能考你API如何使用,前几天写过这个题目是通过快速排序写的,这次我们采用堆排序,通过大顶堆的方式来求出第K个最大的元素,其实这类问题都属于经典的TOP K问题,属于面试的常考题。1. 构建大顶堆为什么要构建大顶堆,是因为大顶堆的对顶元素是整个数组中最大的元素.我们正式利用这点来求解问题的。构建大顶堆的第一步是从最后一个非叶子节点开始,一直遍历到根节点.一个节点的左子节点是 2*n + 1.一个节点的右子节点是 2*原创 2021-08-08 17:01:51 · 733 阅读 · 0 评论 -
使用combineReducers合并多个reducer(基础文章)
comineReducers旨在解决什么问题?这个函数是redux库中的函数,旨在解决多个reducer暴露的问题,因为一个组件往往用到的不止一个reducer。结合后的reducer函数import {INCREMENT,DECREMENT} from './action-types'import {combineReducers} from 'redux'// 管理count状态的reducerfunction count(state=1,action) { console.l原创 2021-07-28 14:47:08 · 479 阅读 · 0 评论 -
react-redux的3个主要作用
已经有了redux为什么还要设计react-redux?因为redux和组件的耦合度太高,为了解耦,所以设计了redux。一旦我们引入了react-redux,我们便不再需要使用store的subscribe自己去订阅状态了。UI组件就像普通组件一样内部没有redux的身影。可读性更高。UI组件和容器组件react-redux将组件分为UI组件和容器组件,UI组件只负责UI的呈现,不带有任何业务逻辑,通过props接收数据,不使用Rdux的API,一般保存在components文件夹下,容器组件原创 2021-07-28 10:34:18 · 650 阅读 · 0 评论 -
面试官:请说下CSS选择器优先级
什么是CSS选择器优先级?CSS选择器优先级是指在给CSS元素设置样式的时候,如果同时有多个CSS选择器同时指向一个元素,那么优先级高的选择器的元素样式会最终应用到这个元素上。通过权重来计算CSS选择器的优先级1. !important的优先级是最高的。(没有这个属性的话,则按照下面的向量来计算优先级)2. 权重相同,看谁的定义靠后,越靠后就会覆盖掉前面的样式例子1例子2例子3(优先级相同,谁在后面谁起作用)[参考资料]2分钟掌握 CSS 选择器优先级(特异性)...原创 2021-07-24 17:35:05 · 218 阅读 · 0 评论 -
LeetCode——数组中的第K个最大元素(JS实现)
题目描述解题思路本题思路较为简单,首先对数组按照从小到大进行排序。使用reverse将数组进行反转。返回反转数组的第k-1个元素即可。本次没有采取JS自带的sort,而是自己实现了快速排序。解题代码var findKthLargest = function (nums, k) { // 快速排序 function sort(nums, Left, Right) { let l = Left; let r = Right;原创 2021-07-23 17:55:35 · 303 阅读 · 0 评论 -
React之PureComponent的用法
PureComponent有什么用?一般组件的shouldComponentUpdate默认返回的是true,但是一旦父组件及时状态或props没有变化,也会造成子组件的render调用,这是很不合理的,我们可以让子组件继承自PureComponent来解决这个问题。PureComponent的基本原理重写了shouldComponentUpdate方法。对组件的新/旧 state和props中的数据进行浅比较,如果没有变化则返回false,反之返回true.PureComponent用法原创 2021-07-16 16:34:30 · 481 阅读 · 0 评论 -
这一次彻底搞懂JS中的防抖和节流(面试必问)
什么是防抖?通过setTimeout的方式,在一定的时间间隔内,将多次触发变成一次触发。(通俗的说是在最后一次点击间隔规定时间之后才能再次成功触发,否则触发不成功)防抖的实现思路在防抖函数返回的函数的上级作用域设置一个定时器变量t置为null;通过t来判断是否是第一次执行。如果不是第一次执行,清空定时器如果是第一次执行,则通过apply(this,arguments)进行执行.最后设置定时器,规定时间之后将t设置为null,使得间隔时间之后t为null,间隔时间之后的点击变为第一次点击。原创 2021-07-16 10:56:01 · 361 阅读 · 0 评论 -
React中的setState更新state是同步还是异步的?
问题引入React中的setState是用来更新状态的重要工具,但是setState是同步的还是异步的,需要我们进行一定的探讨,接下来让我们好好研究研究。使用setState的两种形式函数形式的setStatetest1 = () => { // 函数形式的setState,函数形式的setState能够接收到两个参数,一个是state,另一个是props this.setState(state => ({count: state.count +原创 2021-07-15 16:18:59 · 909 阅读 · 0 评论 -
深入 JSX(精读React官方文档—21)
JSX的本质是React.createElement()函数的语法糖。以下面的JSX代码为例:<MyButton color="blue" shadowSize={2}> Click Me</MyButton>会编译为:React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')自闭合的标签形式<div className="sidebar" /.原创 2021-07-15 10:24:07 · 413 阅读 · 0 评论 -
凯撒密码(FreeCodeCamp)
题目描述解题思路首先遍历每一个字符。通过charCodeAt()来判断字符的ASCII码值,如果该值在A-Z之间继续判断-13之后是否还在这个范围,如果还在这个范围直接通过charCodeAt()进行转换字符即可。如果该值不在A-Z之间,直接进行拼接原字符即可。实现代码function rot13(str) { let temp = ''; for (let v of str) { if (v.charCodeAt() < 65 || v.charCo原创 2021-07-15 09:04:21 · 401 阅读 · 0 评论 -
手写快速排序(JavaScript)
实现思路快速排序是在实践中已知的最快的排序方法。快速排序采用了分治的思想,这也意味着在代码中需要用到递归。选择A中的任意一个元素pivot,该元素作为基准。将小于基准的元素移到基准左边,将大于基准的元素移动到基准的右边。A被pivot分为两部分,继续对剩下的两部分做同样的处理。使用递归将上述的两部分继续进行同样的排序。实现代码function Quick_Sort(nums,left,right) { if (left >= right) return; le原创 2021-07-14 17:20:23 · 871 阅读 · 0 评论 -
HOT100——搜索旋转排序数组(JS实现)
题目描述解题思路本题最核心的在于寻找峰值,所谓的峰值指的是该值比左边元素大,该值比右边元素也大,然后根据峰值分割数组,判断target是在数组的左边还是右边,然后使用indexOf判断位置,最后返回。解题代码var search = function (nums, target) { let left = 0; let right = nums.length - 1; let mid = left + right >>> 1; // 开始寻找中原创 2021-07-14 10:33:58 · 261 阅读 · 0 评论 -
手写call、apply和bind
1. 手写call原生call具备的三个功能改变this指向。调用call就是调用函数。(能够返回结果)实现代码function person(a,b,c) { return { name: this.name, a: a, b: b, c: c }}const egg = {name: 'hello'};Function.prototype.myCall = function(obj) { ob原创 2021-07-13 15:15:54 · 211 阅读 · 0 评论 -
高阶组件(精读React官方文档—19)
核心高阶组件不用关心数据是如何渲染的,只用关心逻辑即可。被包装的组件不用关心数据是怎么来的,只用负责渲染即可。最后渲染的是高阶组件返回的组件。一个例子看懂高阶组件的用法高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧,HOC是基于React的组合特性而形成的设计模式。解读高阶组件是一种函数,接收的参数是组件,返回的也是组件。const EnhancedComponent = higherOrderComponent(WrappedComponent);使用HOC原创 2021-07-08 19:18:55 · 326 阅读 · 4 评论 -
Fragments(精读React官方文档—18)
Fragments存在的意义是什么?Fragments旨在解决一个组件包含多个元素,但是无需向DOM添加额外节点。render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}动机以下面的代码为例,如果Columns组件返回多个td元素才能实现效果,但是原创 2021-07-04 08:59:13 · 293 阅读 · 0 评论 -
Refs转发(精读React官方文档—17)
什么是Ref转发?Ref转发是一项将ref自动地通过组件传递到其一子组件的技巧。转发refs到DOM组件下面的组件是一个渲染原生DOM元素button的FancyButton组件function FancyButton(props) { return ( <button className="FancyButton"> {props.children} </button> );}Ref转发是一个可选特性,其允许某些组件接收r原创 2021-07-03 11:10:21 · 400 阅读 · 0 评论 -
错误边界(精读React官方文档—16)
什么是错误边界?官方描述:过去,组件内的 JavaScript 错误会导致 React 的内部状态被破坏,并且在下一次渲染时 产生 可能无法追踪的 错误。这些错误基本上是由较早的其他代码(非 React 组件代码)错误引起的,但 React 并没有提供一种在组件中优雅处理这些错误的方式,也无法从错误中恢复。部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界。解读错误边界指的是部分UI导致的JS错误导致整个应用崩溃原创 2021-07-02 09:46:47 · 614 阅读 · 0 评论 -
Context(精读React官方文档—15)
Context有什么作用?官方描述:Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。如果属性只能通过props从上往下进行传递,在有些应用场景下是非常繁琐的,比如UI主题的继承,Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。解读通过Context可以让组件树之间进行数据传递,并且不需要手动添加props.何时使用Context?Context设计的目的是为了共享那些对于一个组件树而言是全原创 2021-07-01 10:10:21 · 357 阅读 · 0 评论 -
代码分割(精读React官方文档—14)
打包官方描述:大多数 React 应用都会使用 Webpack,Rollup 或 Browserify 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。实例:打包前文件和打包后文件对比打包前// app.jsimport { add } from './math.js';console.log(add(16, 26)); // 42// math.jsexport原创 2021-06-30 11:23:37 · 256 阅读 · 1 评论 -
ByteDance的面试题
直接上图做完题,并没有直接给出答案,而是得了80分,第十题我选的D,原创 2021-06-30 10:14:04 · 305 阅读 · 0 评论 -
无障碍辅助功能(精读React官方文档—13)
什么是无障碍辅助功能?官方描述:网络无障碍辅助功能(Accessibility,也被称为 a11y,因为以 A 开头,以 Y 结尾,中间一共 11 个字母)是一种可以帮助所有人获得服务的设计和创造。无障碍辅助功能是使得辅助技术正确解读网页的必要条件。解读无障碍辅助功能指的是一种可以帮助所有人获得服务的设计和创造。标准和指南WCAG网络内容无障碍指南(Web Content Accessibility Guidelines,WCAG) 为开发无障碍网站提供了指南。WAI-ARIA网络无原创 2021-06-29 09:45:52 · 1101 阅读 · 1 评论 -
React哲学(精读React官方文档—12)
引入React哲学React最棒的部分之一是引导我们思考如何构建一个应用,接下来本文将通过React构建一个可搜索的产品数据表格来深刻的领会React哲学。从设计稿开始假设我们已经拥有了以下几个东西一个能够返回JSON数据的API[ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99",原创 2021-06-27 09:50:14 · 281 阅读 · 1 评论 -
组合VS继承(精读React官方文档—11)
官方推荐:使用组合而非继承来实现代码间的代码重用。包含关系有些组件无法提前知道其子组件的内容,官方建议通过一个children prop来将子组件传递到渲染结果中去。function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}其他组件将任意.原创 2021-06-26 08:27:06 · 223 阅读 · 0 评论 -
状态提升(精读React官方文档—10)
为什么需要状态提升?有时候,多个组件需要共享状态,此时需要将共享状态提升到最近的共同父组件中去。首先创建一个判断水是否沸腾的组件BoilingVerdictcelsius 温度作为一个 prop.function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } return <p>The water原创 2021-06-25 10:31:58 · 219 阅读 · 1 评论 -
表单(精读React官方文档—09)
表单基本介绍官方描述:在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。举例<form> <label> 名字: <input type="text" name="name" /> </label> <input type="submit" value="提交" /></form>解读该表单具有默认的HTML表单原创 2021-06-24 08:10:53 · 273 阅读 · 1 评论 -
列表&Key(精读React官方文档—08)
React中将元素转换为列表类似map的方法const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);渲染多个组件将数组中的每个元素变为li标签const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li>{number原创 2021-06-23 17:04:57 · 275 阅读 · 1 评论 -
你会求《数字范围内的最小公倍数》吗?
今天我在练习FreeCodeCamp的时候,发现一道很有意思的初级算法题目,特地和大家分享一下。题目描述找到可以被两者以及这些参数之间范围内的所有序列号均分的所提供参数的最小公倍数。该范围将是一个由两个数字组成的数组,不一定按数字顺序排列。例如,如果给定 1 和 3,请找出 1 和 3 的最小公倍数,该倍数也可以被1 和 3之间的所有数字整除。 这里的答案是 6。测试实例解题思路当我刚刚看到这道题目的时候,我在想求最小公倍数这还不简单?但是事情仿佛没那么容易,原因在于题目中让我们求的不.原创 2021-06-23 15:40:01 · 400 阅读 · 0 评论 -
条件渲染 (精读React官方文档—07)
引言官方描述:React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。观察下面两个组件function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(props) { return <h1>Please sign原创 2021-06-22 08:56:18 · 220 阅读 · 0 评论 -
State与生命周期 (精读React官方文档—05)
state是私有的。官方描述:State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。解读官方对state的介绍很重要,我们必须要知道state是私有的,并且完全受控于当前组件。将函数组件转换为类组件创建一个同名的类,并且继承与React.Component.添加一个空的render()方法.将函数体(return(…))移动到render方法中.在render方法中使用this.props代替props.删除剩余的空函数声明.函数组件func原创 2021-06-20 09:28:28 · 296 阅读 · 0 评论