使用collect.js处理数组和对象

https://github.com/ecrmnn/collect.js/#

引入collect.js

https://github.com/ecrmnn/collect.js/#installation

npm install collect.js --save

<script src="https://cdn.jsdelivr.net/npm/collect.js@4.0.25/build/collect.min.js"></script>

深度去重

https://github.com/ecrmnn/collect.js/#unique

简单数组去重

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

const unique = collection.unique();

unique.all();

//=> [1, 2, 3]

对象数组去重

const collection = collect([
{ name: 'iPhone 6', brand: 'Apple', type: 'phone' },
{ name: 'iPhone 5', brand: 'Apple', type: 'phone' },
{ name: 'Apple Watch', brand: 'Apple', type: 'watch' },
{ name: 'Galaxy S6', brand: 'Samsung', type: 'phone' },
{ name: 'Galaxy Gear', brand: 'Samsung', type: 'watch' },
]); const unique = collection.unique('brand'); unique.all(); //=> [
//=> { name: 'iPhone 6', brand: 'Apple', type: 'phone' },
//=> { name: 'Galaxy S6', brand: 'Samsung', type: 'phone' },
//=> ]

对象数组回调函数处理去重

const collection = collect([
{ name: 'iPhone 6', brand: 'Apple', type: 'phone' },
{ name: 'iPhone 5', brand: 'Apple', type: 'phone' },
{ name: 'Apple Watch', brand: 'Apple', type: 'watch' },
{ name: 'Galaxy S6', brand: 'Samsung', type: 'phone' },
{ name: 'Galaxy Gear', brand: 'Samsung', type: 'watch' },
]); const unique = collection.unique(function (item) {
return item.brand + item.type;
}); unique.all(); //=> [
//=> { name: 'iPhone 6', brand: 'Apple', type: 'phone' },
//=> { name: 'Apple Watch', brand: 'Apple', type: 'watch' },
//=> { name: 'Galaxy S6', brand: 'Samsung', type: 'phone' },
//=> { name: 'Galaxy Gear', brand: 'Samsung', type: 'watch' },
//=> ]

简单排序和深度排序

简单数组排序

https://github.com/ecrmnn/collect.js/#sort

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

const sorted = collection.sort();

sorted.all();

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

简单数组回调函数处理排序

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

const sorted = collection.sort(function (a, b) {
return b - a;
}); sorted.all(); //=> [5, 4, 3, 2, 1]

对象数组排序

https://github.com/ecrmnn/collect.js/#sortby

const collection = collect([
{ name: 'Desk', price: 200 },
{ name: 'Chair', price: 100 },
{ name: 'Bookcase', price: 150 },
]); const sorted = collection.sortBy('price'); sorted.all(); //=> [
//=> { name: 'Chair', price: 100 },
//=> { name: 'Bookcase', price: 150 },
//=> { name: 'Desk', price: 200 },
//=> ]

对象数组回调函数处理排序

const collection = collect([
{ name: 'Desk', colors: ['Black', 'Mahogany'] },
{ name: 'Chair', colors: ['Black'] },
{ name: 'Bookcase', colors: ['Red', 'Beige', 'Brown'] },
]); const sorted = collection.sortBy(function (product, key) {
return product['colors'].length;
}); sorted.all(); //=> [
//=> { name: 'Chair', colors: ['Black'] },
//=> { name: 'Desk', colors: ['Black', 'Mahogany'] },
//=> { name: 'Bookcase', colors: ['Red', 'Beige', 'Brown'] },
//=> ]

降序排序

使用方法和sortBy一样,但得到降序结果

https://github.com/ecrmnn/collect.js/#sortbydesc

==============================================

本文链接:https://www.cnblogs.com/stumpx/p/9515848.html

==============================================

js对象数组深度去重和深度排序的更多相关文章

  1. js对象数组多字段排序

    来源:js对象数组按照多个字段进行排序 一.数组排序 Array.sort()方法可以传入一个函数作为参数,然后依据该函数的逻辑,进行数组的排序. 一般用法:(数组元素从小大进行排序) var a = ...

  2. js 对象数组去重

    var arr = [{ "name": "ZYTX", "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4h ...

  3. JS对象—数组总结(创建、属性、方法)

    JS对象—数组总结(创建.属性.方法) 1.创建字符串 1.1 new Array() var arr1 = new Array(); var arr2 = new Array(6); 数组的长度为6 ...

  4. 前台的js对象数组传到后台处理。在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

    前台的js对象数组传到后台处理.在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

  5. js对象数组中的某属性值 拼接成字符串

    js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...

  6. js对象/数组深度复制

    今天碰到个问题,js对象.数组深度复制:之前有见过类似的,不过没有实现函数复制,今晚想了一下,实现代码如下: function clone(obj) { var a; if(obj instanceo ...

  7. js对象,数组,字符串的操作

    循环绑定=>变量污染 for (var i = 0;i<lis.length;i++){ lis[i].index = i;#给页面元素对象添加一个任意属性(保留索引的属性index) # ...

  8. JS 对象 数组求并集,交集和差集

    一.JS数组求并集,交集和差集 需求场景 最近,自己项目中有一些数组操作,涉及到一些数学集的运算,趁着完成后总结一下. 简化问题之后,现有两数组a = [1, 2, 3],b = [2, 4, 5], ...

  9. js对象数组按属性快速排序

    前一篇<关于selector性能比赛>中提到,目测觉得在$("div,p,a")这样有逗号时,sizzle耗时异常(600多个元素,花了200ms),说是它可能没有优化 ...

随机推荐

  1. Leetcode Single Number II (面试题推荐)

    还记得<剑指offer>和<编程之美>等书上多次出现的找一个数组中仅仅出现一次的数那个题吗? leetcode也有这道题 链接here  相信大家都知道用异或在O(n)的时间复 ...

  2. js 二维码

    https://larsjung.de/jquery-qrcode/ 源码 <!DOCTYPE html> <html> <head> <title>j ...

  3. IDEA失效的解决办法

    1.根据下图进行操作即可解决

  4. 关于前端js拼接字符串的一点小经验

    1.今天在做项目的时候遇到一个问题,就是使用onclick="xxx()"  点击事件的时候,参数如果为全数字就会出现点击无反应的问题.但是当参数为字符串或者动态内容的时候就会出现 ...

  5. JavaScript中面向对象那点事

    鉴于自己在JavaScript这方面比較薄弱.所以就找了一本书恶补了一下(被称为犀利书的JavaScript权威指南).书的内容尽管多了点,但这也充分说明了js中的东西还是挺多的.尽管我们的定位不是前 ...

  6. 【剑指offer】面试题42:单词翻转顺序&左右旋转字符串

    这里尽可能的不去用语言本身提供的函数. 将string逆置 def reverse(string): #return string[::-1] reversedStr = '' for i in xr ...

  7. MVC Web Api 发布到Azure报错

    I fixed this by reinstalling the NuGet package, which corrects broken dependencies. From the package ...

  8. sphinx源码分析总结

    http://www.cnblogs.com/bonelee/p/6667955.html shinx索引部分源码分析——过程:连接到CSphSource对应的sql数据源,通过fetch row取其 ...

  9. 有关使用HTTP协议传输二进制文件

    HTTP协议是基于字符(ASCII)的,当Content-Type项为text/xml,则内容是文本格式:当二进制格式时,Content-Type项为image/gif,就是了.例如,浏览器请求一张图 ...

  10. mac系统怎么给文件夹加密?mac文件夹加密教程

    mac系统怎么给文件夹加密?目前来说,若想要对你的Mac OS下面的文件进行加密的话有三种方法可以可以做到,第一种方法,Mac自带磁盘工具:第二种方法,例如BatterZip此类Mac压缩解压工具打包 ...