轻松一些、分享一些有意思的写法,权当放松了
发现身边事儿、聊点周奇遇，我是沈二，期待奇遇的互联网灵魂~、一起聊天吹水，探索新的可能~wx:breathingss，入圈吧！
Map字典
在项目过程中,你可能会妥协各式各样的风格,会有要求所有用到字典都配置化的、当然也会有通用码表自己维护的,分享一些公共码表的维护写法，貌似第二种变异写法更适合一些。
js
/**
* 计划周期 PLAN_LEVEL
*/
export const PLAN_LEVEL = new Map();
PLAN_LEVEL.set('1', '月度')
PLAN_LEVEL.set('2', '季度')
PLAN_LEVEL.set('3', '年度')
// 变异写法
export const APP_TYPE=new Map([
['APP', '应用'],
['LINK','链接'],
['COM', '组件']
]);去重Set
自从有了es6,去重似乎变得简单起来
js
const unique=(arr)=>Array.from(new Set(arr))
unique([1,2,3,6,6,7])
(5) [1, 2, 3, 6, 7]当然解构的写法更简单，而且Array.from有更有意思的写法
js
const unique=(arr)=>[...new Set(arr)]
unique([1,2,3,6,6,7])
(5) [1, 2, 3, 6, 7]Array.from 构造数据
- 构造指定长度的数组
js
Array.from({length:1000})- 填充指定格式的模拟数据
js
//用10填充数据
Array.from({length:1000}).fill(10)
(1000) [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, ...]
//函数处理，序号填充
Array.from({length:1000},(v,i)=>i)
(1000) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, ...]解构...
解构的写法带来了诸多便利，这里分享两个有意思的处理
- 例1（除某参数外的剩余参数）：如组件封装的分页参数和服务端接收的参数不匹配，重新进行填充
js
var obj={page:1,size:10,name:"测试",type:1}
const {page,size,...other}=obj
other
{name: '测试', type: 1}
var newParam={...other,pageNo:page,pageSize:size}
newParam
{name: '测试', type: 1, pageNo: 1, pageSize: 10}- 例2（定长数组解构）
js
const [name,id]="测试_01".split('_')
console.log(name,id)
VM813:1 测试 01接口的分文件名对象合并
许多的业务接口文件定义了之后，需要一个index.js去合并多个接口对象块,用来注入到全局，以Vue为例子,避免每次都去引用
- 集成部分
js
/*
* 接口集成
*/
const requireAPIS = require.context('./modules', false, /\.js$/)
const apis = {};
requireAPIS.keys().forEach((key) => {
let module = requireAPIS(key);
if (module) {
const name=key.replace(/(\.\/|\.js)/g, '');
apis[name]=module;
}
});
export default apis;- 注册部分
js
Vue.prototype.$api = apis;- 应用部分
js
async onSave(){
//数据保存
const resp=await this.$api.user.saveConfig({})
}树解构转换
- 函数
js
transformTozTreeFormat(sNodes, { key, parentKey, childKey }) {
var i, l,
key = key || 'id',
parentKey = parentKey || 'pId',
childKey = childKey || 'children';
if (!key || key == "" || !sNodes) return [];
if (Object.prototype.toString.apply(sNodes) === "[object Array]") {
var r = [];
var tmpMap = [];
for (i = 0, l = sNodes.length; i < l; i++) {
//如果原本带有子节点，移除
if(sNodes[i][childKey]){
delete sNodes[i][childKey];
}
tmpMap[sNodes[i][key]] = sNodes[i];
}
for (i = 0, l = sNodes.length; i < l; i++) {
if (tmpMap[sNodes[i][parentKey]] && sNodes[i][key] != sNodes[i][parentKey]) {
if (!tmpMap[sNodes[i][parentKey]][childKey])
tmpMap[sNodes[i][parentKey]][childKey] = [];
tmpMap[sNodes[i][parentKey]][childKey].push(sNodes[i]);
} else {
r.push(sNodes[i]);
}
}
return r;
} else {
return [sNodes];
}
}- 调用
js
var dt= transformTozTreeFormat(res, { key: "id", parentKey: "parentId" });