Lodash

首页 > TAG信息列表 > Lodash

Loadsh 中的防抖节流怎么去使用

项目场景：表格中的操作按钮，要是连续点击只能在多少秒内调用一次接口节流：创建一个节流函数，在 wait 秒内最多执行 func 一次的函数 import _ from "lodash" methods: { handle () { this._throttle(data) } _throttle: _.throttle(function (data) { this._getList(data) }, 3000,

【跟着大佬学JavaScript】之lodash防抖节流合并

前言前面已经对防抖和节流有了介绍，这篇主要看lodash是如何将防抖和节流合并成一个函数的。初衷是深入lodash，学习它内部的好代码并应用，同时也加深节流防抖的理解。这里会先从防抖开始一步步往后，由简入繁，直到最后实现整个函数。这里纯粹自己的理解，以及看了很多篇优质文章，希望能加

vue基础之函数防抖与节流

问题正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）概念：防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次。通俗的讲，只会在输入完，1s后，

vue防止重复提交数据-防抖功能

首先明确下我们想要实现的效果。 1.用户在按下按钮的时候立即触发点击事件。2.用户在快速连续按下按钮的时候只触发第一次的点击事件。3.用户不间断疯狂点击按钮（暴力测试），也只是立即触发第一次的事件，在疯狂点击的过程中不会触发事件，即使超时时间已经过去。解决方案 lodash，这里不展

一天一个仿lodash函数实现-union

union将传入的参数数组进行合并，生成一个新数组，虽然这种用map来做可能快一些吧，但不能保证元素加入的顺序，所以可以考虑通过遍历的方式，不断从收集的数组里查找遍历到的元素是否存在，不存在则加入（打不过就加入）。 function union(...arrs){ return arrs.reduce((pre, cur)=>{ cons

一天一个仿lodash函数实现-remove、reverse和slice

又遇到简单的函数实现了 remove 移除数组中命中的元素，并返回移除元素组成的数组，会改变原数组。和pullAt有点像 function remove(arr, iteratee){ const removes = []; for(let i=0;i<arr.length;i++){ if(iteratee(arr[i])){ removes.push(arr[i]); arr.spli

一天一个仿lodash函数实现-intersection

intersection 这个和前面写的difference反过来，difference是求未出现过的，intersection是求出现过的，所以实现起来就比较简单了。 function intersection(arr, ...rest){ const left = rest.reduce((pre, cur)=>{ return pre.concat(cur.map(item=>iteratee(item))) }, []);

一天一个仿lodash函数实现-fromPairs、indexOf、initial

fromPairs 它是toPairs的反转，不过现在是数组函数系列还没走到toPairs。它接收一个二维数组，元素是一个两元素的数组，一个是key，一个是value 所以实现很简单 function fromPairs(arr){ const map = {}; arr.forEach(item => { map[item[0]] = item[1]; }) return map; }

一天一个仿lodash函数实现-flatten

flatten 数组元素铺平一层 function flatten(arr){ return arr.reduce((pre, cur)=>{ return pre.concat(cur) }, []) } flattenDeep 数组元素全部铺平，采用递归的方式，当遇到元素为数组时，继续调用函数来铺平数组，否则直接concat function flattenDeep(arr) { return arr.

一天一个仿lodash函数实现-fill、findIndex、first、head

把arr数组中从start到end（不包括end）用value填充 function fill(arr, value, start = 0, end = arr.length) { for(let i = start;i<end;i++) { arr[i] = value; } return arr } findIndex function findIndex(arr, predicate, fromIndex=0) { let result = -1; for(

一天n个仿lodash函数实现-difference

difference 从第一个参数数组中找出后面参数数组里未出现的元素，组成新的数组返回 function difference(arr, ...rest) { // 扁平化rest const target = rest.reduce((pre, cur) => { return pre.concat(cur) }, []) return arr.filter(item => !target.includes(item)

一天n个仿lodash函数实现-chunk、compat

从数组系列开始-chunk和compact chunk给数组分组按size设步长来遍历组装 function chunk(arr, size){ const result = []; // 小于1，下面循环会有问题，也不合理 if(size<1){ return []; } for(let i=0;i<arr.length;i+=size){ result.push(arr.slice(i, i+size))

20_webpack_shimming预支全局变量

shimming是什么 shimming 是一个概念，是某一些功能的统称　　shimming(垫片),给我们的代码填充一些垫片来处理一些问题　　比如我们现在以来一个第三方的库，这个第三方的库本身依赖lodash，但是默认没有对lodash进行导入(认为全局存在lodash)，那么我们就可以通过ProvidePlugin来实现sh

18_webpack代码分离

什么是代码分离代码分离(Code Splitting)是webpack一个非常重要的特性他主要的目的是将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件比如默认情况下，所有的JS代码(业务代码，第三方依赖，展示没有用到的模块)在首页全部都加载就会影响首页的加载速度代码分离

[React] Tree Shake Your React Application Modules

Sometimes one line of code can eliminate 50% of your bundle size. As you'll see in this video, we can remove "dead code" from modules we are working with by correctly tree shaking. Tree shaking is a term commonly used in the JavaScript cont

# vue 两个数组的差值

vue 两个数组的差值现在是什么情况呢，比如说哈，我有一个数组A，里面有几个数，然后我还有一个数组B，里面还有几个数，然后我想知道数组A中哪些数是数组B没有的，或者是数组B中哪些数是数组A没有的，理解吗？就是这个意思。可以自己写逻辑的，就是费劲，当然可以实现，但是呢，我比较懒，不想重复造轮子，

npm模块安装机制

1. npm 模块安装机制：发出npm install命令查询node_modules目录之中是否已经存在指定模块若存在，不再重新安装若不存在 npm 向 registry 查询模块压缩包的网址下载压缩包，存放在根目录下的.npm目录里解压压缩包到当前项目的node_modules目录 2. npm 实现原理输入 npm

react函数式组件中使用lodash的debounce

react函数式组件中使用lodash的debounce 阿凡农关注 2020.09.22 21:18:20字数 44阅读 3,769 import _ from 'lodash' <Input style={{ marginBottom: 16 }} maxLength={25} onChange={userChange} /> const userChange = (e: any) => {callAjax(e.target.value)} const

day01_Lodash

Lodash纯函数的功能库英文官网：https://lodash.com/ 中文网：https://www.lodashjs.com/ lodash 是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法

day01_手写Lodash中的memoize记忆函数

手写Lodash中的memoize记忆函数 // 求圆的面积 function getArea(r) { console.log('执行了getArea'); return Math.PI * r * r } // 记忆函数 function memoize(fn) { let cache = {} return function () { let key = JSON.stringify(arguments)

节流防抖笔记

# 1、 npm i --save lodash # 2、对应的页面引入 import _ from 'lodash' # 防抖：_.debounce 原理：原理是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。也就是说事件来了，先setTimeout定个时，n秒后再去触发回调函数。它和节流的不同在于如果某段时间内事件以

电商后台第九天

error 'res' is not defined no-undef 仔细检查了一下代码，字符都没有什么问题，又仔细看了好久发现是判断meta.status的语句没有放在if语句里面，放进去就好了安装lodash在函数里面重新定义了一个form，之后一直报错找不到goods_cat。以为是lodash没安装成功，因为安装lodash的

多选下拉菜单后端用string类型接收解决办法:lodash 深拷贝

新建一条表单记录,里面存在多选下拉菜单,点击保存需要将多选下拉菜单转变成string类型. 回到列表页,点击查看,回显时,为了保证能够正确回显需要将后端返回string类型的两个字段转变成数组类型再次点击保存,提交的就是数组类型和后端不对应就会报错. 解决办法再次点击保存时

npm淘宝镜像

1.需求由来由于node安装插件是从国外服务器下载，受网络影响大，速度慢且可能出现异常。所以如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队（阿里巴巴旗下业务阿里云）干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次

nodejs原型链污染复现

lodash从污染到rce 以code-breaking2018中的thejs为例搭环境在package中修改以下代码污染然后到baseMerge中继续跟进：发现存在原型链污染的条件：键可控且值可修改。相同的原理，利用lodash.mergeWith，lodash.set，lodash.setWith也可造成原型链污染。 rce过程利用lo