JS
qq_36437172
这个作者很懒,什么都没留下…
展开
-
Vue 注册组件,抽离 withInstall 方法
在组件中,我们通常需要使用 Vue.component 去注册组件后才能使用。最后,我们引入 withInstall 方法,组件注册方法变得更简洁了。原创 2022-08-11 11:49:57 · 2933 阅读 · 0 评论 -
JavaScript 中空值判断的常用用法
对项目中的有些空值判断进行容错处理,例如三目运算、|、&、if else 等,下面有几个处理空值的方法:!用 ! 做类型判断,通常用来与变量求布尔值,除了 null、undefined、0、NaN 和空字符串为 true 之外,其余都为 false。// 都为 true!null!undefined!''// 都为false!100!'hello'!!!! 用来做类型判断,对第一次 ! 操作后的类型进行取反,可以简化 null、undefined和空字符串的判断逻辑。va原创 2022-01-26 14:13:51 · 2388 阅读 · 0 评论 -
使用 Set 数据结构 或 reduce 求并集、交集
const arr = this.tableData.reduce((prev, next) => { prev.push(next.globalInvId) return prev}, [])const brr = data.reduce((prev, next) => { if (arr.includes(next.globalInvId)) { prev.push(next) return prev } return prev}, [])if原创 2021-08-25 14:30:19 · 404 阅读 · 0 评论 -
JS 数组逆序输出
JS 数组逆序输出,即反转数组1.for 倒序输出var arr = [1, 2, 3]for (var i = arr.length - 1; i >= 0; i--) { console.log(arr[i]) // 3 2 1}2.reversevar str = 'hi'console.log(str.split('').reverse().join('')) // ih3.for 元素前后调换var arr = [1, 2, 3]var temp转载 2021-01-19 22:59:31 · 4210 阅读 · 0 评论 -
JS中的 every, some, forEach, map 和 for 循环的迭代终止
对遍历循环如何跳出循环,通常我们会想到 return false 或者 break,但有些时候又不起作用,这是怎么回事呢?1.every()用来判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回 true,因此当 every 内部返回 false 时,跳出整个循环。var arr = [1, 2, 3, 4, 5];var arr3 = arr.every(function(x) { console.log(x) // 1 2 3 return x < 3;});c原创 2021-01-12 23:12:51 · 2156 阅读 · 0 评论 -
JS 数组方法
数组是 JS 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是很大影响。一、创建数组1.使用数组字面量表示法2.使用 Array 构造函数3.Array.of 方法创建数组4.Array.from 方法创建数组二、数组方法数组原型方法主要有以下这些:join():用指定的分隔符将数组每一项拼接为字符串 push():向数组的末尾添加新元素 pop():删除数组的最后一项 shift():删除数组..转载 2021-01-12 22:14:37 · 139 阅读 · 0 评论 -
JS null与字符串拼接问题
场景描述:我们在拼接字符串的时候,有时候接口变量返回的是 null,如果我们直接拼接到一起的话,就会出现字符串中就会出现 null, 而不是用空字符串代替。那我们如何解决呢?判断拼接变量的类型if (name !== null || name !== undefined || name !== '') { // 拼接操作}上述是判断 name 不是一个空对象,或者未定义,或者不等于空字符串,那么我们进行拼接操作,当然我们可以简写代码如下:var result = name ||原创 2020-12-07 22:57:57 · 2134 阅读 · 0 评论 -
JS 中的 reduce 常用使用方式
1.reduce的介绍reduce()方法对数组中的每个元素执行一个有您提供的reducer函数(升序执行),将其结果汇总为单个返回值。constarray1=[1,2,3,4];constresult=array1.reduce((accumulator,currentValue)=>accumulator+currentValue)console.log(result);//10reducer函数接收4个参数:Accumulator...原创 2020-11-04 23:02:22 · 202 阅读 · 0 评论 -
了解 Promise 常用 API
1.Promise.resolve2.Promise.all3.new Promise((resolve, reject) => {})4. return new Promise((resolve, reject) => {})const a = () => Promise.resolve(true)console.log(a())let result = Promise.all([a()])result.then(r => console.log(r).原创 2020-11-04 23:00:39 · 572 阅读 · 0 评论 -
JS 的立即执行函数
1.定义IIFE:ImmediatelyInvokedFunctionExpression,意为立即调用的函数表达式,也就是说:声明函数的同时立即调用这个函数。对比一下,这是不采用IIFE时的函数声明和函数调用:function foo(){ var a = 10; console.log(a);}foo();下面是IIFE形式的函数调用:(function () { var a = 10; console.log(a);})();函数的声明和IIF...转载 2020-11-02 22:32:56 · 371 阅读 · 0 评论 -
async 与 await 是啥?如何捕获异常?
一、async 和 awaitasync 和 await 主要用于进行异步请求。异步函数:程序运行起来不会阻塞后面的代码进程。async 是返回一个 promise 对象,await 就是 async 返回的 promise 对象返回的结果。await 需要搭配 async 使用。function loadImg(src) { const promise = new Promise((resolve, reject) => { img.onload = function ()原创 2020-11-01 23:11:04 · 5556 阅读 · 0 评论 -
Array.slice 的常用用法
slice 方法可以在不修改原始列表的情况下,创建列表子集的浅拷贝。注意: splice 方法会修改原始数组。一、slice工作原理如MDN文档,slice是数组上的一个方法,它最多有两个参数:arr.slice([begin[, end]])begin从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略begin,则slice从...转载 2020-11-01 17:56:04 · 3427 阅读 · 0 评论 -
理解 JS 中的 [].forEach.call() 写法
因为 documtent.querySelectorAll() 返回的并不是我们想当然的数组,而是 NodeList,对 NodeList,它里面没有 forEach 方法,我们使用了这样的方法进行循环遍历,代码如下:var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});初次看到 [].for转载 2020-10-29 22:16:23 · 679 阅读 · 0 评论 -
JavaScript 处理数组对象
一、获取数组对象中某一值封装为数组const data = [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date原创 2020-10-08 22:22:40 · 167 阅读 · 0 评论 -
数据对比处理
首先我们通过接口获取到数据源,结构如下:const data = { applyNo: "GD200922107304", applyTime: "2020-09-22 17:45:46", applyType: "MODIFY", auditMessage: "", consigneeAddressName: "宜州", consigneeContactName: "王大锤", consigneeContactTel: "18719632508", consignee原创 2020-10-06 12:23:59 · 233 阅读 · 0 评论 -
银行卡号建议自动间隔渲染
1.银行卡间隔渲染interceptedBankCard (value) { if (!value) { return } return value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");}2.显示银行卡后四位数字,其他位数用星号代替interceptedBankCard (value) { if (!value) { return } var lastFour = value.slice转载 2020-10-03 16:41:50 · 311 阅读 · 0 评论 -
H5 页面可见性改变事件( visibility change)
H5 有一个事件叫 visibilitychange,当浏览器的某个标签页切换到后台,或从后台切换到前台时,就会触发该信息,代码如下:document.addEventListener("visibilitychange", () => { if(document.hidden) { // 页面被挂起 } else { // 页面呼出 }});但是呢,手Q不会触发这个事件!因为手Q的网页永远都不会被挂起,所以visibilitychange事件不会被触发。转载 2020-09-13 23:36:29 · 2104 阅读 · 0 评论 -
JS 判断一个对象是否为空对象
1.使用 JSON.stringify 将对象转化为字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);// true2.for in 遍历属性进行判断var obj = {};var b = function() { for(var key in obj) { return false; } return true;}console.log(b());/转载 2020-08-02 18:24:17 · 166 阅读 · 0 评论 -
JS 读取本地 excel 文件转为 base64 上传至服务器
需求描述:一般使用multipart/form-data 请求头上传文件,由于上传服务器在内网的限制,配合后端的同事要求,需要将文件转换为 base64 字符后上传至服务器。首先来介绍 element-ui 的 upload 上传组件。<el-upload ref="upload" action="placeholder" accept="xtl" :http-request="handleHttpRequest" :before-upload="handleBefor.原创 2020-07-13 23:36:16 · 4015 阅读 · 2 评论 -
async/await 的基本用法
我们都知道使用Promise能很好地解决回调地狱的问题,但如果处理流程比较复杂的话,那么整段代码将充斥着then,语义化不明显,代码不能很好地表示执行流程,那有没有比Promise更优雅的异步方式呢?假如有这样一个使用场景:需要先请求a链接,等返回信息之后,再请求b链接的另外一个资源。下面代码展示的是使用fetch来实现这样的需求,fetch被定义在window对象中,它返回的是一个Promi...转载 2020-05-19 19:55:28 · 506 阅读 · 0 评论 -
JS 数组常用方法
一、split()和join()的区别'1-2-3'.split('-') // [1, 2, 3][1, 2, 3].join('-') // 1-2-3二、数组的poppushunshiftshift 分别是什么?const arr = [10, 20, 30, 40]// pop:删除数组最后一个const popRes = arr.pop()console.log(popRes, arr) // 40 [10, 20, 30]// push:数组末尾添加...原创 2020-05-18 17:16:21 · 216 阅读 · 2 评论 -
JS 二维数组变一维数组的方法
方法一:利用 es5 的 reduce 实现。var arr1 = [[0, 1], [2, 3], [4, 5]];var arr2 = arr1.reduce(function (a, b) { return a.concat(b)});方法二:通过 Array.isArray 判断是否为多维数组,如果是,进行递归操作。var arr1 = [[1,2],3,[[[4], 5]]];function flatten(arr) { return [].co转载 2020-05-17 14:40:07 · 5747 阅读 · 0 评论 -
JS 获取数组元素相同的下标
需求:获取数组中相同元素的下标。思路:循环嵌套遍历两次数组,分别对比值是否相等 arr[i] = arr[j],如果相等,记录下来 index,同时标记haveSame 。当haveSame 为 true 时,将重复元素存储在 list 中,同时输出数组下标为 index 的元素相同。注意:这里需要一个重复元素的数组与原数组的对比,判断某元素是否已经对比了。function searchKeys(arr){ var str = ""; var list = []; ...转载 2020-05-17 13:10:38 · 7660 阅读 · 0 评论 -
JS 数组对象去重
我们先来说说简单的数组去重问题。遍历去重法:function unique(arr) { const res = [] arr.forEach(item => { if(res.indexOf(item) < 0) { res.push(item) } }) return res}使用 ES6 的 Set:function unique(arr) { const set = n..原创 2020-05-15 18:56:07 · 343 阅读 · 0 评论 -
JS 只能输入数字,数字和字母等的正则表达式
1.只能输入英文<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">2.只能输入中文、英文、数字、@符号和.符号<input type="text" onkeyup="value=value.replace(/[^a-za-z0-9u4e00-u9fa5@.]/g,'')">...转载 2020-05-05 11:32:54 · 13577 阅读 · 3 评论 -
JS 获取输入时间的前一年、前三个月
通过getFullYear 获取输入时间的年限,再使用setFullYear 设置年限。// 获取输入时间的上一年export function getLastTime(localdate) { var newdate = new Date(localdate.replace(/-/g, "/")) newdate = newdate.setFullYear(newda...原创 2020-03-14 18:14:49 · 4711 阅读 · 0 评论 -
转换数组对象key
如何将数组中的对象的 key 换成目标 key 呢?首先想到的是通过 循环 遍历,将 value 重新放入新的 key 中。var arr = [{ "label": "用户标签", "prop": "userTags",}, { "label": "沟通意向", "prop": "communicationIntention",}]var newArr = arr....转载 2020-02-16 15:23:08 · 1210 阅读 · 0 评论 -
对象数组中,根据相同属性的数据合并,重组新的数组对象
可以通过上次的需求,我们通过TYPE 和 REMARK 两个 key 对应的 value 共同决定是否合并属性,我们是可以将两个属性进行串联成一个新的 key,如果这个 key 相同,即两个条件同时满足。这里不仅仅合并相邻的数据,不相邻的同种 属性也会进行合并。源数据:let data = [ {"TYPE": "01", "REMARK": "休假"}, {"TYPE": "...原创 2020-02-16 11:21:41 · 9171 阅读 · 0 评论 -
数组对象通过里面对象的某个属性分组或者分组汇总
源数据:[{ date: '2018-02', recordCharts: [{typeName: '小修',totalCount: 10},{ typeName: '一保',totalCount: 20},{ typeName: '二保',totalCount: 30}]},{ date: '2019-02', recordCharts: [{typeNa...原创 2020-02-15 17:08:51 · 2338 阅读 · 0 评论 -
JS 获取数组对象中某个属性的最大值或最小值
最近的开发中经常会遇到前端自己生成唯一id,然后在数组中增加删除插入对象,这样一来就要的要当前使用的id的最大值。总结一下,有两种比较简便的方法可以做到:1. 将属性值通过map生成一个数组,再使用Math.max取最大值2. 使用排序sort,先对数组的项排序,再取排序后的对应的项的值数组对象如下,求id的最大值和最小值list = [{ id: 1, name: 'jack'...转载 2019-12-15 21:28:01 · 8950 阅读 · 0 评论 -
验证码功能【升级版】
需求:在登录页面,一个四位数的随机数字和字母组合字符串作为验证码。一个是用户输入验证码,一个是系统随机生成验证码,如果两个验证码相同,则验证成功,否则验证失败。问题:之前通过前端生成验证码,验证码对于系统来说,并没有拦截一些非法登录,那么我们怎么来解决呢?预期:我们通过接口来获取验证码信息,这样是不是更能保证安全性.实现:(1)获取验证码返回的验证码 code:【编码过的字符串...原创 2019-11-27 18:02:52 · 239 阅读 · 0 评论 -
JavaScript in 操作符
JavaScript的 in 操作符可以用来判断一个属性是否属于一个对象,也可以用来遍历一个对象的属性1. 判断属性属于对象( if in )var person = {name: "小明", age: 18, year: 1998};//注意,属性名必须是字符串形式,因为 age 不是一个变量if ("age" in person){ console.log("man对象中含有...转载 2019-11-27 18:03:28 · 531 阅读 · 0 评论 -
JS获取某年某月第一天、最后一天以及当前日期前 N 天的 时间
需求分析:某年某月的第一天都是一样的,但是某年和某月的最后一天有可能 28,29,也有可能 30,或者 31。这里可以指的某年某月的最后一天是其下一个月第一天的前一天。// 获取某年某月的最后一天getLastDayOfMonth(year,month){ var date = new Date(year,month-1,'01'); //设置日期 date.set...转载 2019-11-03 13:13:37 · 1999 阅读 · 0 评论 -
JavaScript for...in 与 for...of 的区别
无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性(key)。 for…of 语句遍历可迭代对象定义要迭代的数据(value)。(一)for ... in:遍历数组索引、对象的属性,使用for…in遍历时,原型链上的所有属性都将被访问var arr = ["星期一","星期二","星...原创 2019-10-13 13:21:34 · 186 阅读 · 0 评论 -
使用JS生成验证码【简易版】
在登录页面,一个四位数的随机数字和字母组合字符串作为验证码。一个是用户输入验证码,一个是系统随机生成验证码,如果两个验证码相同,则验证成功,否则验证失败。<el-input type="text" v-model="enterCode" @blur="checkNum"> <el-button slot="prepend" icon="el-icon-key">&...原创 2019-10-04 12:18:27 · 357 阅读 · 0 评论 -
JS一维数组与二维数组互相转换的方法
一维数组转化为二维数组使用场景举例:接口返回一个数组对象,展示时每行固定显示n个,则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。分析:我们将一维数组,截取设定的长度,放入的一个新数组中。同时通过设定的长度,决定二维数组中的元素个数,但是一维数组的长度由总个数和设定的长度共同决定的。Math.floorfloor() 方法返回小于等于x的最大整数。...转载 2019-07-13 22:38:02 · 4373 阅读 · 0 评论 -
JS将字符串中的逗号替换成空格
replace我们通过在接口请求时,设置的 baseUrl 以http:// 或者https: // 开头的。axios.defaults.baseURL = 'http://localhost:9529'在webSocket 时,接口的前缀需要更改为 ws:// 或者 wss: // 开头的。let baseURL = `${ Axios.defaults.baseURL ...原创 2019-07-13 22:39:04 · 7781 阅读 · 0 评论 -
JS 进制转换(2进制、8进制、10进制、16进制之间的转换)
十进制转其他var x=110; alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16)); 其他转十进制var x='110'; alert(parseInt(x,2)); alert(parseInt(x,8)); alert(parseInt(x,16));其...转载 2019-07-13 22:39:33 · 1616 阅读 · 0 评论