前端程序员必用小知识「数据处理类」

581 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

代码不一定自己写的最好,善用这些工具包会让你的开发事半功倍,快来看看有没有你用过的😘

时间处理 momentjs

可直接在官网打开控制台进行方法测试

image.png

时间格式处理

moment().format('YYYY-MM-DD HH:mm:ss') 

image.png

  • 时间获取

image.png

  • 时间计算

image.png

其他功能请参考「Moment.js 文档」

数字处理 numeraljs

可直接在官网打开控制台进行方法测试

image.png

  • 千分位、小数、百分数处理

image.png

请求路径处理

请求路径处理qs

  • 转字符串stringify
qs.stringify({ a: 'b', c: 'd', e: 'f' });
// 'a=b&c=d&e=f'
qs.stringify({ a: 'b', c: 'd', e: 'f' }, { filter: ['a', 'e'] });
// 'a=b&e=f'
  • 转对象parse
qs.parse('a=b&c=d&e=f');
// { a: 'b', c: 'd', e: 'f' }

Object

  • encodeURI(URI) 处理路径参数中的特殊字符

image.png

  • decodeURI(encodeURI(URI))

image.png

数组处理

  • Array.prototype.flat() 把数组内的数组打平 语法【depth:深度,默认为1】

举例 var newArray = arr.flat([depth])

const arr1 = [[{name:'a'},{name:'b'}],
              [{name:'cc'},{name:'bc'}]]

console.log(arr1.flat());

image.png

  • Array.from() 浅拷贝一个实例 常用数组去重
function unique (arr) {
  return Array.from(new Set(arr))
}

image.png

对象处理

在处理对象时,如果是列表展示,需注意排序,对象排序根据forin 遍历规则不同,会造成顺序不稳定

树形数据处理

告别树形杈杈树,实现无限级多选下拉

大家还用过什么什么骚操作来处理数据呢?快来评论抢沙发