![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js | es6 | es8 | 方法简化
翘翘红
回头看,轻舟已过万重山。
展开
-
移动端H5 实用的 html + css + js
移动端h5开发使用hrml、css、js方便快捷操作转载 2023-05-30 11:07:14 · 332 阅读 · 0 评论 -
js 常用工具函数 校验数据类型/防抖/节流/手机号脱敏/解析url参数/判断手机平台/数组去重/滚动到页面顶部/滚动到元素位置/存储/下载文件/模糊搜索/
【代码】js 常用工具函数。校验数据类型 防抖 节流 手机号脱敏 解析url参数 判断手机是安卓还是iOS 数组对象根据字段去重 滚动到页面顶部 滚动到元素位置 uuid 存储操作 下载文件 模糊搜索 遍历树节点 在树状结构中查找指定节点原创 2022-10-21 16:42:36 · 159 阅读 · 0 评论 -
数组方法 arr.at() 以及 arr.flatMap()
1、at() 方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。const array1 = ['this is the first element', 'this is the second element', 'this is the last element'];console.log(arr.at(0)) // logs 'this is the first element'console.log(arr.at(-2))原创 2022-04-18 15:17:15 · 910 阅读 · 1 评论 -
JavaScript异步代码
new Promise((resolve,reject) => {})const responses = [] for (const url of urls) { const response = fetch(url); responses.push(response) } await Promise.all(responses)new Promise((resolve,reject) => { resolve(result) })async onL原创 2022-04-14 16:56:38 · 616 阅读 · 0 评论 -
js 数组去重
const quchong = (arr) => { return [...new Set(arr)]}const quchong = (arr) => { const res = [] arr.reduce((pre, next) => { if (!pre.has(next)) { pre.set(next, 1) res.push(next) } return pre }, new Map()) retur原创 2022-03-16 10:56:45 · 95 阅读 · 0 评论 -
防抖函数与节流函数
function debounce(fn, delay = 200) { let timer return function(...args) { if (timer) { clearTimeout(timer) timer = null } timer = setTimeout(() => { fn.apply(this, args) clearTimeout(timer) timer = null原创 2022-03-16 10:50:55 · 111 阅读 · 0 评论 -
打乱一个数组
const shuffle = (arr) => { return arr.sort(() => { return Math.random() > 0.5 ? 1 : -1 })}原创 2022-03-16 10:44:49 · 96 阅读 · 0 评论 -
Vue定义全局变量、全局方法,在.vue文件和.js文件里使用
背景:在.vue后缀名的文件,和.js后缀名的文件里,使用全局变量的语法是不一样的。.vue模板文件可以直接访问挂载在Vue实例上的全局对象,而普通的.js文件访问不到。1、 定义全局变量 const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境 const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境 export default { sso原创 2022-01-26 15:42:04 · 10053 阅读 · 5 评论 -
几个少见却很有用的 JS 技巧
1、“返回”按钮使用 history.back() 可以创建一个浏览器返回按钮<button onclick="history.back()"> 返回</button> 2、数字分隔符为了提高数字的可读性,使用下划线作为分隔符const largeNumber = 1_000_000_000;console.log(largeNumber); // 10000000003、事件监听器只运行一次想添加一个事件监听器并且只运行一次,使用 once 选项转载 2021-10-28 10:21:21 · 185 阅读 · 0 评论 -
前端 button 组件之按钮式进度条实现 完整js+css+html
1、实现效果2、html<div class="button"> <i class="fa fa-arrow-down" aria-hidden="true"></i> <span class="text">download</span> <span class="progress"></span></div>3、css body, html {转载 2021-08-31 16:56:44 · 1028 阅读 · 0 评论 -
typeof检测的Array和Object的返回类型都是Object,因此用typeof是无法检测出来数组和对象的。所以toString封装类型检测函数,方便使用
/*** @description: 数据类型的检测* @param {any} data 要检测数据类型的变量* @return {string} type 返回具体的类型名称【小写】*/const isTypeOf = (data) => { return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()}console.log(isTypeOf({}))原创 2021-08-31 16:08:02 · 817 阅读 · 0 评论 -
3种枚举对象的属性的js方法
1、for…in 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)const obj = { itemA: 'itemA', itemB: 'itemB'}// 使用Object.create创建一个原型为obj的对象 (模拟继承来的属性)var newObj = Object.create(obj)console.log(newObj) //{}newObj.newItemA = 'newItemA'newObj.newItemB = 'newItemB'consol原创 2021-08-31 15:58:07 · 666 阅读 · 0 评论 -
空值运算符 ?? 判断undefined和null
const age = null;const a = age ?? 123;console.log(a); //123const age = undefinedconst a = age ?? 123 console.log(a); //123const age = 0 const a = age ?? 123 console.log(a); //0原创 2021-08-31 15:41:35 · 647 阅读 · 0 评论 -
项目中常用到的正则(价格千位分割格式化,手机号3-4-4格式化,密码验证,去除空格,获取url参数,检测24小时时间制,检测url前缀,检测中文,检测手机号,英文单词前后加空格,判断版本号)
1、 数字价格千分位分割'123456789'.replace(/(?!^)(?=(\d{3})+$)/g, ',') // "123,456,789"2、手机号3-4-4分割,表单搜集场景,经常遇到的手机格式化let mobile = '18379836654'let mobileReg = /(?=(\d{4})+$)/gconsole.log(mobile.replace(mobileReg, '-')) // 183-7983-6654...转载 2021-08-31 11:48:51 · 309 阅读 · 0 评论 -
理解 JavaScript 的 async/await
1、async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。2、await 只能出现在 async 函数中。3、async 函数返回的是一个 Promise 对象。//在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。async function testAsync() { return "hello async";}const result = testAs转载 2021-08-30 16:48:47 · 106 阅读 · 0 评论 -
vue多选 取消多选
<!-- 选择分类 --> <div class="cell-item"> <div class="item-label">选择分类</div> <div class="item-value" @click="showLabel"> <div class="value"> .原创 2021-08-24 17:23:12 · 418 阅读 · 0 评论 -
适合vue/原生js+jq的项目解决rem适配移动端,以及在浏览器打开的尺寸和移动端一样的处理方式,亲测有效且准确
1、在入口文件index.html下引入适配js //适配兼容 (function (n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize",原创 2021-08-19 10:15:06 · 411 阅读 · 0 评论 -
修改复杂接口数据对象键名以及键值数组里item的键名
1、正则let arr = { "virtualEventKey":"", "virtualEventId":"virtual_event_1", "virtualEventName":"测试虚拟事件1号", "virtualEventRemark":"测试虚拟事件。。。", "virtualEventApartList":[ { "apartEventKey":"12233", "apartEvent原创 2021-08-18 16:01:30 · 104 阅读 · 0 评论 -
js+jq 实现进入页面就去请求列表接口并触底分页加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-08-13 17:13:07 · 899 阅读 · 0 评论 -
判断字符串是否含有a/b,只有一个有,就返回true
let str = ''; /a|b/.test(str)原创 2021-08-11 15:30:36 · 619 阅读 · 1 评论 -
js获取安卓版本号与iOS版本号的信息
本方法是使用了web提供的api navigator.userAgent 就是我们常说的UA来进行判断// 这是对ua进行全部小写化 const ua = navigator.userAgent.toLowerCase(); // 安卓版本号判断 android_ver: () => { return ua.match(/android (.*?);/); }, // IOS版本号判断 ios_ver: () =&g转载 2021-07-27 15:58:17 · 1297 阅读 · 0 评论 -
js函数声明/函数表达式
javascript 中 “ !function(){}() ” 是什么意思?转载 2021-07-26 16:26:01 · 51 阅读 · 0 评论 -
js合并对象
let obj={a:1}let obj1={b:2}console.log({...obj,...obj1})//{a: 1, b: 2}let obj={a:1}let obj1={b:2}console.log(Object.assign(obj,obj1))//{a: 1, b: 2}原创 2021-07-20 18:02:05 · 121 阅读 · 0 评论 -
vue vant dialog 弹出框中的input输入框自动获取焦点的问题
1、背景:点击设置金额弹出设置金额的弹出框,要求里面input自动获取焦点2、使用input的自带的autofocus="autofocus"只能在第一次调起弹窗的时候自动获取焦点,不刷新页面再次调起弹窗都不会再获取焦点了3、解决方案:给input autofocus="autofocus"以及一个ref属性,并在nextTick函数回调里面去调用focus()方法,必须在 this.$nextTick(function () {});函数回调里面调用,不然会报错,因为dom没获取到。4、至此,每次弹原创 2021-07-15 15:11:10 · 6424 阅读 · 2 评论 -
js int类型数字后自动添加两位.00,保留小数点后两位,金额格式化
var getFloatStr = function(num){ num += ''; num = num.replace(/[^0-9|\.]/g, ''); if(/^0+/) num = num.replace(/^0+/, ''); if(!/\./.test(num)) num += '.00'; if原创 2021-07-15 10:55:36 · 2372 阅读 · 0 评论 -
前端微信h5页面安卓/ios兼容性坑
1,ios兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上:当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值原创 2021-06-29 18:06:00 · 1724 阅读 · 1 评论 -
js数组去重 最简单的方法
function unique1(arr) { return [...new Set(arr)] } var arr = [{ a: 1 }, { a: 1 }, { a: 1 }, { b: 2 }, { a: 3 }, { b: 2 }]; console.log(unique2(arr)) //[{a: 1}, {b: 2},{a: 3}]原创 2021-06-29 16:30:50 · 219 阅读 · 0 评论 -
前端每日一题 js,基础到进阶,这道题你会了吗?
const animals= {};let dog = {emoji: 'a'}let cat = {emoji: 'b'}animals[dog] = {...dog, name: "Mara"}animals[cat] = {...cat,name: "Sara"}console.log(animals[dog]) //{emoji: "b",name: "Sara"}解析:对象的键会被转换为字符串。因为dog的值是一个对象,animals[dog] 实际上意味着我们创建了一个叫做 “原创 2021-06-28 09:56:16 · 202 阅读 · 0 评论 -
JS优化方法(使用最新的js方法)
1,带有多个条件的if语句将多个值放在一个数组中,然后调用数组的includes方法。//longhand(直接的)if(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){ //logic(逻辑)}//shorthand(速记)if(['abc','def','ghi','jkl'].includes(x)){ //logic}2,简化if true…else//longhandlet test:boolean;if(x>100){原创 2021-06-07 11:19:53 · 382 阅读 · 0 评论