Collect.js 超级好用的 js 库

JellyBool

JellyBool

在使用 Laravel 的时候,相信很多人都有接触过 Laravel Collection 的强大和便利,然而本文要为你介绍的是前端 js 界的 collect.jscollect.js 的灵感来源就是来自 Laravel Collection。下面来看看 collect.js 的一些用法:

安装

collect.js 是一个标准的 npm package,所以你可以直接通过下面的命令安装:

npm install collect.js --save

使用需要注意

因为在 js 中,有一些比较是和 PHP 比较是不一样的,在默认情况下,js 会偏向于严格意义的比较,所以有几个方法需要首先认识:

  • Laravel 的 containsStrict() 使用 contains()

  • Laravel 的 toArray() 使用 all()

  • Laravel 的 uniqueStrict() 使用 unique()

  • Laravel 的 whereStrict() 使用 where()

  • Laravel 的 whereInStrict() 使用 whereIn()

  • Laravel 的 whereNotInStrict() 使用 whereNotIn()

具体的方法使用

如果你对 Laravel 的 Collection 熟悉的话,collect.js 的方法命名都是跟 Laravel 的一致的。

1.求平均数 avg()

collect([1, 3, 3, 7]).avg();

//=> 3.5

如果数组里面包含了复杂的对象,可以这样使用:

const collection = collect([

   { name: 'JavaScript: The Good Parts', pages: 176 }, 

   { name: 'JavaScript: The Definitive Guide', pages: 1096 }

]);


collection.avg('pages');

//=> 636

2.分块 chunk()

const collection = collect([1, 2, 3, 4, 5, 6, 7]);

const chunks = collection.chunk(4);

chunks.all();

//=> [[1, 2, 3, 4], [5, 6, 7]]

3.包含 contains()

const collection = collect({

  name: 'Steven Gerrard',

  number: 8

});

collection.contains('name');

//=> true

collection.contains('age');

//=> false

contains() 对数组也是适用的:

const collection = collect([1, 2, 3]);

collection.contains(3);

//=> true

4.元素的总个数 count()

const collection = collect([1, 2, 3, 4]);

collection.count();

//=> 4

5.条件过滤 filter()

const collection = collect([1, 2, 3, 4]);

const filtered = collection.filter(function (value, key) {

    return value > 2;

});

filtered.all();

//=> [3, 4]

6.取第一个元素 first()

collect([1, 2, 3, 4]).first();

//=> 1

7.获取某个 key 的值 get()

const collection = collect({

  firstname: 'Chuck',

  lastname: 'Norris'

});

collection.get('lastname');

//=> Norris

8.根据某个 key 分组 groupBy()

const collection = collect([

  {

    product: 'Chair',

    manufacturer: 'IKEA'

  },

  {

    product: 'Desk',

    manufacturer: 'IKEA'

  },

  {

    product: 'Chair',

    manufacturer: 'Herman Miller'

  }

]);

const grouped = collection.groupBy('manufacturer');

grouped.all();


//=> {

//=>   IKEA: [

//=>     {

//=>       id: 100,

//=>       product: 'Chair',

//=>       manufacturer: 'IKEA',

//=>       price: '1490 NOK'

//=>     },

//=>     {

//=>       id: 150,

//=>       product: 'Desk',

//=>       manufacturer: 'IKEA',

//=>       price: '900 NOK'

//=>     }

//=>   ],

//=>   'Herman Miller': [

//=>     {

//=>       id: 200,

//=>       product: 'Chair',

//=>       manufacturer: 'Herman Miller',

//=>       price: '9990 NOK'

//=>     }

//=>   ]

//=> }

....方法是在太多,就不一一演示了,可以直接到 Github 查看:https://github.com/ecrmnn/collect.js

个人觉得 collect.js 在前端也是会给很多开发者带来便利,就像我在 Laravist 上录的那个 Laravel Collection 的系列教程一样,相信用 collect.js 也能在前端部分重构很多代码,比如多数情况下的 for 循环等,判断一个元素是否存在等。

真诚推荐给你 collect.js

本文由 JellyBool 创作, 转载和引用遵循 署名-非商业性使用 2.5 中国大陆 进行许可。

共有 2 条评论

爱哪无忧又
修改的评论也不能少于六个字哦!
Lange0314
修改的评论也不能少于六个字哦!