- 博客(70)
- 收藏
- 关注
RSS订阅原创 随时记|React Route中的exact的作用
exact顾名思义就是：精准匹配如果不写exact所以应该在path=’/'这个路由加上exact注意：嵌套路由不要加exact属性，如果父级路由加上exact，父级组件的子路由将不会生效，因为外层强制匹配了
2022-03-13 15:28:08
1512
原创 随时记|Object.create()
语法Object.create(proto, [propertiesObject]);proto 新创建对象的原型对象propertiesObject （可选） 需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数，如果该参数被指定且不为undefined，该传入对象的自有可枚举属性（即其自定义的属性，而不是其原型链上的枚举属性）将为新创建的对象添加指定的属性值和对应的属性描述符返回值 一个新的对象，带着执行的原型对象和属性（1）关于参数1
2022-03-07 16:57:09
232
原创 随时记|Object.assign()
Object.assign()的基本使用 && 语法问题1： Object.assign()是浅拷贝还是深拷贝？当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝（1）一级属性let obj1 = { name:'Katrina', age:18,};let obj2 = Object.assign({}, obj1);console.log(obj1, obj2); // obj
2022-03-07 15:49:14
426
原创 ES6新特性|数组的扩展
1. 拓展运算符…（1）基本用法数组转参数序列（逗号分隔）let arr = [1,2,3];console.log(...arr); // 1 2 3函数调用let arr = [1,2];function add(x,y) { console.log(x+y);};add(...arr); // 3扩展运算符可以放置表达式const arr = [ ...(x>0 ? ['a']:[]), 'b',]如果扩展运算符后面
2022-03-04 13:30:09
307
原创 ES6新特性|变量的解构赋值
（1）数组的解构赋值数组的解构是要按照顺序排列的let [x,y,z] = [1,2,3];console.log(x,y,z); // 1 2 3对于未取到的值，赋值为undefinedlet [x,y,z] = [1,2];console.log(x,y,z); // 1 2 undefined允许设置默认值let [x,y,z] = [1,2];console.log(x,y,z=3); // 1 2 3用途：字符串截取let str =
2022-03-04 11:03:42
382
原创 ES6新特性|var let const
let const 是es6提出的新特性，解决了var存在的一些问题1. let const 不存在变量提升变量提升：变量可以在声明之前使用，值为undefinedconsole.log(a); //undefinedvar a = 1; console.log(b); // ReferenceError: Cannot access 'b' before initializationlet b = 1;2. 暂时性死区只要块级作用域内存在let命令，它所声明的变量就“.
2022-03-03 22:02:30
558
原创 随时记|二叉树前中后序遍历_JavaScript
二叉树构造如下const root = { val:'A', left:{ val:'B', left:{ val:'D', }, right:{ val:'E', }, }, right:{ val:'C', left:{ val:'F', }, righ
2022-03-03 17:39:19
442
原创 过一遍|前端面试中常见对比（持续补充）
HTML1. link 和 @import的区别2. scr 和 href的区别3. title和h1的区别4. b与strong的区别5. i与em的区别6. 超链接中title和alt的区别CSS1. position中absolute和relative有什么区别？2. position中absolute和fixed有什么区别？3. visible:hidden display:none opacity:0有什么区别？4. 各种单位px em rem vh/vw 的区别5. d
2022-02-28 15:26:00
141
原创 过一遍|JavaScript中函数类型以及this指向问题
函数声明的三种方式1. 函数声明function add(a, b) { console.log(a+b);};2. 函数表达式let add = function(a,b) { console.log(a+b);};3. 使用Function构造函数生成实例// 前面都是函数参数，最后一个字符串参数表示函数体let add = new Function('a','b','a+b');// 不推荐原因：// 1. 需要两层解析：一层是函数解析，二是对内部字符串的解析，耗性能/
2022-02-28 15:12:08
136
原创 过一遍|JavaScript中迭代数组的api
在JavaScript中Array有很多好用的方法，如下表Array.push() 增末尾const arr = [1,2,3,4,5];const newArr = arr.push(0);console.log(newArr); // 6 返回的是数组的长度console.log(arr); // [ 1, 2, 3, 4, 5, 0 ] 改变了原数组Array.pop() 删末尾const arr = [1,2,3,4,5];const newArr = arr.pop.
2022-02-28 14:30:39
192
原创 随时记|for of 和 for in的区别
for of 和 for in的区别数组for of 打印数组内的元素for in 打印数组元素的index （string） 再用index去索引得到元素，相比于for of有种多次一举的感觉const arr = [1,2,3,4];for (let i in arr) { console.log('i',i); // 0 1 2 3 console.log(arr[i]); // 1 2 3 4};for (let j of arr) { co
2022-02-28 13:56:48
210
原创 过一遍|Promise面试题（会持续补充的）
Promise一直是面试被问的重点，根据各种面经记录Promise在面试中经常问道的问题，同时会增加一些前瞻性和拓展性的问题，适合我这种临时抱佛脚的人前期储备事件循环（event loop）的执行顺序详见B栈哈默：什么是Event Loop？如果用比较文字的形式来解释：一开始整个脚本作为宏任务执行执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完毕执行浏览器UI线程的渲染工作检查是否有Web wor.
2022-02-28 12:58:03
3523
原创 随时记|JS继承
一直对继承这个云里雾里的，看了B站视频结合文档记录一下~Part1：预备知识在此之前，你必须掌握以下知识，温故知新啦~1. 构造函数的属性举一个简单的构造函数的例子：function Person(name) { this.name = name; // 实例基本属性（该属性，强调私有，不共享） this.age = [18]; // 实例引用属性（该属性，强调私有，不共享） this.say = function() { // 实例引用属.
2022-02-27 17:27:45
205
原创 随时记|React动态展示时间
问题描述我有这样一个需求，我想在页面动态展示时间，也就是每秒更新知识点储备react类组件写法react生命周期如何获取时间：new Date()说明因为我是借助react的，所以我把整个部分都写在App.jsx中，再渲染到入口文件index.jsx中的代码实现效果展示App.jsximport React, { Component } from 'react'export default class App extends Component { state = {
2022-02-27 15:18:23
1412
原创 随时记|几种常见的排序方法_JavaScript
常见的排序算法有：冒泡排序、选择排序、插入排序、归并排序、快速排序、希尔排序、堆排序、计数排序、桶排序、基数排序冒泡排序冒泡排序：遍历要排序的数组，一次比较两个元素，如果这两个元素的顺序错误就把他们交换过来，直到没有再需要交换为止算法思路：比较相邻元素，如果顺序错误，就交换对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数针对所有的元素重复以上的步骤，除了最后一个重复1-3步，最终排序完成代码实现：let arr = [ 1, 3, 4,.
2022-02-26 19:06:13
460
原创 随时记|JavaScript函数柯里化（Currying）
柯里化（Currying）是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)©柯里化不会调用函数,它只是对函数进行转换先看这个例子：function curry(f) { // curry(f) 执行柯里化转换 return function(a) { return function(b) { return f(a, b).
2022-02-26 16:23:38
243
原创 随时记|生疏的前端知识点_JS（二）
解决遍历对象时，把原型上的属性遍历出来了怎么办？使用hasOwnProperty判断function Person(name) { this.name = name;};Person.prototype.age = 23;const person = new Person('Katrina');for (const key in person) { console.log(key) // name age};for (const key in person) { person.ha
2022-02-25 20:43:35
537
1
原创 随时记|事件冒泡&&事件捕获
当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序我们看一下这个程序：
2022-02-25 19:59:47
129
原创 随时记|生疏的前端知识点（一）
标签title与alt属性的区别alt是html标签的属性，title既是html标签，又是html属性title（1）作为标签<title>这里写网页的标题</title>（2）作为属性可以为元素提供额外说明信息比如：给超链接a标签添加了title属性，把鼠标移动到该链接上面的时候，就会显示title的内容，以达到补充说明或者提示的作用altalt属性只能用在img、area、input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信
2022-02-25 15:15:12
198
原创 随时记|setState更新对象的两种方法
对象式的setState语法setState(stateChange, [callback])stateChange为状态改变对象(该对象可以体现出状态的更改)callback是【可选】的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用问题：setState更新是异步的1. 情况说明2. 如何解决？_借助回调函数callback看一下官网是怎么说的误区：console.log()的时候应该打印this.state.count，千万不要傻傻地打印cou
2022-02-24 17:15:12
1365
原创 随时记|React Hooks
React的Hooks有useState、 useEffect、useRefuseState例如： const [isShow, changeIsShow] = useState(false);isShow:是否展示（一个状态）changeIsShow:改变是否展示（改变状态的唯一方法）false:默认值useState的唯一参数：该状态的默认值useEffect可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)发ajax请求数据获取设置订阅 / 启动.
2022-02-24 14:03:00
260
原创 随时记|React-Router中的HashRouter和BrowserRouter
什么是react-router前端路由实现方式路由需要实现三个功能：当浏览器地址变化时，切换页面；点击浏览器后退，前进按钮，网页内容发生变化；刷新浏览器，页面加载内容对应当前路由对应的地址；在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。history 模式：利用H5 history API实现url地址改
2022-02-24 12:35:29
2197
原创 随时记|深拷贝&&浅拷贝
什么是深浅拷贝？浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象基本情况分析1. 赋值（基本数据类型）_可以看作是深拷贝let a = 1;let b = a;b = 2;console.log(a,b) // =>
2022-02-24 09:58:02
87
原创 刷题|剑指 Offer 68 - II. 二叉树的最近公共祖先_JavaScript
题目描述剑指 Offer 68 - II. 二叉树的最近公共祖先解题思路参考K神：剑指 Offer 68 - II. 二叉树的最近公共祖先（DFS ，清晰图解）代码实现/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode
2022-02-23 19:07:00
81
原创 刷题|剑指 Offer 68 - I. 二叉搜索树的最近公共祖先_JavaScript
题目描述剑指 Offer 68 - I. 二叉搜索树的最近公共祖先解题思路二叉搜索树的特点：我们可以利用这个特点去找最近公共祖先代码实现/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @para
2022-02-23 18:52:09
66
原创 刷题|剑指 Offer 57 - II. 和为s的连续正数序列_JavaScript
题目描述剑指 Offer 57 - II. 和为s的连续正数序列解题思路动态规划+滑动窗口代码实现/** * @param {number} target * @return {number[][]} */var findContinuousSequence = function(target) { let res = []; let i=1, j=1; let sum = 0; while (i<= Math.floor(target / 2))
2022-02-23 12:51:09
78
原创 刷题|剑指 Offer 57. 和为s的两个数字_JavaScript
题目描述剑指 Offer 57. 和为s的两个数字解题思路方法1：map遍历加法转减法map方法2： 双指针注意：题中说这是一个递增数组，很容易想到双指针代码实现方法1：map遍历/** * @param {number[]} nums * @param {number} target * @return {number[]} */var twoSum = function(nums, target) { let m = new Map(); for (l
2022-02-23 11:52:42
67
原创 刷题|剑指 Offer 55 - II. 平衡二叉树_JavaScript
题目描述剑指 Offer 55 - II. 平衡二叉树解题思路纯纯活学活用上一题的方法二了咱就是说刷题|剑指 Offer 55 - I. 二叉树的深度_JavaScript代码实现/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {Tree
2022-02-23 11:43:07
66
原创 刷题|剑指 Offer 55 - I. 二叉树的深度_JavaScript
题目描述剑指 Offer 55 - I. 二叉树的深度解题思路方法1： 遍历找出每层节点，保存在临时数组中一层遍历完保存在结果数组中返回结果数组长度方法2：递归返回左右子树的最大值即可代码实现/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** *
2022-02-23 11:28:06
350
原创 刷题|剑指 Offer 54. 二叉搜索树的第k大节点_JavaScript
题目描述剑指 Offer 54. 二叉搜索树的第k大节点解题思路遍历二叉树，存储节点到数组数组节点排序返回倒数第k个代码实现/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @param {num
2022-02-23 11:16:39
72
原创 刷题|剑指 Offer 53 - II. 0～n-1中缺失的数字_JavaScript
题目描述剑指 Offer 53 - II. 0～n-1中缺失的数字解题思路方法1： 差集法构建完整数组用filter求差集方法2： 二分法暂略代码实现方法1：/** * @param {number[]} nums * @return {number} */var missingNumber = function(nums) { const test = Array.from(new Array(nums[nums.length - 1] + 1).keys());
2022-02-23 11:10:02
138
原创 刷题|剑指 Offer 53 - I. 在排序数组中查找数字 I_JavaScript
题目描述剑指 Offer 53 - I. 在排序数组中查找数字 I解题思路方法1：循环法方法2： 二分法注意：题目中说数组nums是排序数组感谢大佬提供的思路：剑指Offer——在排序数组中查找数字I（JS实现）代码实现方法1：循环法/** * @param {number[]} nums * @param {number} target * @return {number} */var search = function(nums, target) { if (!n
2022-02-23 10:11:26
408
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人