找了很久，现有的库有两个：1. Mergenpm地址： Merge用法：import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === obj1)...

有时候我们在vue中进行for循环，就会涉及到绑定唯一值key的问题，但是并不是任何时候都会存在所谓的唯一值，使用index下标明显是不合适的，官方也不推荐，除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性，属性的值是随机的uuid或者时间戳。这样前端问题解决了，如果遍历的数据还需要提交到后端，那么不就多了一个属性，这个属性后端不需要的。所以，我们需要在提交数据前，对数据进行过滤。过滤又得for循环删除？那怎么行，有没有那种通用的，简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...

不允许循环引用的深拷贝function deepCopy(data) { const weakMap = new WeakMap(); function copy(data) { if (weakMap.has(data)) return null; //打断施法 const copyData = data instanceof Array ? [] : {}; weakMap.set(data, true); for (let [key, value] of Object.entries(data))...

前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...

前言后端返回给前端的数据，有时候会是一个多层级对象，但是我们前端使用的时候，for循环遍历渲染时，多层级对象往往需要进行单独处理，因为还需要判断这个key值是否存在，否则会报错。强行让后端改变数据结构又好像不现实，无奈，只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适，逻辑清晰。要求将对象中的层级扁平化，改成如下格式：// 实现一个 flatten 函数，实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...

我们有两种方式获取，一种是new Date()得到时间对象，一种是Date函数对象静态方法获取。new Date()与Date的区别就是，前者是构造函数，后者是函数对象，函数对象返回的，只是我们需要的值，他不会有Date对象的内置方法（prototype），所以，它的使用更简洁明确，但是如果我们想要获取时间的年份，月份，星期几，那么new Date()才是最好的选择。new Date() 获取const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); //1...

原理也没啥好藏着掖着的，就是为了保证密码难度，开头的字符一定是满足安全需要的，比如要求大小写数字加特殊字符，那么开头四位就一定是：大写一位、小写一位、数字一位、特殊字符一位；然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度：hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...

使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。我的想法是转成上传文件的那种file格式。方法如下：/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...

预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug！！！ */ class Chart { constructor(options) { const defaultOptions = { el:...

json在格式化对象是，如果是普通的键值对对象还是没有问题的，但是如果他的值是一个函数，在格式化之后，函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你！") } }; const b = JSON.stringify(a);当你输出变量b的时候，你得到的会是："{\"name\":\"我爱你\"}"fn不见了！引用JSON.stringify()方法描述中的一段解释：undefined、任意的函数以及 s...

本来是一个很简单的需求：const a = { b:1 }本来我的需求是判断，这个a对象里面b是否存在，但是b的值不确定，他可能是布尔值false，也可能是数字0，或者是空字符。那么if(a.b)就不太行了，一般来说，老前端一般都是用in 操作符。"b" in a; //true但是es6后，一般来说，不建议这样使用的，同时不建议的还有delete操作符。于是问了下群友，因为我记得es6有那么一个方法，可以判断一个对象的属性是否存在，并且不会去查prototype上的内容。但是我忘了啥名字来着！const a = { b:1 } a.hasOwnPrope...

目前前端最佳的方案其实有两种：a元素下载iframe 无闪下载事实上这两种下载方式，其实都存在相同的一个问题，就是如果下载的文件是跨域的（不是同域名下的问题，或者其他原因）；并且这个文件浏览器可以直接打开的，比如：图片、文本文件。那么浏览器会直接打开文件，并不是触发下载，而如果下载的文件是安装包，压缩包zip这些，则是触发下载。这个问题就很头疼。a元素下载的缺点a元素下载，那么就必须设置download属性，这个属性可以接收一个参数，可以是带后缀的文件名，或者不带后缀。也可以为空，但是要设。不带后缀的话文件格式就会与下载的文件保持一致，如果带了格式后缀，可能导致下载的jpg文件，你设置为...

造这个轮子其实也是没得办法，搜不到合适的轮子用，就只能自己干了。使用场景我们有N个异步任务promise，他们没有顺序关系，谁先触发都无所谓，但是我们只关心一点，如果某一个任务出错，后续就不要运行了，只有全部都success完成，那么才运行成功后的处理方式then。当然，我们肯定不能使用Promise.all运行N个任务，这等于是同步触发了，如果我有2000个任务，难道你也一口气发2000个任务，那这就不现实了，所以这里我们要引入线程概念，一个进程可以有多个线程，那么进程就是管理器，线程就是我们一次可以发多少个请求。线程是可以配置的，我们可以指定触发多少个线程，当1个线程完成后，我们要填...

今天就遇到了这个需求，当我上传文件超时或者失败后，再选择同一个文件上传，是不会触发change事件的，所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...

typeof无法准确的判断object类型，instanceof判断起来还需要new出对象，想来想去最稳的就是Object.prototype.toString.call，于是乎组合一下：//判断数据类型 function getType(value) { let type = typeof value; if (type !== "object") { return type; } return Object.prototype.toString.call(value).slice(8, -1).toLowerCase...

应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...

快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适用度广泛一些。一些常用的config配置...

群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...

之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。所以这里，我主要分享下我对错误处理的思路。基础知识首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象（json/array） 是一个promise对象response.b...

之前研究了下axios的取消请求操作，也配合vue写了篇文章笔记，现在考虑下资源请求了。当vue页面在切换的时候，一般不同的页面有不同的api请求，也有一些资源的请求下载，比如图片，视频...；当资源文件很大，而服务器带宽不足，并且多个页面同时打开，很容易造成服务器的堵塞。而正因为堵塞，页面的资源一直卡在下载中，加上单页app的效果，我们可能会切换其他页面浏览，但是由于上一个路由页的资源已经在加载中了，即便我们切换了页面，资源还是处于下载中的。所以我们要解决这个问题。怎么办？window.stop();这个方法会直接结束当前页面的所有请求，类似于我们点击了浏览器的x按钮，不进行加载了。目...

className方式我自己之前学es5的时候，老师教我们是用的是className属性，他是dom的一个属性，返回元素的class值，兼容性可以说是通杀吧，所有浏览器都是支持的，但是，他是一个string操作。document.getElementById('myid').className; 他会返回一个string的值(空的话返回empty string，empty string===“”,length为0)，而class的设置，他是需要空格的：class="class1 class2"，当我们添加一个新的class时就不得不考虑空格的问题：document.g...

这个方法太常用了，写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象

最近有这么一个需求，就是后端api地址返回一个文件，这个文件是已经格式化好的，比如表格.xlsx，或者是其他文件zip这些。但是后端他加了鉴权，所以如果直接a链接访问这个接口，我们无法在头信息上添加token字段，于是这个请求被作为无效。然后我使用了axios的请求，结果返回的内容，转换为blob对象后，下载完文件就被破坏了，无法打开。这里我贴一下之前的代码。api().then(res=>{ let blob = new Blob([err]); let a = document.createElement("a"); a.href = URL.c...

js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。那么怎么做呢？function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments;...

最近有一个地方需要计算过期时间，然后返回天数，但是我用diff计算，得到的结果就是和后端算的相差一天。//后端返回的时间 const endTime = "2021-12-04"; //前端获取当前时间 const startTime = Date.now(); //或者new Date().getTime() //计算结果 const day = moment(endTime).diff(startTime,"days");得到的结果，永远是差一天的结果。比如今天是时间是：2020-12-08 10:46:00，转为时间戳为：160739556...