javascript
文章平均质量分 54
swallowblank
这个作者很懒,什么都没留下…
展开
-
2021-07-19 虾皮前端笔试第三题 搬货员的最小转向次数
当时急了,没做出来,这个笔记本写代码是真的恶心,加上虾皮的那个界面,能看到的代码就那么七八行。导致我急了,结束后又缝缝补补,把代码写出来了,但是也不知道对不对。要是给我拿c++我早写出来了,气死我了。let line; let inputline = 1;let m, n;let mp;let snum = 0;while(line = gets(inputline)) { if (!line) break; if (inputline === 1) { m原创 2021-07-19 17:32:01 · 397 阅读 · 0 评论 -
手写一个深拷贝
function deepcopy (obj) { if (!(obj instanceof Object)) return obj; if (Array.isArray(obj)) { // 数组类型 const newArr = new Array(obj.length); for (let i=0; i<obj.length; i++) { newArr[i] = deepcopy原创 2021-07-17 14:55:46 · 76 阅读 · 0 评论 -
前端笔试题整理
链式调用题目:现给定如下代码,要求完成 find 函数使得控制台打印要求的内容。var data = [ { userId: 8, title: 'title1' }, { userId: 11, title: 'other' }, { userId: 15, title: null }, { userId: 19, title: 'title2' }];var find = function (origin) { // code here}var resu原创 2021-07-06 20:26:40 · 652 阅读 · 0 评论 -
HTML原生文档加载事件+React\Vue生命周期+浏览器的渲染 三者之间顺序关系思考
事件的起因是这样的:我有一个为自己的博客增加暗模式的需求,需要把用户的选择保存在loaclstorage里,但是要把内容发布到github Pages里需要在node环境下编译,就会出现找不到window,localstorage等对象,如果要解决这一问题就需要把逻辑写到useEffect里。但问题就随之而来了,经过后续的测试发现,useEffect的回调函数是在文档的onload事件之后的,那么就会发生样式闪烁的问题,因为,onLoad事件发生之前浏览器就已经开始绘制了,如果这时候再切换主题颜色,就有原创 2021-06-14 16:22:48 · 669 阅读 · 1 评论 -
手动实现防抖 与 节流
其实这种文章网上已经烂大街了,但是我还是要自己去手写一遍,一是便于记忆,二是提高自己的理解。今年四月份在阿里的实习招聘笔试题中,当时就出现了一道节流的题目,但是当时还没有看到这里,于是便稀里糊涂硬着头地写了,没想到当时自己第一次自主思考的节流的实现,居然和标准答案基本一致,还是挺惊讶的,因为之前从来没看过别人的代码。什么是防抖与节流?防抖先说说防抖。抖动,可以理解为一次事件的触发。有的事件有高频触发的特点,比如 mousemove,scroll,mousedown 等,尤其是指针移动这个事件,可以原创 2021-06-06 20:53:26 · 240 阅读 · 0 评论 -
this的绑定机制 以及 手写实现call、apply、bind
前言call apply bind 他们都是为了把对象绑定到这个函数的this上。其实我在这之前一直是这样理解的——“把this绑定到函数上”,毕竟传进来的参数是this,其实这么理解是正向的,但是一直感觉很难理解。直到今天看了一个视频,他这么反着一说,我突然有点茅塞顿开的感觉。其实仔细想一想,call,apply,bind 这三个函数执行的主体都是函数(函数中的this理解为占位符,他们只在执行该函数时才有明确的指向,因此我们需要清楚的知道,在某一时刻这个this到底表示的是什么,这也是JavaS原创 2021-06-01 14:01:51 · 177 阅读 · 0 评论 -
手写实现一个Promise
从简入繁实现一个Promise, Reference from zhihu1 构建一个简单的Promise类// 定义三种状态const PENDING = 'PENDING';const FULFILLED = 'FULFILLED';const REJECTED = 'REJECTED';class Promiss { // 构造函数传入的是一个函数executor constructor (executor) { this.status = PENDING;原创 2021-05-11 21:17:32 · 118 阅读 · 0 评论 -
在函数组件中模拟类组件的生命周期 & 获取某个HTML元素下第一个特定的元素
先说一个最经典的DidMounted,其他的后面遇到了慢慢补充。在函数组件中使用useEffect并且,依赖列表为空,可以模拟DidMountedReact.useEffect(() => { const headerList = []; const markdownBody = document.querySelector(".markdown-body"); const markdownNavLinkContent = document.querySelector(".原创 2021-04-20 21:14:23 · 147 阅读 · 0 评论 -
夜记Promise 与 事件循环 与 await/async
看完这篇文章后,https://blog.csdn.net/cc18868876837/article/details/97107219,我理会到了这道题我为什么做错了。async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');} async function async2() { console.log('async2 start'); ret原创 2021-03-16 00:20:56 · 185 阅读 · 0 评论 -
朝花夕拾 —— Promise
Promise 作为ES6中提出的十分重磅的对象,我自然是学了很久,但是,由于我对细节的疏忽,导致自以为对其理解的很到位,但是每当看起别人的源码总感觉哪里怪怪的,如今我就再强化学习一番。一个例子入手观察以下两个代码,看看有何不同,这也是我一直疏忽的关键点:片段1new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000);}).then(res => { aler原创 2021-03-05 21:16:26 · 79 阅读 · 0 评论 -
Intersection Observer学习(附懒加载实例)
文章目录1 定义2 用法2.1 options2.2 callback3 lazyload懒加载demo1 定义Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。说白了,就是判断一个元素与其父元素(或浏览器视窗)的重叠情况。2 用法var observer = new IntersectionObserv...原创 2019-10-14 14:22:23 · 330 阅读 · 0 评论 -
HTML中的几何与滚动
元素具有以下几何属性:offset系列:offsetParent — 是最接近的 CSS 定位的祖先(relative、absolute、fixed),或者是 td,th,table,body。offsetLeft/offsetTop — 是相对于 offsetParent 的左上角边缘的坐标。offsetWidth/offsetHeight — border+padding+content。client系列clientLeft/clientTop — 从元素padding外侧左上角到bo原创 2021-01-22 13:36:58 · 199 阅读 · 0 评论 -
给定年月,创建一个当月的日历
function createCalendar(elem, year, month) { let mon = month - 1; // months in JS are 0..11, not 1..12 let d = new Date(year, mon); let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th>转载 2021-01-21 12:35:08 · 174 阅读 · 0 评论 -
修改document
转载 2021-01-20 21:28:19 · 114 阅读 · 0 评论 -
一丢丢学习之webpack4 + Vue单文件组件的应用
一丢丢学习之webpack4 + Vue单文件组件的应用 之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star。就是很简单,由于是第一次用Vue写小demo,所以代码写的有点蠢很裸的那种,不像大神那样一看代码组...原创 2018-04-13 14:54:00 · 173 阅读 · 0 评论 -
前端杂谈
前端杂谈 1.JavaScript中的this:http://www.ruanyifeng.com/blog/2018/06/javascript-this.html2.js中字符串匹配,"index.html".indexOf(".html") != -1因为search和match的参数都是正则表达式,在匹配特殊字符时需要转化...原创 2018-07-08 18:00:00 · 99 阅读 · 0 评论 -
js——闭包的理解
js的一些点 1 闭包闭包就是说,能够读取其他函数内部变量的函数。其实这句话我不是很明白,因为我觉得闭包的作用是:延迟函数执行模拟私有变量根据第二点的描述,应该是阻止其他东西访问自身私有成员,到了这怎么变成读取其他函数内部变量了?反其道而行之?不管定义了,看看最经典的这个例子(延迟执行):function...原创 2019-04-06 20:00:00 · 144 阅读 · 0 评论 -
JS面试问题小总结——1
目录JS常见问题Q: JS有几种数据类型,其中基本数据类型有哪些!Q: null 和 undefined的区别Q:垃圾收集Q: 给一个DOM添加捕获和冒泡的两种写法的事件点击,谁先执行?(如何阻止冒泡)Q:相等运算符和严格相等运算符Q: 谈谈你对ajax 的理解,以及用原生 JS 实现有哪些要点需要注意;Q: JS 实现一个闭包函数,每次调用都自增1Q:...原创 2019-04-09 21:41:00 · 1690 阅读 · 0 评论 -
JavaScript - proxy
JavaScript - proxy Proxy对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。来看看常用的方法 handler.get()let o = { name: 'liwenchi', age: 10}var p = new Proxy(o, {...原创 2019-04-12 13:41:00 · 469 阅读 · 0 评论 -
HTMLCollection、 NodeList | children、 childNodes,以及节点类型
1 HTMLCollectionHTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection)。HTML DOM 中的 HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。注意以下几点:[Docuement, Element].getElementsBy[TagName, ClassName]()返回的就是一个HTMLCollection。但是,特殊的是[Docuement原创 2020-08-07 15:21:09 · 1271 阅读 · 0 评论 -
JS 正则表达式——自学笔记
从大二知道正则表达式,但是一直没有系统的学习过,每次用的时候都是抄百度,今天打算正规的学习一下文章目录1 创建声明一个正则对象2 RegExp() 构造函数3 字符串匹配常用方法3.1 正则对象方法3.2 字符串对象方法4 正则表达式语法 & 常用表达式1 创建声明一个正则对象有两种方法可以创建一个 RegExp 对象:一种是字面量,另一种是构造函数。字面量由斜杠包围而不是引号包围。构造函数的字符串参数由引号而不是斜杠包围。以下三种表达式都会创建相同的正则表达式:let reg原创 2020-08-27 17:32:10 · 264 阅读 · 0 评论 -
Ajax——XHR与Fetch的选择
Fetch Api 全面介绍与使用 (MDN)XMLHttpRequest vs the Fetch API: What’s Best for Ajax in 2019?原创 2020-09-29 10:42:05 · 177 阅读 · 0 评论 -
js的数组的一些操作
js的数组的一些操作目录js的数组的一些操作1 arr.reduce2 arr.forEach3 arr.map4 arr.filter()5 arr.sort()6.数组去重并排序7.Array.find() 和 findIndex()1 arr.reducelet xxx = arr.reduce( function (pv, cv,...原创 2019-04-06 15:30:00 · 141 阅读 · 0 评论