js
木_林_森
学无止境,一直在路上
展开
-
打乱数组(洗牌算法)
class Solution { constructor(nums) { this.nums = nums; } reset() { return this.nums; } shuffle() { let res = [...this.nums]; let len = res.length; for (let i = len - 1; i >= 0; i--) { const randIndex = Math.floor(Ma原创 2021-12-17 12:15:29 · 363 阅读 · 0 评论 -
LRU (最近最少)缓存机制
LRU 设计原则LRU 缓存机制 应该支持以下操作 获取数据 get 和 修改数据put ,获取数据 get(key) ,密钥 ( key ) 存在于缓存中,则获取密钥的值,更新key 到最新的位置,否则返回-1。写入数据 put(key, value) - 如果密钥不存在,则写入数据。当缓存容量达到上限时,它应该在写入新数据之前删除最久未使用的数据,从而为新数据留出空间。1.数组+Objectconst LRUCache = function(capacity) { this.key原创 2021-12-17 11:56:49 · 282 阅读 · 0 评论 -
(a===1 && a===2 && a === 3)能为true吗?
隐式转换var a = ?;if(a == 1 && a == 2 && a == 3){conso.log(1);}答案:因为==会进行隐式类型转换 所以我们重写toString方法就可以了,toString 也可以换成 valueOf方法,valueOf 的优先级更高,var a = { i: 1, toString() { return a.i++; }}if( a == 1 && a == 2 &&am原创 2021-12-12 22:11:08 · 423 阅读 · 0 评论 -
for ... in 和for ... of 有什么区别;
let arr = ['el1', 'el2', 'el3'];arr.addedProp = 'arrProp';// elKey are the property keysfor (let elKey in arr) { console.log(elKey);} console.log('===');// elValue are the property valuesfor (let elValue of arr) { console.log(elValue)}.原创 2021-11-26 06:57:59 · 565 阅读 · 0 评论 -
手写Instanceof ,吃透原型链
面试八股文,经常会考察 原型 ,原型链,继承,变形考察 如何判断一个变量的 类型,其中一种方法,就是使用 instanceof ,继续延伸 instanceof 原理话不多少 直接上代码,function myInstanceOf(leftValue,rightValue){ const baseType = ['string', 'number','boolean','undefined','symbol']; if(baseType.includes(typeof(leftVal...原创 2021-11-12 14:54:04 · 257 阅读 · 0 评论 -
xss 白名单优化
xss 白名单优化安装xss 白名单安装yarn add xssxss 白名单下面展示一些 内联代码片。 import xss from 'xss'; const Component=(props)={ coonst {content} = props; const options = { whiteList: { a: ['target', 'href', 'title', 'style'], div: ['style'], span原创 2021-10-25 11:08:24 · 718 阅读 · 0 评论 -
自动修复 import 排序 ( autofix sort import/export )
自动修复 import 排序import/export 按一定的规则排序,既让代码美观,也让开发者更好的维护代码,目前自动修复import/export主要有以下两种:基于eslint 规则的 eslint-plugin-simple-import-sort 自动导入排序和校验;基于 prettier 的 plugin @trivago/prettier-plugin-sort-imports 自动导入排序;eslint-plugin-simple-import-sort yarn原创 2021-08-26 11:28:11 · 8408 阅读 · 2 评论 -
箭头函数和普通函数的区别
一,箭头函数基本用法:箭头函数 伪代码 类似 函数表达式, 大多数用于 声明一些回调函数,简单 明了 const fn = (name)=>{ // do some other things return `hello ${name}`}伪代码 等同于 const fn = function(name){ // do some other things return `hello ${name}`}关于箭头函数的参数,1....原创 2021-05-19 16:34:46 · 279 阅读 · 0 评论 -
js算法相关-----持续更新
一 ,排序算法, 1.冒泡排序; function bubbleSort(arr){ const length = arr.length; let hasChange = false; if(length<=1) return arr;for(let i = 0 ; i < length-1 ;i++){ hasChange=true for(let j = 0 ; j < length-i-1; j++){ if(arr..原创 2021-04-26 15:29:51 · 131 阅读 · 0 评论 -
Set、Map、WeakSet 和 WeakMap 的作用
Set 和 Map 主要的应用场景在于数据重组和数据储存Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构const s = new Set()[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))for (let i of s) { console.log(i) // 1 2 3 4}// 去重数组的重复对象let arr = [1, 2, 3, 2, 1, 1][... new Set(arr)] // [1...原创 2021-04-20 20:54:17 · 289 阅读 · 0 评论 -
手写常用函数源码系列
一..扁平化数组 Array.prototype.flat()用于将嵌套的数组扁平化,变成一维的数组。该方法返回一个新数组,对原数据没有影响。 不传参数时,默认扁平化一层,可以传入一个整数,表示想要扁平化的层数。 传入<=0的整数将返回原数组,不扁平化 Infinity关键字作为参数时,无论多少层嵌套,都会转为一维数组 如果原数组有空位,Array.prototype.flat()会跳过空位。 1.利用 数组的 reduce 方法; function fl...原创 2021-04-19 21:27:05 · 309 阅读 · 0 评论 -
说说函数式编程
说说 函数式编程原创 2020-11-17 20:20:22 · 138 阅读 · 0 评论 -
浏览器DOM事件
DOM (document of Mode )即 文档对象模型 是一种与编程语言及平台无关的API(Application programming Interface),借助于它程序能够动态地访问和修改文档内容、结构或显示样式。DOM事件主要分 DOM 0级 、DOM 2 级 、DOM 3级 事件,1.DOM 0 级事件例 constel= document.getElementById('el'); el.onclick = function() { };删除DOM 0 级...原创 2020-11-01 23:32:28 · 179 阅读 · 0 评论 -
如何做一个准确的定时器
定时器在前端的编程中 非常普遍, 最经常看到的是 抢购倒计时, 时钟 , 定时循环,。。。但是浏览器的多线程模式 && js的单线程执行逻辑, 注定setTimeout、setInterval 是非准确的 。举例 一个完善的定时任务逻辑 是这样, Js 代码执行到 setTimeout 异步任务 ,会把异步任务推送到定时器线程, 定时器线程开始倒计时, 当倒计时结束,会把...原创 2020-04-11 18:25:28 · 616 阅读 · 0 评论 -
深拷贝--- 浅拷贝 理解
在js 的 数据类型 分为 基本类型和引用类型, 基本类型的 值存放在 栈内存中 , 引用类型的 值存放在堆内存中,栈内存存放的是 引用类型的 地址, 这就涉及到一个问题, 当两个变量都同时指向同一个地址的时候,其中一个变量改变操作改变堆内存中的值,l另一个变量对象的值也会跟着改变,(这是非常不可控的操作);1. 浅拷贝: 定义就不写了, 只要理解: 复制的后的数据改变 都能影响前一个数...原创 2020-04-10 13:14:09 · 152 阅读 · 0 评论 -
理解并实现 你自己的 订阅-发布模式
订阅发布模式:这是一种广泛应用于异步编程的模式,是回调函数的事件化,常常用来解耦业务逻辑。事件的发布者无需关注订阅的侦听器如何实现业务逻辑,甚至不用关注有多少个侦听器存在。数据通过消息的方式可以灵活的传递。 ——《深入浅出Nodejs》由于浏览器js单线程的原因,编写js代码经常会用到异步,回调函数 , 业内解决 异步比较流行的方式 订阅发布模式、 promise 、async/await 。...原创 2020-03-27 17:13:08 · 260 阅读 · 0 评论 -
节流和防抖及其应用场景...
函数防抖(debounce) :在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。function debounce(fn,delay) { let timer; const that = this; return function (){ const _args = arguments; if (timer ){ clearTim...原创 2020-03-24 22:00:10 · 484 阅读 · 0 评论 -
一张图片引发的思考---懒加载
最近在做一个图片list预览组件,在一组图片list 中点击其中一张图片 可以放大 缩小,旋转、下载等功能。 但是list 中可能很多图片,如果首次打开这个页面, 每个图片都加载,浪费服务器资源,也给页面渲染带来极大的性能损耗。(http请求是宝贵的);一.如何做到懒加载 也叫按需加载?懒加载原理 ,初始化时候给页面的img 标签的src属性 ,默认赋值loading图片,增加一个 自定义的d...原创 2020-03-24 20:18:20 · 143 阅读 · 0 评论 -
移动端调试工具
在head中引入<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js" type="text/javascript"></script><script>var vConsole = new VConsole();<...原创 2020-03-18 10:46:37 · 152 阅读 · 0 评论 -
深度理解事件循环——Event Loop
一 js单线程;javascript 作为浏览器脚本语言,在设计之初就是用来与用户互动以及操作dom,这就注定了他只能是单线程的。想象一下,如果js 是多线程,一个线程在插入dom,另一个线程在删除dom,此时浏览器要以哪个为准,假如能以其中一个为准,还要增加一些类似 “读锁”、“写锁”之类的操作,很容易造成浏览器卡顿,结果不可预料。当然,为了利用多核CPU 的计算能力,HTML5 也提出了 ...原创 2020-03-23 13:40:00 · 223 阅读 · 0 评论 -
模拟实现call、 apply 、bind 函数
本文主要用来理解底层函数的原理, 并没有苛责一定用最原始的语法解决问题。 好的 ,我们开始Function.prototype.myCall=function(){ const obj=arguments[0]||window; // 获取想要指向的对象 obj.fn = this; obj.fn(...[...arguments].slice(1)); ...原创 2020-03-13 13:33:58 · 187 阅读 · 0 评论 -
理解并实现你自己的Promise
本文主要探讨 1.promise 解决什么问题 . 2.promise解决的痛点,还能有哪些解决方法 。 3.promise 如何使用, 4.手动实现一个自己的promise 。一....原创 2020-03-09 09:44:26 · 136 阅读 · 0 评论 -
javascript 中的原型 ,原型链 ,继承
在js 中讲到 面向对象,就离不开原型 原型链 继承 等等概念;那么这些具体是什么,我们一起来深入理解。function Dog(name){ this.name= name ; this.barking = '汪汪汪';}var dog1 = new Dog('大狗');var dog2 = new Dog ('二狗');console.log(dog1);/...原创 2020-03-03 10:38:35 · 153 阅读 · 0 评论 -
如何理解javascript 中的this,call 、apply 、bind
this 在日常的js代码中几乎随处可见, 但理解this并不是那么容易的 ?那么this到底是什么呢 ?const f = function () { console.log(x);};js 在设计之初是允许在函数内部调用其他外部变量的 ,就像 f 函数体里面使用了变量x。该变量由运行环境提供。由于函数运行在不同的运行环境。所以就需要有一种机制 ,能够在函数体内部获取...原创 2020-02-29 18:56:40 · 173 阅读 · 0 评论 -
缺少双引号的字符串转化为js 对象
有如下字符串 (生产上实际很长,testing略精简), 需要转化成js 对象;var jsonStr= "{comName:企业名称,earliestDeclareDate:最早报关日期,exportCountry1:出口国(地区)1 }";jsonStr = jsonStr.replace("{", "{\"");jsonStr = jsonStr.replace(/:/g, "\":...原创 2020-02-10 22:27:35 · 726 阅读 · 0 评论 -
闭包以及作用域链
简单讲js,闭包是指有权访问另一个函数作用域中变量的的函数;MDN 上面这么说:闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境(个人理解就是如下的作用域链)。环境由闭包创建时在作用域中的任何局部变量组成。通常创建闭包的方式,就是在一个函数内部创建另外一个函数;如下:var d = 1;function func (c){ var a =1 ; ...原创 2019-12-02 14:00:26 · 232 阅读 · 0 评论 -
var 、 const 、 let 区别 以及变量作用域
1.在 const 和let推出 之前,js使用var 声明变量,例如:var a = 1 ;a = 2 ;console.log(a); // 2a=function (){};console.log(a) // function (){}上述js 代码片段,按照从上向下执行 , 对同一个变量a, 声明先赋值数字给a ,最后又把函数表达式赋值给a, 后面的赋值操作覆...原创 2019-11-05 20:08:49 · 139 阅读 · 0 评论 -
布尔操作符
1 .转换成 布尔值 false 的基本 有以下几种 ,其他都为true ;Boolean(undefined) // falseBoolean(null) //falseBoolean(NaN) //falseBoolean('') //falseBoolean(false) //falseBoolean(0) //falseBoolean(),会对操作数进行强...原创 2019-01-12 11:34:53 · 362 阅读 · 0 评论 -
如何在 JS 代码中消灭 for 循环
转载 知乎如何在代码中消灭for循环 一,用好 filter,map,和其它 ES6 新增的高阶遍历函数问题一:将数组中的 false值去除const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""];答案:const compact = arr => arr.filter(Boolean)...转载 2018-12-22 21:57:37 · 177 阅读 · 0 评论