小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。
恒定宽高比(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=[]情况
arr=[]
console.log(arr) //[]
console.log(arr1) //[1,2,4]
//arr.length=0
console.log(arr) //[]
console.log(arr1) //[]
去除数组中的无效值
有时候因为一些异常，导致收集数据的数组内容不正确，此时就需要对数组的值进行处理。
//使用filter
let arr = [1, 2, 3, undefined,null, '', ];
arr = arr.filter(item=>item);
console.log(arr) [1,2,3]
求幂运算符
使用来自于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，同理||两边同时都是这几个特殊值时，返回结果同上。
本文持续更新中。。。
