利用JSON过滤对象和数组中指定的key属性

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

88 0 0

深拷贝+循环引用

不允许循环引用的深拷贝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))...

121 0 0

Copy 一个复制操作的类

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

131 0 0

对象扁平化

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

184 12 0

javascript 生成随机密码,指定位数,难度(大小写、数字、特殊字符)

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

408 0 0

base64转file文件方法

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

339 0 0

自己照着别人教程写的canvas操作类

预览图类源码/* * @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:...

359 0 0
自己照着别人教程写的canvas操作类

做个笔记 判断对象中是否存在某个属性

本来是一个很简单的需求: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文件,你设置为...

536 26 0
目前前端下载文件的最佳实践

异步队列管理器

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

651 0 0

Reflect

Reflect也是es6新增的api,他的出现主要是解决以下几点问题:将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上修改Object对象的一些方法的返回结果,比如:Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。// 老写法 try { Object.defineProperty(target, property, attributes); //...

504 0 0

文件上传时对input标签的重置

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

429 0 0

目前最好用的 JavaScript判断变量类型

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...

760 0 0

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

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

680 0 0
JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

axios 速读

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

480 0 0
axios 速读

浅谈一下关于a链接通过下载链接下载文件的方法

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

fetch 请求报错处理思路

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

618 0 0
fetch 请求报错处理思路

js取消资源请求

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

532 0 0

原生js获取、添加、删除元素class

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

676 0 0

Object 对象的扩展

属性的简写es6允许对属性进行简写,可以直接使用变量,变量名直接成为了属性名。var a = "hello"; var b = {a}; //等同于 var b = { a:a }属性里的方法也可以简写var a = { b(){...} } //等同于 var a = { b: function(){ ... } }在CommonJS模块输出变量时,也就是node模块导出时,这种简写就显得十分方便,我们直接导致一个对象,对象里面使用简写。var a = {}; var b = {}; module.exports = {a,b}而属性的赋...

738 0 0

Array 数组扩展

扩展运算符console.log(...[1,2,3]); //1,2,3扩展运算符会将后面跟着的数组转换为参数序列,这种效果一般用于函数参数,数组操作里面。扩展运算符后面甚至可以接表达式,但是表达式一定要有数组抛出const arr = [...(x>0?[1]:[]),2];如果是一个空数组使用扩展运算符,则无任何效果const a = []; console.log([...a,1]); //[1]代替数组的apply方法首先要知道apply除了改变this的指向外,第二个参数是一个数组,apply会将这个数组转为序列参数。如:function test(x,y,z){ ...

560 0 0
Array 数组扩展

防抖动

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

610 0 0

原生js 滚动条返回顶部 动画函数

直接把饿了么的返回顶部动画提取出来了,直接上代码//返回顶部函数 const cubic = (value) => Math.pow(value, 3); const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2; const el = document.documentElement; export const goScroll = function() { const beginTime = Date.n...

706 0 0

常用的正则

包含数字、字符、特殊字符,6-16位/(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9])[\S]{6,16}$/提示信息:密码为6-16位,必须包含数字和字母和至少一个特殊字符!@-_=<>#*%+&^$

571 0 0

js 函数注释

函数注释的一个常用的格式:/** * @description: 函数描述 * @param {类型} 参数 描述 * @return {类型} 描述 */description 就是函数的说明,干什么用的param 是函数的参数; {}里面表示这个参数是什么类型,后面接参数名称,描述,参数有多少个,@param就有多少个return 表示要输出的内容,一般可以省略不写,也可以写,和param 差不多示例/** * @description: 测试函数 * @param {*} a 任何类型参数 * @param {*} b 用来xxx * @return {*} 返回空...

790 0 0
js 函数注释