数值转换
使用[ ]或者{ }来进行匹配互转。
//最直接的方式
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返回格式化后的时间
}