麦芒的博客

Vue中的虚拟DOM

qq_39554306 — Wed, 30 Jun 2021 10:53:50 +0800

Virtual DOM 是一棵以 JavaScript 对象， VNode 节点作为基础的树，实际上它只是一层对真实 DOM 的抽象，并最终可以通过一系列操作使这棵树映射到真实环境上。我们可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。模板 → 渲染函数 → 虚拟DOM树 → 真实DOM complie render creat 虚拟

如何讲好原型链

qq_39554306 — Wed, 30 Jun 2021 10:25:23 +0800

昨天面试字节，挂了，很多知识只是明白个大概，但无法自己表述出来，在知道和表述之间还有着巨大的鸿沟，同时也再次证明了学东西真的不图快，图快就真学不好了。之后的学习慢慢来，稳扎稳打。那我接下来以一篇知乎来自己总结原型链。 function Person(name){ // 1 this.name = name; } Person.prototype.sayName = function(welcome) { // 5 console.log(welcome, this.name);

Axios 的简易学习笔记

qq_39554306 — Wed, 23 Jun 2021 09:43:58 +0800

Axios是一个基于promise的HTTP库。功能特性：从浏览器中创建XMLHttpRequests 从node.js中创建http请求支持promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF 跨站请求伪造（Cross-site request forgery），通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。 get请求栗子： // 第一种写法 axios.get(

滑动窗口力扣最短超串

qq_39554306 — Wed, 28 Apr 2021 12:32:47 +0800

最近遇到两道滑动窗口的题都没有解出来，借此来学习这个早已熟悉却不怎么会用的概念。 Sliding Window：其实看到类似满足xx的最小区间的子串这类问题自然可以想到滑动窗口。一般滑动窗口要维护两个指针，l,r 1.当窗口内到元素未达到条件时， r++ 2.当窗口内到元素达到条件时，l++ function slideWindow(nums){ let n = nums.length() let l = 0, r = 0, ans = 0 while(r < n){ while(nums

表单

qq_39554306 — Tue, 27 Apr 2021 10:44:08 +0800

input 输入框 -type属性：输入框类型 type：text，普通文本输入框 type：password 密码框 type：date 日期选择框 type：search 搜索框 type：color 颜色选择器 type：checkbox 多选框 type：radio 单选框（取同一个name属性） like this: -value属性：输入框的值 -placeholder属性：显示提示的文本，文本框

fromCharCode(),charCodeAt(),charAt()

qq_39554306 — Mon, 26 Apr 2021 16:36:14 +0800

fromCharCode() 可接受一个指定的unicode值，然后返回一个字符串举个栗子： String.fromCharCode(72,69,76,76,79) 'HELLO' charCodeAt() 返回指定位置的字符的unicode编码，返回值是0～65535之间的整数，参数是idx，如果是负数或大于等于字符串的长度，返回NaN ‘HELLO’.charCodeAt(0) 72 ‘HELLO’.charCodeAt(-1) NaN let str = "A" str.charCodeAt()

给定两个树的节点，求它们的最短距离 JS

qq_39554306 — Mon, 26 Apr 2021 09:43:59 +0800

//method 1 const shortestDistance = function(root, p, q) { // 最近公共祖先 let zx = lowestCommonAncestor(root,p,q) let pathp = [], pathq = [] getPath(zx,p,pathp) getPath(zx,q,pathq) return pathp.length + pathq.length } // 最近公共祖先 const lowestCommonAncestor

面试题 08.14. 布尔运算 JS

qq_39554306 — Sun, 25 Apr 2021 17:05:47 +0800

/** * @param {string} s * @param {number} result * @return {number} */ var countEval = function(s, result) { let n = s.length // 创建三维数组 let dp = new Array(n).fill(0).map(() => new Array(n).fill(0).map(() => new Array(2).fill(0)))

实现数组a = [1,[2,[3,[4,null]]]]转换[4,[3,[2,[1,null]]]]

qq_39554306 — Sun, 25 Apr 2021 16:36:07 +0800

(function main() { let a = [1,[2,[3,[4,null]]]] // 实现数组 b = [4,[3,[2,[1,null]]]] let path = [] while(a){ path.push(a.shift()) a = a[0] } console.log(path) let real = [a] while(path.length){ let arr =

浮动

qq_39554306 — Sun, 25 Apr 2021 16:10:01 +0800

浮动视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 1.常规流 2.浮动 3.定位应用场景 1.文字环绕 2.横向排列浮动的基本特点修改float属性值为： -left ：左浮动，元素靠上靠左 -right：右浮动，元素靠上靠右默认值为none 1.当一个元素浮动后，元素必定为块盒（更改display为block） 2.浮动元素的包含块，和常规流一样，为父元素的内容盒盒子尺寸 1.宽度为auto时，适应内容宽度 2.高度为auto时，适应内容宽度 3.margin为auto时，为0 4.

递归 + 力扣（链表反转，最近公共祖先，递增顺序搜索树）

qq_39554306 — Fri, 23 Apr 2021 10:14:02 +0800

因为最近无次序刷力扣又刷到了当时的递归，每次看递归的代码都会有一定的理解，但隔了一段时间又没啥思路。先来看一下递归的模版结构： // JavaScript function recur(level, param) { // 递归的终止条件 if (level > MAX_LEVEL) { return; } // 处理当前层逻辑 process(level, param); 　// 下探到下一层 recur( level: level + 1,

reduce()使用场景、用法总结

qq_39554306 — Thu, 22 Apr 2021 18:26:41 +0800

先来看MDN上的解释： reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。举个栗子： const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected outpu

层叠

qq_39554306 — Wed, 21 Apr 2021 15:32:39 +0800

层叠声明冲突：同一个样式，多次应用到同一个元素层叠：解决声明冲突的过程，浏览器自动处理（权重计算） 1 1.比较重要性重要性从高到低：作者样式表：开发者书写的样式 1）作者样式表中的！important样式 2）作者样式表中的普通样式 3）浏览器默认样式表中的样式 2.比较重要性看选择器总体规则：选择器选中的范围越窄，越特殊具体规则：通过选择器，计算出一个4位数（x x x x） 1）千位：如果是内联样式，记1，否则记0 2）百位：等于选择器中所有id选择器的数量 3）十位：等于选择器中所有类

CSS画一个三角形

qq_39554306 — Wed, 21 Apr 2021 14:33:58 +0800