tinyint_813的博客

前端-脑图

tinyint_813 — Sun, 18 Sep 2022 21:36:32 +0800

前端学习脑图

前端知识积累

tinyint_813 — Fri, 29 Jul 2022 15:23:42 +0800

前端知识

立即执行函数、闭包

tinyint_813 — Thu, 09 Sep 2021 10:40:43 +0800

// for (var i = 0; i<3; i++){ // setTimeout(function (){ // console.log(i) // }) // } // 怎样输出 0 1 2 // let 来声明块变量，这时候变量就能作用于这个块 // for (let i = 0; i<3; i++){ // setTimeout(function (){ // .

JS中的slice，深拷贝？浅拷贝？

tinyint_813 — Thu, 02 Sep 2021 17:27:01 +0800

首先，slice是对数组的操作 b = a.slice(); 如果a数组里的值都是基本数据类型，那就是深拷贝其次，如果其中有引用数据类型，那拷贝的就是引用数据类型的地址，那么改了a，b对应的引用类型也会改。最后注意，如果 b[2] = 100, 对应的引用类型 a[2]不会更改，因为 b[2]改的是指针，不是引用数据类型 ...

cookie、sessionstorage、localstorage区别及应用场景

tinyint_813 — Wed, 01 Sep 2021 16:10:42 +0800

相同点：都是同源的、保存在浏览器的 cookie 存储大小：4kb，适合保存小数据请求都会传送到服务器应用场景：判断用户是否登陆过网站、一般存储用户名密码相关信息 localstorage 存储大小：5MB 生命周期：永久，除非主动删除请求不会传送到服务器，因为存储在本地应用场景：统计页面访问次数 sessionStorage 存储大小：5MB 生命周期：关闭了浏览器窗口后就会被销毁请求不会传送到服务器，因为存储在本地应用场景：统计当前页面元素的点击次数 ...

Cookie详解

tinyint_813 — Wed, 01 Sep 2021 15:52:13 +0800

1、Cookie目的由于http是无状态的，所以可以通过cookie来记录用户状态。服务器会在响应头的 set-cookie里面添加一个识别码，浏览器会把cookie保存起来。再次请求该网页时，会在请求头里增加cookiei字段、这样服务器就可以知道用户状态。 2、Cookie介绍 cookie是用name-value的形式存储的 cookie的创建方式（后端） new一个cookie传参name-value，设置生命周期，添加到响应头 protected void doGet(HttpServ

标准盒子模型和怪异盒子模型(IE盒子模型)

tinyint_813 — Wed, 01 Sep 2021 11:38:22 +0800

标准盒子模型设置方式：border-sizing: content-box（默认）包含：margin、border、padding、content 怪异盒子模型(IE盒子模型) 设置方式：border-sizing: border-box 包含：margin、border、padding、content 区别标准盒子的总宽度为： margin+border+padding+content = margin+border+padding+width 怪异盒子的总宽度为：margin+border+pad

三个元素平均分配宽度

tinyint_813 — Wed, 01 Sep 2021 10:48:50 +0800

采用flex布局把三个子元素都写上 flex:1 就会平分

JavaScript严格模式下this的指向

tinyint_813 — Wed, 01 Sep 2021 10:40:53 +0800

在严格模式下全局作用域的this指向window对象全局作用域中函数的this为undefined 对象、事件之类的就是谁调用就是谁参考资料：https://www.jb51.net/article/118506.htm

HTTP2详解

tinyint_813 — Wed, 18 Aug 2021 15:31:20 +0800

https://http2-explained.haxx.se/zh/part3

蛇形打印二叉树

tinyint_813 — Tue, 03 Aug 2021 17:08:12 +0800

采用层序遍历的方式。虽然leetcode有点问题，但结果没错的 var levelOrder = function(root) { if(!root) return null; let res = []; let flag = 1; let queue = []; queue.push(root); while(queue.length > 0){ let temp = []; let tempQ = [];

统计一个元素出现的次数（通过循环arr.index(值)不为-1就增加计数器，并用splice删除节点）

tinyint_813 — Mon, 21 Jun 2021 20:46:20 +0800

/*统计一个数字在排序数组中出现的次数*/ // indexOf()：可返回某个指定的字符串值在字符串中首次出现的位置，没有出现则返回-1 // splice()：向从数组中添加/删除项目，然后返回被删除的项目。 // .splice(index,howmany,item1..itemn)：index代表索引，howmany代表删除几个数字，若为0则是插入。item代表插入的值 var findNums = function (nums, target){ res = 0; while (n

找出数组中超过一半的数字（遍历整个数组，利用map存储对应的节点和次数，用has, get, set更新节点的次数；遍历完后根据get到的值是否大于len/2来得到元素）

tinyint_813 — Mon, 21 Jun 2021 20:42:59 +0800

var majorityElement = function(nums) { let len = nums.length; let res = new Map(); for(let i = 0; i < len; i++){ if(res.has(nums[i])){ res.set(nums[i], res.get(nums[i])+1); }else{ res.set(nums[i], 1);

找出数组中的重复数字（利用set，先用size得到set的大小，再用add添加数，判断当前set的size是否增加，增加了代表是重复数值，就输出）

tinyint_813 — Mon, 21 Jun 2021 20:40:07 +0800

// 找出数组中重复的数字 // 输入：[2, 3, 1, 0, 2, 5, 3] // 输出：2 或 3 // nums用来表示待查询的数组 // Set()是重复有序的,利用这一点,若Set没有增加长度,则代表有重复的值出现 var findRepeatNumber = function (nums){ let s = new Set(); for(var i in nums){ var curLength = s.size; s.add(nums[i]

二维数组查找值

tinyint_813 — Mon, 21 Jun 2021 20:37:46 +0800

/* 在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个高效的函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。 */ // flat() : 数组扁平化，实现降维; // arr3.flat(Infinity);: 使用 Infinity 作为深度，展开任意深度的嵌套数组 // includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。includes()

0-n之间的缺失数字（由于是有序的0-n-1的数值，所以使用二分查找，判断当前数值是否和索引一样，不然就继续循环）

tinyint_813 — Mon, 21 Jun 2021 20:33:44 +0800

/*一个长度为n-1的递增排序数组中的所有数字都是唯一的，并且每个数字都在范围0～n-1之内。在范围0～n-1内的n个数字中有且只有一个数字不在该数组中，请找出这个数字。*/ // Math.floor(x)：对一个数向下取整 // 二分查找法 var findmissingNumber = function (nums){ let len = nums.length; // 判断是否是第一个或最后一个缺失 if (nums[0] != 0){ return

求连续子数组的最大和（从第二个点开始记录每个值加上前面的值是正影响还是负影响，负影响就加0，正影响就加值）

tinyint_813 — Mon, 21 Jun 2021 20:15:29 +0800

/* 输入一个整型数组，数组中的一个或连续多个整数组成一个子数组。求所有子数组的和的最大值。要求时间复杂度为O(n) */ /* 动态规划时间复杂度 O(N)：线性遍历数组 nums 即可获得结果，使用 O(N) 时间。空间复杂度 O(1)：使用常数大小的额外空间。 */ /* 算法步骤： ①状态定义：设动态规划列表 dp，dp[i] 代表以元素 nums[i] 为结尾的连续子数组最大和。（为了保证连续子数组） ②转移方程：若 dp[i - 1] ≤ 0 ，说明 dp[i - 1] 对 d

剪绳子------JS（核心：22比31大）

tinyint_813 — Mon, 21 Jun 2021 20:03:41 +0800

/* 给你一根长度为 n 的绳子，请把绳子剪成整数长度的 m 段（m、n都是整数，n>1并且m>1），每段绳子的长度记为 k[0],k[1]...k[m-1] 。请问 k[0]*k[1]*...*k[m-1] 可能的最大乘积是多少？例如，当绳子的长度是8时，我们把它剪成长度分别为2、3、3的三段，此时得到的最大乘积是18。 */ /* 解题思路：设将长度为 n 的绳子切为 m 段：本题等价于求解： max(k[0]*k[1]*...*k[m-1])，其中 n = k[0]+k[1]+..

斐波那契数列三种方法

tinyint_813 — Mon, 21 Jun 2021 20:00:43 +0800

/* 方法一：递归 */ // function fn1(n){ // if (n<=2){ // return 1; // } // return fn1(n-1)+ fn1(n-2); // } // console.log(fn1(6)); // 方法二：迭代 // function fb(n){ // let a = 0, b = 1, sum; // for (let i = 0; i < n; i++){ //

box-sizing

tinyint_813 — Sat, 19 Jun 2021 20:39:49 +0800

含义由于给一个盒子增加padding和border之后，盒子会变大。若将box-sizing设置为border-box，可以让盒子元素的宽高不变。原理原理：减去了内容的宽高