腾腾的JS技巧

数值转换

使用[ ]或者{ }来进行匹配互转。

//最直接的方式
const a = ['成功','失败'];
const b = {key1:'成功',key2:'失败'};
return a[0];
return b['key1']

//封装成函数法形式
function transfer(arr,index){
 return arr[index]
}

拿到vue中有以下使用场景:

<template>
	<div>
		<span v-for="item in listArr" :class="item.classValue | formatClass">
			{{item.value | formatValue}}
		</span>
	</div>
</template>

<script>
export default {
	data(){
		return {
			listArr:[
				{classValue:"1",value:"1"},
				{classValue:"2",value:"2"},
			]
		}
	},
	filter:{
		formatClass(classValue){
			return ['className1','className2'][classValue - 1] //className1,className2是自定义的
		},
		formatValue(value){
			return ['成功','失败'][value - 1]
		}
	}
}
</script>

1、过滤器中类名的匹配
2、过滤器中数值转换
3、模板中数据的匹配，这种情况数据较复杂，优先使用Map数据替代数组或对象

数组或对象合并

建议直接使用es6的拓展符 …

// 合并数组
const arr1 = [1,2,3,4];
const arr2 = [2,2,3,4];
const arr3 = [...arr1,...arr2]; //[1,2,3,4,2,2,3,4]

// 合并对象
const obj1 = {name:"老张",age:"24"};
const obj2 = {height:"180cm"};
const obj3 = {...obj1,...obj2}; //{name:"老张",age:"24",height:"180cm"}

// 特例，存在相同的键名以后面的为准
const obj4 = {name:"老王"};
const obj5 = {...obj1,...obj4}; //{name:"老王",age:"24"}

上述合并方式均会生成新的数组或对象，不影响原始值。

校验

在构造函数原型上增加test方法

//字符串
String.prototype.test=function(str){
  return this.indexOf(str)>-1
}

//数组
Array.prototype.test=function(val){
  return this.includes(val)
}

//object
Object.prototype.test=function(val,type='key'){
  return Object[type+'s'].includes(val)
}

类比一下，可以Date上面增加格式化函数

Date.prototype.format=function(type){
  //根据type返回格式化后的时间
}