前端实用的8个编码小技巧
恒定宽高比(css）
一般用于数据渲染之前的占位内容，实现宽高自适应，高度恒为宽度的70%，如果你想要一半一半，padding-top为50%即可。
width:100% ; height:0; padding-top:70%; 复制代码
效果如图
补齐指定位数
格式化时间的时候一般会用到，使用ES6的padStart和padEnd。
padStart(targetLength,string)：头部补全
padEnd(targetLength,string)：尾部补全
不足会补0
'12'.padStart(4, '11') //1112 '12'.padEnd(4, '11') //1211 '12'.padStart(4, '1') //0112 '12'.padEnd(4, '1') //1210 复制代码
字符串转数字或者整数
你可能经常用+来将字符串转数字，它还可以转时间戳，这次不用new Date().getTime()
转数字
//+运算符 let num = +'10.7' //10.7 let num2= +'-10' //-10 //*运算符 let num = '10' * 1 //10 let num2 = '10.7' * 1 //10.7 复制代码
转整数
// ~~ ~是按位取反 let num = ~~'10.7' // 10 let num2 = ~~'-10' //-10 复制代码
转时间戳
+new Date() // 1634006099827 复制代码
清空数组
有些情况下不使用arr=[]。原因是如下 arr=[]创建一个新的数组，并将对它的引用分配了给用到的变量。其他引用不受影响，但仍指向原始数组，有内存泄漏的风险，而arr.length=0修改了原数组，其他变量访问到的成了修改后的。
let arr=[1,2,4] let arr1=arr arr.length=0 console.log(arr) //[] console.log(arr1) //[1,2,4] 复制代码
求幂运算符
使用来自于ES7的**
Math.pow(2, 3) //8 2 ** 3 //8 复制代码
Vue中data数据的二次初始化
有时候我们需要再完成一些操作后对data中的数据重新初始化。
//初始化data中的所有数据 Object.assign(this.$data, this.$options.data()); //初始化data中的指定数据,比如form Object.assign(this.$data, this.$options.data().form); 复制代码
刷新当前页面(Vue为例)
最近遇到一个问题，静态路由维护的js（asyncRouter.js)中有一个菜单需要根据用户的code值是否显示，在登陆成功后我把它存在了session中，并在静态js中去访问，但是这个静态js一开始就加载了，导致无法获取登陆后的，于是需要成功之后再刷新一下页面。
//asyncRouter.js import {getSession} from '@/utils/storage' let code=getSession('vuex')&&getSession('vuex').user.code const asyncRoutes = [ { path: '/system', component: Layout, showRoot: true, show:code=='xxxx', redirect: '/system/log', meta: { title: '系统管理', icon: 'setting', roles: ['admin', 'basic'] } ] 复制代码解决办法这里推荐两种，第一种会有明显的闪烁，第二种效果好一点，
Vue自带路由
//在需要刷新的地方添加以下代码 this.$router.go(0) 复制代码
provide/inject
// App.vue根组件中使用provide提供一个reload方法 <template> <div id="app"> <router-view v-if="isActive"></router-view> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data() { return{ isActive: true } }, methods: { reload () { this.isActive = false; this.$nextTick(()=> { this.isActive = true; }) } }， } </script> 复制代码 //需要刷新页面的组件使用inject注入 export default { inject:['reload'], data () { return { } }, //在需要刷新的地方调用 this.reload() 复制代码短路运算
非常实用的运算符，起到保护的作用，经常用来防止页面报错。
逻辑与(&&)：如果左边为true,返回右边;如果左边false,返回左边。
逻辑或(||)：如果左边为true,返回左边;如果左边false,返回右边。
&&和||的逻辑是转换成布尔值判断成立与否
// 逻辑与 let a = 1 && 6; console.log(a); //输出6 let a = 0 && 6; console.log(a); //输出0 //逻辑或 let a = 0 || 6; //输出6 let a = 1 || 6; //输出1 复制代码
一些特殊情况 &&左边是null/undefined/NaN ，结果就是null/undefined/NaN，同理||两边同时都是这几个特殊值时，返回结果同上。
作者：不知名网友
链接：https://juejin.cn/post/7018053107372261390