分享两个工具集和浏览器收藏

avatar
前端开发

      俗话说:“工欲善其事,必先利其器”,在敏捷开发的过程中,为了提高开发效率,可能更喜欢使用一些开箱即用的工具,这里主要介绍自己开发中用的比较多的几个工具库,loadsh.js和momet.js,day.js.

      当然喜欢原生实现和已经熟悉的大佬们可以略过,最后分享一下bilibili 的一个up主'技术胖'的一份谷歌浏览器的收藏夹和自已收藏的一些开发常中用的比较多的开发工具,虽然说收藏夹里面的东西,收藏了不一定会去看,但是希望有一天用的着的时候能帮到你,希望大家能把自己常用的神器或者收藏分享出来,继续扩充这个列表。希望这个文章能抛砖引玉,get一波大家的常用工具和开发利器。

一:loadsh.js

官网地址:www.lodashjs.com/

github地址:github.com/lodash/loda…

按照官方的话说,lodsh是一个一致性,模块化,高性能的javaScript库。在我看来,它其实就是一个封装集成了一些常见的js的方法,针对数组,对象,字符串,数学等....你可以开箱即用。

列举几个常见的方法:

1:数组相关

_.uniq() 去重

 _.uniq([2, 1, 2]); 

// => [2, 1]

_.pull(array, [values])   array中删除掉传入的values
let arr=[1,2,3,4,5]
let newArr=_.pull(arr,4,5)
// [1,2,3]

_.without(array, [values])  创建一个剔除所有给定值的新数组
_.without([2, 1, 2, 3], 1, 2);
// => [3]


 _.flattenDeep(array)   将多维数组转为一维数组
let flattenedArr = _.flattenDeep([1, [2, [3, [4]], 5]]);
// [1, 2, 3, 4, 5]

 _.flatten(array)   脱掉一层[],减少一层array嵌套深度 
let address = {
  '江苏省': ['南京市', '苏州市'],
  '浙江省': ['杭州市', '绍兴市']
}
let cities = _.flatten(_.values(address))
_.flatten([1, [2, [3, [4]], 5]]);
 
// ["南京市", "苏州市", "杭州市", "绍兴市"]
// [1, 2, [3, [4]], 5]


最大值,最小值,求和,平均值
var foo = [1, 2, 3, 4]

var bar = _.max(foo)
//bar = 4

bar = _.min(foo)
//bar = 1

bar = _.sum(foo)
//bar = 10

bar = _.mean(foo)
// bar = 3

 _.keyBy 以某个属性为键,将数组转为对象

var foo = var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.keyBy(foo, 'name')

//bar = {
//    aaa: {id: 0, name: "aaa", age: 33},
//    bbb: {id: 1, name: "bbb", age: 25}
//}




_.drop(array, [n=1])创建一个切片数组,去除array前面的n个元素。(n默认值为1。)
_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。
_.remove(array, [predicate=_.identity])var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
console.log(evens);
// => [2, 4]


获取数组中前n个元素,不改变原数组 _.take(array, [n=1])
let arr = [1, 2, 3, 4, 5]
let part1Arr = _.take(arr, 4)
let part2Arr = _.take(arr, 6)
let part3Arr = _.take([], 5)

console.log(part1Arr) // [1, 2, 3, 4]
console.log(part2Arr) // [1, 2, 3, 4, 5]
console.log(part3Arr) // []获取数组中倒数第二个元素 _.nth(array, [n=0])
let arr = [1, 2, 3, 4, 5]
let lastSecondElement = _.nth(-2) 

console.log(lastSecondElement) // 4




filter和reject,过滤集合,传入匿名函数。(二者放在一起讨论的原因是,两个函数类似但
返回的值是相反。)

_.filter([1,2],x => x = 1)
// => [1]
 
_.reject([1,2],x => x=1)
// => [2]

2:对象相关

pick()从object中提取制定的对象 

var object = { 'a': 1, 'b': '2', 'c': 3 };
 _.pick(object, ['a', 'c']); 
 //  { 'a': 1, 'c': 3 }

 _.clone(objects)浅拷贝
var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

_.cloneDeep(value)深拷贝
var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
let sourceObj = {   department_id: 1, permissions: {management: [1, 2, 3, 4],
                   store: [11, 12, 13, 14]}
 }
let desObj = _.cloneDeep(sourceObj)

desObj.permissions.store.push(15, 16)

console.log(desObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14, 15, 16]}}
console.log(sourceObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}


 _.orderBy(collection, [iteratees=[_.identity]], [orders])此方法类似于_.sortBy,
除了它允许指定 iteratee(迭代函数)结果如何排序。如果没指定 orders(排序),
所有值以升序排序。 否则,指定为"desc" 降序,或者指定为 "asc" 升序,排序对应值

如:var users = [    { 'user': 'fred',   'age': 48 },    { 'user': 'barney', 'age': 34 },    { 'user': 'fred',   'age': 40 },    { 'user': 'barney', 'age': 36 }  ];
   
  // 以 `user` 升序排序 再  `age` 以降序排序。
  _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
  // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]



merge,参数合并。(merge函数像是Git的merge分支操作一样,将两个参数合并在一起。)
var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

3:常用函数方法

防抖动   简单点来说,在一定时间内函数只执行一次。
_.delay(func, wait, [args])

创建一个节流函数
_.throttle(func, [wait=0], [options={}])



_.after(n, func)
let a = 20;
let done = _.after(5, function() {
 console.log(a++)
})
for(let i=0;i< 10 ; i++) {
  console.log(i);
  done();
}
 
// 结果 
0 1 2 3 4 20 5 21 6 22 7 23 8 24 9 25

还有对字符串和数学等相关的一些操作,大家可以查看文档

二:moment.js和days.js

官网地址:momentjs.cn/ 

                 dayjs.fenxianglu.cn/

三:分享一些工具和浏览器的收藏

 二个工具集网站:www.bejson.com/

这个网站上不知哪个大佬整理的一些开发常用的工具,总有一个是你用的上的。我平时用的最多的就是那个json格式化的。

有时候拿到后端同事的接口返回的数据,层级太多嵌套太深的时候,复制出来,格式化一下,简直不要太方便

像这种数据层级比较多的

使用工具之后

www.it1352.com/OnlineTools…

最后分享一个bilibili上的up主'技术胖'的谷歌浏览器的收藏,希望里面的东西能够对你有用。

链接:pan.baidu.com/s/1xtUzKodh… 提取码:1234