在使用 Laravel 的时候，相信很多人都有接触过 Laravel Collection 的强大和便利，然而本文要为你介绍的是前端 js 界的 collect.js 。collect.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