- 博客(88)
- 收藏
- 关注
RSS订阅原创 什么是[].slice.call(arguments)
今天刷牛客的时候碰到一道题是这样的，[].slice.call()这种用法之前没见过[].slice.call(arguments)能将具有length属性的对象转成数组简单解释一下就是arguments是一个类数组对象[]是一个空数组,也是一个对象slice()方法可以从已有的数组中返回选定的元素[].slice.call(arguments)就可以理解为arguments借用[]的slice()方法...
2022-05-27 18:18:12
452
1
原创 React自定义hook之useAsync处理异步请求并实现自动执行回调函数
代码实现import { useCallback, useState } from "react";import { useMountedRef } from "./index";interface State<D> { error: Error | null; data: D | null; stat: "idle" | "loading" | "error" | "success";}const defaultInitialState: State<null&
2022-05-18 17:40:42
1765
原创 React自定义hook之useMountedRef返回组件的挂载状态
前置知识useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。代码实现// 返回组件的挂载状态，如果还没挂载或者已经卸载，返回false；反之，返回trueexport const useMountedRef = () => { const mountedRef = useRef(fa
2022-05-18 16:55:47
726
原创 React中利用Error Boundaries实现错误捕捉
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。Error Boundaries介绍错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误错误边界无法捕获以下场景中产生的错误：事件处理异步代码（例如 se.
2022-05-18 09:01:20
340
原创 JavaScript算法题总结（五）哈希
BM50 两数之和/** * * @param numbers int整型一维数组 * @param target int整型 * @return int整型一维数组 */function twoSum( numbers , target ) { const ans=new Array(2) let map=new Map(); let n=numbers.length; for(let i=0;i<n;i++){// 遍
2022-05-12 00:23:49
428
1
原创 JavaScript算法题总结 （四）堆/栈/队列
BM42 用两个栈实现队列let stack1=[],stack2=[];function push(node){ // write code here stack1.push(node);}function pop(){ // write code here if(stack2.length==0){ while(stack1.length!==0){ stack2.push(stack1.pop());
2022-05-11 23:24:27
247
原创 JavaScript算法题总结 （三）二叉树
BM23 二叉树的前序遍历/* * function TreeNode(x) { * this.val = x; * this.left = null; * this.right = null; * } *//** * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * * * @param root TreeNode类 * @return int整型一维数组 */function preorderTraversal( root )
2022-05-11 18:45:43
326
原创 浏览器学习之垃圾回收机制
🤔 V8的垃圾回收机制V8实现了准确式GC，GC算法采用了分代式垃圾回收机制。因此，V8将内存（堆）分为新生代和老生代两部分。(1) 新生代算法新生代中的对象一般存活时间较短，使用Scavenge GC算法在新生代空间中，内存空间分为两部分，分别为From空间和To空间。在这两个空间中，必定有一个空间是使用的，另外一个空间是空闲的。新分配的对象会被放入From空间，当From空间被占满时，新生代GC就会启动了。算法会检查From空间中存活的对象并复制到To空间中，如果有失活的对象就会被销毁。当复制完
2022-05-11 15:29:29
232
原创 浏览器学习之渲染原理与渲染优化
😎 浏览器的渲染过程浏览器渲染主要有以下步骤：首先解析收到的文档，根据文档定义构建一颗DOM树，DOM树是由DOM元素及属性节点组成的然后对CSS进行解析，生成CSSOM规则树根据DOM树和CSSOM规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和DOM元素相对应，但这种对应关系不是一对一的，不可见的DOM元素不会插入到渲染树。还有一些DOM元素对应几个可见对象，它们一般是一些具体复杂结构的元素，无法用一个矩形来描述。当渲染对象被创建并添加到树
2022-05-11 14:46:50
169
原创 JavaScript函数柯里化的实现
函数柯里化指的是一种将多种参数的一个函数转换成一系列使用一个参数的函数的技术function curry(fn,args){ //获取函数需要的参数长度 let length = args.length; args = args || []; return function(){ let subArgs=args.slice(0); //拼接得到现有的所有参数 for(let i=0;i<arguments.length;i++)
2022-05-10 19:12:57
158
原创 JavaScript之手写call、apply、bind函数
😎 手写call函数实现步骤：判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call等方式调用的情况判断传入上下文对象是否存在，如果不存在，则设置为window处理传入的参数，截取第一个参数后的所有参数将函数作为上下文对象的一个属性使用上下文对象来调用这个方法，并保存返回结果删除刚才新增的属性 Function.prototype.myCall=function(context){ //判断调用对象 if(typeof this !== 'fun
2022-05-10 19:05:16
123
原创 计算机网络学习之HTTP缓存总结
😎 对浏览器缓存机制的理解浏览器缓存的全过程：浏览器第一次加载资源，服务器返回200，浏览器从服务器下载资源文件，并缓存资源文件与response header ，以供下次加载的时候对比使用下一次加载的时候，由于强制缓存优先级比较高，先比较当前时间与上一次返回200时的时间差，如果没有cache-control设置的max-age，则没有过期，命中强缓存，直接从本地读取资源。如果浏览器不支持HTPP1.1，则使用expires头判断是否过期如果资源已过期，则表明强制缓存没有命中，则开始协商缓存，向
2022-05-10 18:22:15
211
原创 JavaScript算法题总结（二）二分查找/排序
BM17 二分查找-I /* 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * * * @param nums int整型一维数组 * @param target int整型 * @return int整型 */function search( nums , target ) { // write code here let len = nums.length; if(!len)return -1; let [left ,
2022-05-09 22:23:02
227
原创 JavaScript算法题总结（一）链表
BM1 反转链表/*function ListNode(x){ this.val = x; this.next = null;}*/function ReverseList(pHead){ // write code here //递归终止条件 if(!pHead||!pHead.next) return pHead; let newhead = ReverseList(pHead.next); pHead.next.next = pHea
2022-05-05 12:44:12
1021
原创 JavaScript如何用setTimeout模拟setInterval
思路就是递归调用function myInterval(fun,time){ function inside(){ fun(); setTimeout(inside,time); } setTimeout(inside,time);}myInterval(fn,1000);function fn(){ console.log('嘿嘿');}
2022-05-02 23:10:01
628
原创 浏览器同源策略与如何解决跨域问题总结
🧐 什么是同源策略跨域问题实际就是浏览器的同源策略造成的。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要安全机制。同源指的是： 协议、端口号、域名必须一致。下表给出了与 URL http://store.company.com/dir/page.html 的源进⾏对⽐的示例:同源策略：protocol(协议)、domain(域名)、port(端口)三者必须一致同源策略主要限制了三个方面：当前域下的 js 脚本不能够访问其他
2022-05-01 17:44:06
2154
原创 浏览器本地存储Cookie、LocalStorage、SessionStorage用法与区别总结
😎 CookieCookie是最早被提出来的本地存储⽅式，在此之前，服务端是⽆法判断⽹络中的两个请求是否是同⼀⽤户发起的，为解决这个问题，Cookie就出现了。Cookie的⼤⼩只有4kb，它是⼀种纯⽂本⽂件，每次发起HTTP请求都会携带Cookie。Cookie的特性：Cookie一旦创建成功，名称就无法修改Cookie是无法跨域名的每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加
2022-05-01 01:45:42
424
原创 CSS中的两种盒模型总结
CSS3中的盒模型有两种：标准盒子模型和IE盒子模型盒模型都是由四个部分组成的，分别是margin、border、padding和content标准盒模型与IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了contentIE盒模型的width和height属性的范围包含了border、padding和content可以通过修改元素的box-sizing属性来改变元素的盒模型：box-sizing:content-
2022-05-01 00:31:54
306
原创 JavaScript手写Promise、Promise.then()、Promise.all()、Promise.race()
我始终认为要想真正的理解一个API也好，内置对象也罢，最好的方式就是手写一遍。😎 手写Promise const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; function MyPromise() { //保存初始化状态 let selt = this; //初始化状态 this.state = PENDING
2022-05-01 00:08:23
328
原创 浏览器从输入网址到看到网页的流程
一、解析URL⾸先会对 URL 进⾏解析，分析所需要使⽤的传输协议和请求的资源的路径。如果输⼊的URL 中的协议或者主机名不合法，将会把地址栏中输⼊的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了⾮法字符，如果存在⾮法字符，则对⾮法字符进⾏转义后再进⾏下⼀过程。二、缓存判断浏览器会判断所请求的资源是否在缓存⾥，如果请求的资源在缓存⾥并且没有失效，那么就直接使⽤，否则向服务器发起新的请求。三、DNS解析下⼀步⾸先需要获取的是输⼊的 URL 中的域名的 IP 地址，⾸先会判断本地
2022-04-30 19:43:59
360
原创 计算机网络学习之TCP/IP五层协议模型、TCP和UDP
一、TCP/IP五层协议TCP/IP 五层协议和 OSI 的七层协议对应关系如下：应⽤层 (application layer)：直接为应⽤进程提供服务。应⽤层协议定义的是应⽤进程间通讯和交互的规则，不同的应⽤有着不同的应⽤层协议，如 HTTP协议（万维⽹服务）、FTP协议（⽂件传输）、SMTP协议（电⼦邮件）、DNS（域名查询）等。传输层 (transport layer)：有时也译为运输层，它负责为两台主机中的进程提供通信服务。该层主要有以下两种协议：传输控制协议 (Transmission
2022-04-30 18:25:18
7426
原创 计算机网络学习之OSI七层模型
一、应用层OSI参考模型中最靠近用户的一层，为计算机用户提供应用接口，也为用户直接提供各种网络服务。我们常见的网络服务协议有HTTP、HTTPS、FTP、POP3、SMTP等在客户端与服务器中经常会有数据的请求，这个时候就会用到HTTP或HTTPS，在后端设计数据接口时，我们常常用到这个协议。FTP是文件传输协议，在学校的机房我们经常会用到这个，老师会通过FTP来发送一些实验报告什么的。SMTP是用来传输邮件的协议二、表示层表示层用于应用层数据的编码和转换功能，确保一个系统的应用层发送的数.
2022-04-30 16:15:13
1032
原创 如何用JavaScript实现数组扁平化
🧐 什么是数组扁平化将嵌套多层的数组“拉平”,变为一维数组。🤔 为什么要数组扁平化去除冗余，厚重和繁杂的装饰效果。😎 如何进行数组扁平化方法一：递归实现思路就是通过循环递归的方式，一项一项的去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组每一项的连接let arr=[1,[2,[3,4,5]]];function flatten(arr){ let result=[]; for(let i=0;i<arr.length;i++){
2022-04-29 18:26:36
846
原创 HTML元素居中的几种方式总结
🧐 文字的水平居中 <style> div{ width: 200px; height: 200px; background-color: greenyellow; color: white; /*行高等于盒子的高度，完成垂直居中*/ line-height: 200px; /*元素的水平居中*/
2022-04-29 17:15:16
2207
原创 JavaScript中6种继承方式总结
😎 原型链继承第一种是以原型链的方式来实现继承，但是这种方式实现存在的缺点是，在包含引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱,还有就是在创建子类型的时候不能向超类型传递参数。 function Parent() { this.type = '赛亚人'; this.skill = ['变身', '气功'] } function Child() { this.name = '卡卡罗特'; } Child.prototype = new Pa
2022-04-29 16:03:10
961
原创 浅谈JavaScript中new与Object.create()的差别
最近一直在读《你不知道的JavaScript(上)》这本书，里面的内容刷新了我对JavaScript的认知，其中有一段话是这样的，引起了我的思考。🤓 new关于new运算符的详细讲解可以看这篇文章😎 Object.create()MDN文档Object.create(Obj)的内部，并没有去调用Obj构造函数，而是调用了创建新对象的构造函数，因此Obj上的属性不会继承到Object.create创建的实例中😇 区别new创建出的空对象会绑定Object的prototype原型对象，但是O
2022-04-26 21:17:50
341
原创 JavaScript实现堆排序解决最小的K个数
今天刷算法遇到这个题，之前都是用快排写的，然而这次准备用堆排序写却写不出来了，重新复习了一手写个博客总结一下。B站上这个视频很不错https://www.bilibili.com/video/BV1Eb41147dK//题解function GetLeastNumbers_Solution(input, k){ function swap(i,j){ let temp = heap[i]; heap[i] = heap[j]; heap[j] = temp; }
2022-04-26 00:22:28
260
原创 React Native请求网络数据时本地缓存优先策略的实现
这里只放了核心代码，具体完整的代码可以去仓库里看看github地址这里本地存储数据用到的库官方文档地址AsyncStorageimport AsyncStorage from '@react-native-async-storage/async-storage';export const FLAG_STORAGE = { flag_popular: 'popular', flag_trending: 'trending',};export default class DataStore
2022-04-23 18:44:13
728
原创 React Native实现自定义顶部导航栏
效果import React, {Component} from 'react';import { Platform, StatusBar, StyleSheet, Text, View, ViewPropTypes,} from 'react-native';import PropTypes from 'prop-types';import DeviceInfo from 'react-native-device-info';const NAV_BAR_HEIGHT
2022-04-22 22:20:57
1622
原创 JavaScript手写实现AJAX请求以及使用Promise封装AJAX请求
😌 AJAX概念AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器 获取 XML 文档从中提取数据，再更新当前网⻚的对应部分，而不用刷新整个网⻚。🤓 实现步骤创建一个XMLHttpRequest对象在这个对象上使用open()方法创建一个http请求，open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息。在发起请求之前，可以为这个对象添加一些信息和监听函数。比如可以通过setReque
2022-04-22 17:45:21
418
原创 JavaScript手写instanceof
😇 作用instanceof运算符用于判断构造函数的prototype属性是否存在在对象的原型链中的任何位置。🥹 实现步骤首先获取类型的原型然后获得对象的原型然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为null，因为原型链最终为null😎 代码实现function myInstanceof(left,right){ let proto=Object.getPrototypeOf(left),//获取对象的原型 prototype=right.prototype;//获
2022-04-21 22:20:34
244
原创 React Native基于AsyncStorage实现简单的收藏夹功能之Dao层封装常用函数
AsyncStorage官方文档：https://react-native-async-storage.github.io/async-storage/import AsyncStorage from '@react-native-async-storage/async-storage';const FAVORITE_KEY_PREFIX = 'favorite_';export default class FavoriteDao { constructor(flag) { this..
2022-04-21 20:23:27
454
原创 JavaScript手写new实现构造函数实例化
😇 思路在调用new操作符的时候会发生以下四件事首先创建一个空对象设置原型，将对象的__proto__纸箱构造函数的protype对象让函数的this指向这个对象，执行构造函数的代码(为这个新对象添加属性)判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用型对象，则返回这个引用类型的对象😎 代码实现function objectFactory(){ let object=null; //shift() 方法移除数组的第一项,并返回该值 //在这里是获得接收到的第一个参数
2022-04-21 17:28:50
797
原创 JavaScript数据类型检测的四种方式
🧐 typeofconsole.log(typeof 1);// 'number'console.log(typeof true);// 'boolean'console.log(typeof 'str');// 'string'console.log(typeof []);// 'object'console.log(typeof function(){});// 'function'console.log(typeof {});// 'object'console.log(typeof u
2022-04-21 00:38:51
904
原创 JavaScript手写防抖和节流函数
🤓防抖函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发 ，则重新计时。这可以使用在一些点击请求的事件，避免因用户的多次点击向后端发送多次请求。应用场景按钮提交场景：防止多次提交按钮，只执行最后提交的一次服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次还有搜索联想词功能类似生存环境请用lodash.debounce代码实现function debounce(fn,wait){ let timer=null; return function(
2022-04-20 23:09:13
717
原创 React Native在React Navigation6.0版本如何实现动态顶部栏
const tabNames = [{name: 'Java'}, {name: 'Android'}, {name: 'ios'}];....//中间部分省略 只写出关键部分 mapRoute = tabNames.reduce((map, item) => { const route = () => <PopularTabPage tabLabel={item.name} />; //把所有的route都塞进一个对象里 return {
2022-04-19 23:58:29
280
原创 React Native一些自己封装的react navigation导航器常用的工具函数
使用方法 ，创建一个NavigationUtil.js的文件，把代码复制过去import React, {Component} from 'react';class NavigationUtil extends Component { /** *跳转到指定页面 */ static goPage(params, page) { const navigation = NavigationUtil.navigation; console.log('NavigationUt
2022-04-19 23:47:45
232
原创 React Native在React Navigation6.0版本如何实现动态路由
//在这里配置页面的路由import PopularPage from '../page/PopularPage';import MaterialIcons from 'react-native-vector-icons/MaterialIcons';import TrendingPage from '../page/TrendingPage';import FavoritePage from '../page/FavoritePage';import {createBottomTabNavig.
2022-04-19 23:00:53
675
1
原创 十分钟搞懂CSS属性border相交画三角形的原理及规律
其实很早就了解到可以利用border属性来画三角形，但是当时没认真思考原理和总结规律，写下这篇博客记录下我的想法。🤔两个结论分界线原则：假如把有宽度的border靠外的一边叫做外边，靠内的一边叫做内边，则各个外边的交点与相对应各个内边交点的连线就是各border之间的分界线内边的确定依赖于原div的各边外边的确定依赖于原div的各边以及border的宽度一刀切原则：某方向的border宽度如果为0，边框的样式会表现出一刀切的样子🫣举例论证<div></div>
2022-04-19 00:52:48
598
原创 十分钟狠狠地拿下CSS中的BFC
🤔 什么是BFC块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。MDN文档里的原话确实不怎么像人话，能看懂就奇了怪了。简而言之,BFC就是一个独立的布局环境，可以认为是一个容器，在这个容器里面你随便放都不会影响到容器外的布局。而且一旦触发了BFC，那容器内部怎么布局也不受外面影响。BFC在三种布局方式(正常布局流,浮动,绝对定位)中属于正常布局流🫣 如何触发BF
2022-04-18 23:24:06
181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人