yleavesw-CSDN博客

原创前端安全之CSRF攻击

个人博客文章目录几种常见的 CSRF 攻击：1. GET 类型的 CSRF 攻击2. POST 类型的 CSRF 攻击3. 链接类型的 CSRFCSRF 特点防护策略同源检测几种 Referer 策略CSRF TokenCookie 的 SameSite 属性REFCSRF（Cross-site Request Forgery），跨站请求伪造攻击，简单来说就是攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送请求，并利用受害者在被攻击网站中获取的用户凭证，达到冒充受害者的目的，并使用受害

2021-07-03 22:17:15 874 1

原创 Object or Function-JS 中的鸡与蛋问题

个人博客 JS 中有一个奇怪的现象：我们知道，instanceof 关键字是用于判断左值的原型链上是否存在右值，那按照这样的话不就是说 Object 和 Function 存在循环继承了吗？那 Function 和 Object 的关系到底是什么呢？探究其实对于所有构造函数/类，其 __proto__ 属性都是指向了一个函数：ƒ () { [native code] }，而 Function 的 prototype 属性也指向了这个函数：而这个 [naitve code]

2021-07-03 22:14:27 330 1

原创 React + Threejs + Swiper 实现全景图效果

咱先看看全景图实现效果：展示地址截图：体验了一下是不是感觉周围环境转了一圈，感觉世界是圆的？???? 没错！恭喜你答对了！地球就是圆的！????全景效果实现有了上面的提示，对 threejs 有一点了解的小伙伴可能就猜出来了，这个全景效果其实就是使用一个球体实现的~ 而我们只是在球体内表面上贴了一张纹理贴图而已（滚轮向外滚就可以看到这个球体了，看上去像个玻璃球，怪好看的，还有个彩蛋????（好吧，说出来就不是彩蛋了））：初始时，我们的视角在球体正中心，视角的移动则是依靠

2021-06-27 23:28:19 1396 4

原创 React | Expected an assignment or function call and instead saw.....

记一个 react 程序报的错误：Expected an assignment or function call and instead saw an expression，直译是：需要是一个函数调用或赋值，不过却是一个表达式。这个错误让我摸不着头脑，反复看代码也没发现哪出问题了，最后在看到这篇文章的时候才发现是哪错了（箭头函数里的括号问题）。这里记录一下来加深印象，也给出现同样问题的朋友们提供一个案例。其实主要也是自己基础不扎实的问题在我对箭头函数的印象中：若箭头函数的函数体中只有一

2021-05-29 20:02:26 9155 2

原创 dom 元素拖拽实现

文章目录原生 JS 实现 div 拖拽HTML 拖拽 APIREF 之前找实习的时候，面试官出了道 “原生 JS 实现 div 元素拖拽”，当时实现了个大概，不过很多细节都没写好，刚好最近又看到了相关文章，因此这里再好好整理一下 JS 中的元素拖拽实现。原生 JS 实现 div 拖拽实现效果：演示地址要实现这样的元素拖拽效果，一般思路是这样的：首先要被拖拽的 div 元素需要是定位元素，因为我们要使用 left 和 top 样式来不断更新 div 的位置设置一个 flag ，当鼠标左键在

2021-05-28 21:39:19 2578

原创 JS自动插入分号机制ASI

文章目录问题背景ASI 插入分号的时机1. JS 中一些语法后加上换行符后会自动加上分号2. 并入新行后若成为非法语句则会自动插入分号3. 以自增/减运算符 ++、-- 开头4.特殊情况如何查看自动插入分号后的代码小结REF个人博客文章同步地址问题背景敲代码的时候写了一条判断语句，大致作用是判断两个长方体是否贴合，因此需要对三个维度分别进行判断：return check(b1.min.x, b2.min.x) && check(b1.max.x, b2.max.x) &a

2021-05-28 21:35:39 636

原创 JS深入--词法作用域、执行上下文与闭包

文章目录词法作用域执行上下文与词法环境闭包闭包练习作用域链REF 个人博客文章同步地址词法作用域 JS 使用的是词法作用域（或称为静态作用域），函数的作用域在定义的时候就决定了，与词法作用域相对的是动态作用域，动态作用域会在运行时确定的。一个《JS权威指南》中的例子：var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ retur

2021-05-28 21:31:59 370 1

原创 ThreeJS 测距功能

文章目录选点绘线动态绘制线段和显示距离文字居中撤销操作测距功能，也就是选择两点，计算它们的距离，实现效果大致如下：上图中主要涉及几个操作：点击鼠标左键选点，点击鼠标右键停止选点，若选择点数超过两点，则两点绘制一条线段动态绘制线段动态绘制距离确定两点后将距离文字居中按下 ESC 键撤销上一步操作选点绘线首先，我们需要通过鼠标在三维空间中选点，但是我们的屏幕是二维的，还有一维不知道，因此没办法直接凭空选点，因此目前的选点都是基于某个物体来的，即在物体上选点。那么要如何获取鼠

2021-01-28 13:57:55 6950 15

原创 Redux入门学习

文章目录基本概念三大原则使用 Redux 最简单的示例：计数器梳理使用 react-redux 的示例：计数器梳理使用 combineReducers 合并 reducer中间件自定义中间件使用第三方中间件异步中间件使用 redux-thunk 的示例Redux 示例优化Redux 调试工具REFDemo 仓库：https://github.com/yleave/redux-demo基本概念有几个图片可以帮助理解 redux: 这张图片说明了 reudx 的作用：组件间的信息传递不用再只能通过

2021-01-21 11:32:34 245

原创函数作用域和闭包

文章目录闭包1. 闭包可以访问当前函数以外的变量2. 即使外部函数已结束，闭包仍能访问其中定义的变量3. 闭包可以更新外部变量的值作用域链全局环境非嵌套的函数嵌套的函数多个闭包闭包引用红皮书 p178 上对闭包的陈述：闭包是指有权访问另一个函数作用域中的变量的函数。有两个要点：闭包是函数它可以访问另一个函数的作用域中的变量闭包有几个特点：1. 闭包可以访问当前函数以外的变量function getOuter() { let date = '112'; f

2021-01-14 20:47:51 684

原创 threejs画面拖动事件判断

文章目录1. 根据相机是否移动来判断是否进行了拖拽2.设置鼠标监听事件小结前因：想实现一个小功能，有一个参数 lockTiles，当鼠标在屏幕上拖动时，参数 lockTiles 设置为 true，停止拖动时，lockTiles 重设为 false。思考了一下，这个功能并不难，有两个方向可以实现这个功能：根据相机是否移动来设置设置鼠标监听事件，使用 mousedown、mousemove 和 mouseup 来判断是否进行了拖动不过在对鼠标进行事件监听时遇到了一些坑点。。1. 根据

2021-01-14 20:44:05 2801 3

原创 webpack基础1:使用webpack打包js代码

文章目录从一个示例开始全局安装方式局部安装方式官网介绍：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（简单来说就是在使用ES6的模块编程时，webpack会分析这些文件的关系，然后打包成一个 JS 文件，最后直接使用这个 JS 文件即可。从一个示例

2021-01-14 20:42:25 812

原创 webpack 配置 babel

文章目录根据 webpack 版本的不同，安装的 babel 依赖有些区别，下面的是 webpakc 4.2 及以上版本安装的依赖。 4.2 之前的是：babel-core、babel-preset-env 要配置 babel 首先需要安装 @babel/core，这是 babel 的核心编译包：cnpm install --save-dev @babel.core 然后需要安装 babel-loader 来帮助我们加载使用 babel：cnpm i --save-dev babel-lo

2021-01-14 20:40:12 612

原创股票问题

文章目录121.买卖股票的最佳时机解法1：122.买卖股票的最佳时机 II解法1：贪心1解法2：贪心2解法3：动态规划空间优化123. 买卖股票的最佳时机 III解法1：动态规划188. 买卖股票的最佳时机 IV解法1：动态规划309. 最佳买卖股票时机含冷冻期解法1：动态规划714. 买卖股票的最佳时机含手续费解法1：贪心解法2：动态规划股票问题小结总结一下力扣上的股票交易问题。有：121.买卖股票的最佳时机122. 买卖股票的最佳时机 II123. 买卖股票的最佳时机 III1

2021-01-10 14:18:35 406

原创原型和原型链

文章目录prototype`__proto__`constructor原型的原型实例与原型链补充constructor`__proto__`属性 “继承” 首先，在 JS 中可以使用类或构造函数来创建一个实例：function Person() {}// orclass Person {}Person.prototype.name = 'Kevin';let p1 = new Person();let p2 = new Person();// p1.name === p2.name =

2021-01-08 22:17:08 141

原创词法作用域和动态作用域

文章目录作用域静态作用域和动态作用域作用域作用域是指程序源代码中定义变量的区域。它规定了如何查找变量，也是就确定当前执行代码对变量的访问权限。 JS 采用了词法作用域（lexical scoping），也就是静态作用域。静态作用域和动态作用域 JS 采用的词法作用域是静态作用域，因此函数的作用域在函数定义的时候就决定了。与静态作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。例如：var value = 1;function foo() { co

2021-01-08 22:14:48 247

原创 3.JS内存机制

文章目录变量的存放内存回收垃圾回收算法引用计数标记清除内存泄漏内存泄漏的识别方法1 浏览器方法2 命令行方法四种常见的 JS 内存泄漏1.意外的全局变量2. 被遗忘的计时器或回调函数3. 脱离 DOM 的引用4. 闭包 JS 内存空间分为栈、堆、池（一般归类为栈中）。其中栈存放变量，堆存放复杂对象，池存放常量，因此也叫常量池。变量的存放 JS 使用了传统的堆栈来保存变量：基本类型：保存在栈内存中，这些类型在内存中有固定的大小，通过按值来访问。基本数据类型一共有 6 种：Undefined、N

2021-01-08 22:12:43 384

原创 LeetCode 399.除法求值

https://leetcode-cn.com/problems/evaluate-division/ 给出方程式 A / B = k, 其中 A 和 B 均为用字符串表示的变量， k 是一个浮点型数字。根据已知方程式求解问题，并返回计算结果。如果结果不存在，则返回 -1.0。输入总是有效的。你可以假设除法运算中不会出现除数为 0 的情况，且不存在任何矛盾的结果。示例 1：输入：equations = [["a","b"],["b","c"]], values = [2.0,3.0], qu

2021-01-05 17:44:42 295

原创 LeetCode 279. 完全平方数

https://leetcode-cn.com/problems/perfect-squares/ 给定正整数 n，找到若干个完全平方数（比如 1, 4, 9, 16, …）使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。示例 1:输入: n = 12输出: 3解释: 12 = 4 + 4 + 4.示例 2:输入: n = 13输出: 2解释: 13 = 4 + 9.解法1：递归 + 记忆数组对于一个正整数数 n，我们需要找出它的最少完全平方数的组合个数。首先

2021-01-04 19:19:27 258

原创 1.JS 执行上下文和执行栈

文章目录执行上下文的类型全局执行上下文函数执行上下文Eval 函数执行上下文执行栈执行上下文的创建This Binding词法环境（Lexical Environment）变量环境（Variable Environment）执行阶段执行上下文就是当前 JS 代码被解析和执行时所在的环境的抽象概念，JS 中运行的代码都是在执行上下文中进行的。执行上下文的类型全局执行上下文默认的执行上下文，一个程序中只有一个全局执行上下文。不在任何函数中的代码都位于全局执行上下文中。它会：1. 创建一个全局对象

2021-01-02 16:14:34 174

原创 2.JS执行上下文和变量对象

文章目录执行上下文栈函数上下文变量对象执行过程进入执行上下文代码执行两个例子12 JS 是单线程语言，因此执行顺序是顺序执行，不过 JS 引擎在执行 JS 代码的时候并不是逐行执行，而是一段一段地分析执行，先是编译阶段，然后才是执行阶段。具体的体现可看例子：例一变量提升我们在未定义 foo 之前就使用了它，结果不会报错，而是会为 undefined，随后， foo 会像我们定义的那样先是输出 foo1 ，后输出 foo2。console.log(foo); // undefine

2021-01-02 16:13:42 225 3

原创剑指 Offer 51. 数组中的逆序对

文章目录解法1：二叉搜索树解法二：归并https://leetcode-cn.com/problems/shu-zu-zhong-de-ni-xu-dui-lcof/在数组中的两个数字，如果前面一个数字大于后面的数字，则这两个数字组成一个逆序对。输入一个数组，求出这个数组中的逆序对的总数。示例 1:输入: [7,5,6,4]输出: 5限制：0 <= 数组长度 <= 50000 在数组中的两个数字，如果前面一个数字大于后面的数字，则这两个数字组成一个逆序对。输入一个数组，求出这

2020-12-19 19:17:21 120 1

原创 JS 知识点杂记

文章目录闭包this 指向函数上下文类上下文箭头函数作为构造函数作为一个 DOM 事件处理函数作为一个内联事件处理函数闭包this 指向函数的调用方式决定了 this 的值（运行时绑定）。ES5 引入了 bind 方法来设置函数的 this 的值，ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定，this 的值将保持为闭合词法上下文的值。可以使用 globalThis 来获取全局对象，无论代码是否在当前上下文中运行。函数上下文在函数内部，this的值取决于函数被调用的方式。

2020-12-15 20:30:55 99

转载 Set、Map、和WeakSet、WeakMap

文章目录集合（Set）Set 实例属性constructorsizeSet 实例方法操作方法遍历方法WeakSet字典 MapMap 的属性constructorsize操作方法遍历方法与其他数据结构的相互转换map 转 arrayarray 转 mapmap 转 object方法 1方法 2方法 3object 转 mapmap 转 JSONJSON 转 mapWeakMap方法集合（Set）Set 是 ES6 新增的数据结构，类似于数组，但其成员是唯一无序的，没有重复的值。Set 对象可根据 it

2020-12-15 20:30:02 284

原创 LeetCode 5620.连续连接的二进制数字

文章目录写法1 ：耿直模拟写法2 ：二进制移位模拟第一次 JS 双百，虽然是虚假的双百 ????写法1 ：耿直模拟使用 JS 中的进制转换函数 toString 和 parseInt 实现模拟。 toString 能将十进制数字转换为任意进制数字，如 (5).toString(2) = 101 parseInt 能将二进制数字转换为十进制数字，如 parseInt('101', 2) = 5 不过这种写法效率可能有点差，会超时…var concatenatedBinary =

2020-12-06 15:44:50 161

原创 JS 数组

文章目录数组获取数组中的最大、最小值创建多维数组数组去重1.使用 set 去重2.使用 filter 去重3.数组遍历判断两个数组的内容是否相同1. 数组排序 + 转字符串2. 编写 Array.prototype.equals数组获取数组中的最大、最小值let arr = [3, 5, 1, 7, 4];console.log(Math.max(...arr)); // 7console.log(Math.min(...arr)); // 1创建多维数组以创建 5x5 的二维数组为例：

2020-11-27 16:35:22 89

原创 JS 函数

文章目录函数函数也是对象构造器函数构造器函数实例化参数arguments函数中的默认参数展开语法作为函数的默认参数Apply & Callapplycall第一个例子第二个例子apply 和 call 的使用选择apply 的一些妙用Math.max / min + applyarray.pushbind 函数例1函数函数也是对象function bark() { console.log('Woof!');}bark.animal = 'dog'; 上面的代码在 JS 中是可行

2020-11-27 16:33:35 361

原创 JS 对象

文章目录对象JS 中，对象的 `key` 都会被转为 `string` 类型。判断对象是否为空1. object.keys()2.将对象转化为json字符串，再判断该字符串是否为"{}"3.for in 循环判断4.Object.getOwnPropertyNames()方法比较对象中的内容是否相同，编写 Object.equals 函数对象的一些方法Object.prototype.hasOwnProperty()Object.defineProperty()Object.entriesObject.as

2020-11-27 16:30:12 342

原创奇妙的算法知识

文章目录位运算 n & n-1用途 1 ：判断一个数是否是 2 的幂次方用途2：计算一个数的二进制中有多少个 1位运算 x & -x位运算异或 ^位运算 n & n-1 n&(n-1)作用：将n的二进制表示中的最低位为1的改为0 例如 20 & 19 = 16 => 10100 & 10011 => 10000 21 & 20 = 20 => 10101 & 10100 => 10100 因此对于奇数来

2020-11-19 22:14:06 254

原创 LeetCode 140. 单词拆分 II

文章目录解法1：回溯 + 记忆数组，记录当前字符串解法2：回溯 + 记忆数组，记录索引 `i` 到字符结尾的字符串能拆分的组合https://leetcode-cn.com/problems/word-break-ii/难度：困难给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict，在字符串中增加空格来构建一个句子，使得句子中所有的单词都在词典中。返回所有这些可能的句子。说明：分隔时可以重复使用字典中的单词。你可以假设字典中没有重复的单词。示例 1：输入:s =

2020-11-16 18:17:37 120

原创 LeetCode 25. K 个一组翻转链表

https://leetcode-cn.com/problems/reverse-nodes-in-k-group/难度：困难给你一个链表，每 k 个节点一组进行翻转，请你返回翻转后的链表。 k 是一个正整数，它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍，那么请将最后剩余的节点保持原有顺序。示例：给你这个链表：1->2->3->4->5 当 k = 2 时，应当返回: 2->1->4->3->5 当 k =

2020-11-14 21:29:21 87

原创 NC45实现二叉树先序、中序和后序遍历

文章目录解法1：Morris 算法题目地址如标题，实现二叉树的三序遍历。例输入：1, 2, 3 输出：[[1, 2, 3], [2, 1, 3], [2, 3, 1]] 输出的数组就是[前、中、后] 序的遍历。解法1：Morris 算法递归和非递归的三序遍历都比较简单，迭代版本的递归可看下面几个链接：前序遍历中序遍历后序遍历这里主要使用 Morris 算法进行三序遍历。 Morris 算法是一种迭代版本的遍历，使用了树中空闲的指针，因此不需要使用额外空间（O

2020-10-30 12:59:39 818

原创 NC93设计LRU缓存结构

文章目录解法1：queue + map解法2：双向链表 + map题目地址题目简述：设计数据结构，模拟 LRU（Least Recently Used），且要实现两个时间复杂度为 O(1) 的方法：set(key, value) ：往 LRU 结构中插入记录 key -> valueget(key) ：从 LRU 结构中获取 key 对应的 value ，若无该记录，返回 -1 每当使用了这两个方法之一，这个 key 记录就会变成当前最常用的记录；限制了存储容量 k，当保存的记

2020-10-29 14:17:57 722

原创剑指 Offer 17. 打印从1到最大的n位数

文章目录解法1：回溯https://leetcode-cn.com/problems/da-yin-cong-1dao-zui-da-de-nwei-shu-lcof/难度：简单输入数字 n，按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3，则打印出 1、2、3 一直到最大的 3 位数 999。示例 1: 输入: n = 1 输出: [1,2,3,4,5,6,7,8,9] 说明：用返回一个整数列表来代替打印n 为正整数解法1：回溯这题正常来说思路是

2020-10-28 21:59:05 171

原创 LeetCode 144. 二叉树的前序遍历

https://leetcode-cn.com/problems/binary-tree-preorder-traversal/难度：中等给定一个二叉树，返回它的前序遍历。示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3]进阶: 递归算法很简单，你可以通过迭代算法完成吗？解法1：迭代能使用递归完成的算法，一般也能使用迭代来完成，递归其实就是使用了栈来保存当前的上下文环境，因此可以自定义栈来保存所需的

2020-10-27 14:09:50 115

转载球心坐标与本地坐标

文章目录1 球心坐标(ECEF)与本地坐标(NEU)2 矩阵的几何意义3 优化转载自： https://www.cnblogs.com/fuckgiser/p/6688531.html1 球心坐标(ECEF)与本地坐标(NEU) 假如你来到一个陌生城市，你很可能需要问路、通常会告诉你向北走100米，右转，向东走100米，理解起来很直观。你给儿子买了一个地球仪，你从北京(39,115)转到伦敦 (51,0)，这个动作就可以分解为两步：先转到同一个经度(39,0)，在转到同一个维度(51,0)

2020-10-26 15:23:33 2251

原创 LeetCode 845. 数组中的最长山脉

https://leetcode-cn.com/problems/longest-mountain-in-array/难度：中等我们把数组 A 中符合下列属性的任意连续子数组 B 称为 “山脉”：B.length >= 3存在 0 < i < B.length - 1 使得 B[0] < B[1] < ... B[i-1] < B[i] > B[i+1] > ... > B[B.length - 1]（注意：B 可以是 A 的任意子数组

2020-10-25 21:35:09 229

原创 LeetCode 1024. 视频拼接

文章目录题意简述解法1：贪心 + 特判解法2：贪心解法3：动态规划今天是 10.24，照常打开了力扣，就看到了首页上的 1024大冒险点开玩了下，还蛮有意思的，不过没点几下就挂了，还得做这个第 1024 题才能复活，然后这题还是今天的每日一题，嗯，有点意思，八说了，祝大家 1024 快乐！开冲！https://leetcode-cn.com/problems/video-stitching/难度：中等你将会获得一系列视频片段，这些片段来自于一项持续时长为 T 秒的体育赛事。这些片段可

2020-10-24 20:40:30 13322

原创线性代数相关知识

文章目录线性（向量）空间基本知识向量向量点乘叉乘矩阵变换缩放位移旋转矩阵的组合仿射变换概念数学表达仿射变换理解平移变换反射变换旋转变换线性（向量）空间基本知识１）线性空间： n 维有序数组组成的向量的全体集合构成的空间称为 n 维向量空间，也即 n 维线性空间。２）线性相关与线性无关：在ｎ维线性空间中的ｎ个ｎ维向量中，若存在１个向量，可以由其它ｎ－ｌ个ｎ维向量线性表示，则称这ｎ个ｎ维向量是线性相关的。此时，ｎ个ｎ维向量组成的矩阵的秩小于ｎ。若不存在可以被其他ｎ－１个向量线性表示的向量

2020-10-23 14:57:29 1213

原创 LeetCode 236. 二叉树的最近公共祖先

文章目录解法1：保存祖先节点+逐个判断解法2：深度优先遍历解法3：记录祖先节点https://leetcode-cn.com/problems/lowest-common-ancestor-of-a-binary-tree/难度：中等给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为：“对于有根树 T 的两个结点 p、q，最近公共祖先表示为一个结点 x，满足 x 是 p、q 的祖先且 x 的深度尽可能大（一个节点也可以是它自己的祖先）。” 例如，给定

2020-10-23 13:35:47 131