记录一些前端好用的小技巧

记录一些前端好用的小技巧

1.优雅编写js的if判断

在项目中我们难免会遇到一些需要判断很多个条件的if判断

// 多条件判断开始，如下

if (obj.radio1 || obj.checkbox1.length > 0 || obj.input1 || obj.inputNumber1 > 0 || obj.select1 || obj.select2.length > 0 || obj.switch1 || obj.radio2 || obj.checkbox2.length > 0 || obj.input2 || obj.inputNumber2 > 0 || obj.select3 || obj.select4.length > 0 || obj.switch2  ...) {
  // do something
} else {
  // 条件不符，提示
  this.$message({
    message: '请选择条件后重试',
    type: 'warning'
  })
  return false
} 

实际项目场景中的变量名因为语义化字符很多， if 判断没写几个就写了很长一串, 然后写了几个就写不动了（感觉在写一坨 shi ），且对代码的阅读体验也不好

能不能用更优雅的方式实现呢？

·思路一

把这些需要判断的变量放到一个数组里，用 map 处理成 Boolean 类型，使用 includes 判断数组中是否包含指定的 Boolean 值

// 多条件判断开始，如下

const arr = [
  obj.radio1,
  obj.checkbox1.length,
  obj.input1,
  obj.inputNumber1,
  obj.select1,
  obj.select2.length,
  obj.switch1,
  obj.radio2,
  obj.checkbox2.length,
  obj.input2,
  obj.inputNumber2,
  obj.select3,
  obj.select4.length,
  obj.switch2 
  ...
]

const arr1 = arr.map(item => Boolean(item))
if (arr1.includes(true)) {
  // do something
} else {
  // 条件不符，提示
  this.$message({
    message: '请选择条件后重试',
    type: 'warning'
  })
  return false
} 

2.时间判断

2.1 判断两个时间是否是同一天

new Date(date1).toDateString() === new Date(date2).toDateString();

3.vue的filters里拿不到this

3.1 filters多传参

如果只是需要this里面少量的参数，可以用如下写法

// template
{{ breadcrumbNameId | breadcrumbNameFilter(你要的参数) }}

3.2 利用计算属性或方法

// template
{{ breadcrumbNameId | breadcrumbNameFilter }}
// computed / methods
breadcrumbNameFilter() {
	return this
}

4.Object.is(val1, val2)

方法用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
不同之处只有两个：一是: +0不等于-0，二是: NaN等于自身。

+0 === -0 //true
NaN === NaN // false

{} === {} // false
Object.is({}, {}); // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

5.null、undefined、NaN转Number/Boolean类型数据

对于null、undefined、NaN进行类型转换

	// 转成布尔类型
	!!null === false
	!!undefined === false
	!!NaN === false

	// 转成数字类型
	~~null === 0
	~~undefined === 0
	~~NaN === 0

6.对obj类型数据简单格式化

对于需要在页面格式化展示json格式的obj数据，可以进行简单格式化

	JSON.stringify(JSON.parse(json数据格式), null, '\t')
	// 或者
	JSON.stringify(obj, null, '\t')

7.对node_modules里的某个组件或插件进行改造，改造后代码同步问题

在开发时我们经常会遇到，安装的组件或插件不完全符合需求的情况，一般我们会选择去改造或者自己从零编写，在此处我们说改造的情况

我们对node_modules里的代码进行改造时，会遇到一个问题，重新安装依赖包后会覆盖掉我们的代码，并且其他开发小伙伴也不能同步拉取你改造的代码，我们可以这样做，把某个组件/插件复制一份到自己的远程仓库，然后在自己的远程仓库去改造，最后在package.json里面如此修改

// package.json 文件
"dependencies": {
    "xxx": "git+远程仓库地址",
    ...
 }