lodash用法系列1:數組集合操作


Lodash用來操作對象和集合,比Underscore擁有更多的功能和更好的性能。

官網:https://lodash.com/
引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
安裝:npm install lodash

首先通過npm安裝lodash:
npm i --save lodash

在js文件中引用lodash:
var _ = require('lodash');  

import * as _ from "lodash";

 

 目錄

  1. 從一個數組中的對象屬性獲取值的數組  map
  2. 遍歷  forEach

  3. 排序 sortBy

  4. 向一個集合中插入某個元素而不改變固有的順序 sortedIndex

  5. 通過where方法過濾集合,傳入對象 where

  6. 通過 filter 方法過濾集合

  7. 通過 reject 方法過濾到不需要的集合元素,傳入對象

  8. 找到特定的元素 find, findLast

  9. 從數組中獲取一些 take takeRight

  10. 把大數據分成多份分批處理 chunks, isUndefined, last, defer, partial

  11. 去除集合中的重復部分 uniq

  12. 分組 groupBy

  13. 獲取最小/最大 min/max

  14. 獲取集合大小 size

  15. 提取嵌套集合中的有用部分 pluck, flatten

  16. 去除集合中的無效元素,比如null, 0, undefined等。compact

  17. 去除集合中不符合某種規律的元素 【pluck, compact, startsWith】

  18. 所有集合元素滿足條件或部分集合元素滿足條件 every

  19. 並集、交集、補集 【union, interseciton, xor】

1.  從一個數組中的對象屬性獲取值的數組  map

// v4.x 之后: 
_.map(users, 'id'); // [12, 14, 16, 18]
// Array.prototype.map: 
users.map(user => user.id); // [12, 14, 16, 18]
// v4.x 之前:
_.pluck(users, 'id'); // [12, 14, 16, 18]

 

2. 遍歷  forEach

_.forEach(collection, function(name){});
_.forEach(collection, function(name, index){})

3. 排序 sortBy

排序,字段字符串
var strSortResult = _.sortBy('cda').join(' ');
console.log(strSortResult);

根據數組元素的某個字段排序,在匿名函數中聲明排序字段

var arr = [
  {name: 'aa',age:22},
  {name: 'bb',age:23}
];

var arrSortResult = _.sortBy(arr, function(item){
  return item.name;
})

_.forEach(arrSortResult, function(item){
  console.log(item.name);
});

通過字符串聲明排序字段    _.sortBy(arr, 'name'); 

通過字符串數組聲明排序字段   _.sortBy(arr, ['name','age']); 

4. 向一個集合中插入某個元素而不改變固有的順序 sortedIndex

var collection = ['a', 'b', 'c', 'd', 'f'];

console.log('before: ' + collection.join(' '));

//要插入的值
var toBeInserted = 'e';

//要插入值再數組中的索引
var sortedIndex = _.sortedIndex(collection, toBeInserted);

//插入 splice中數組的指定索引位置插入元素,0表示有0個元數組元素刪除
collection.splice(sortedIndex, 0, toBeInserted);

console.log('after:' + collection.join(' '));

5. 通過where方法過濾集合,傳入對象 where

var collection1 = [
  {name: 'aa', age:20, gender: 'm'},
  {name: 'bb', age:21, gender: 'f'},
  {name: 'cc', age:22, gender: 'm'}
];

var result1 = _.where(collection1, {age:20, gender:'m'});
_.forEach(result1, function(item){
  console.log(item.name);
});

6. 通過 filter 方法過濾集合

通過filter方法過濾集合,傳入字符串

var collection2=[
  {name: 'aa', enabled: false},
  {name:'bb', enabled:true}
];

var result2 = _.filter(collection2, 'enabled');
_.forEach(result2, function(item){
  console.log(item.name);
});

通過 filter 方法過濾集合,傳入匿名函數

var collection3 = [
  {name: 'aa', size: 'L'},
  {name: 'bb', size: 'M'}
];

var result3 = _.filter(collection3, function(item){
  return item.size === 'L';
});

_.forEach(result3, function(item){
  console.log(item.name);
});

7. 通過 reject 方法過濾到不需要的集合元素,傳入對象

過濾不要的,過濾條件為對象

var collection4 = [
  {name:'soccer', enabled: true},
  {name: 'basketball', enabled: false}
];

var result4 = _.reject(collection4,{enabled:false});

_.forEach(result4, function(item){
  console.log(item.name);
});

8. 找到特定的元素 find, findLast

搜尋,過濾條件為對象

//只要找打一個就返回結果
_.find(collection, {age:20});

_.findLast(collection,{age:20});

9. 從數組中獲取一些 take takeRight

從前到后 -- 數組,獲取一些  take

var array = [];
_.take(array, 2);

從前到后 -- 字符串,獲取一些  take

_.take('hello',2).join(' ');

從后到前 -- 數組,獲取一些  takeRight,從后面開始

var arr = [];
_.takeRight(array, 2);

從后到前 -- 字符串,獲取一些  takeRight,從后面開始

_.takeRight('hello', 2).join(' ');

10. 把大數據分成多份分批處理 chunks, isUndefined, last, defer, partial

// 使用range方法生成了一個比較大的集合,再使用chunk方法分隔成多份。使用process無限遞歸處理完所有的份數。
var collection1 = _.range(10000),
  chunks = _.chunk(collection1,50);//每一份50個,總共分為20份

//處理chunks,無限遞歸
function process(chunks, index){
  //找到需要被處理的chunk
  var chunk = chunks[index];

  //判斷chunk是否為undefined
  if(_.isUndefined(chunk)){
    return;
  }

  console.log('working ' + _.last(chunk));

  //defer讓堆棧上有足夠的時間作清理,defer接受一個回調函數
  //partial讓某個函數執行
  _.defer(_.partial(process, chunks, ++index));
}

process(chunks,0);

還可以根據集合長度來進行份數划分。

var collection _.range(10),
    size = Math.ceil(0.25 * collection.length);
_.chunk(collection, size);

11. 去除集合中的重復部分 uniq

//去除字符串數組中的重復部分
var collection = ['',''];
_.uniq(collection);

//uniq接受匿名函數
var collection = [
    {firstName: '', lastName: ''},
    ...
];
_.uniq(collection, function(item){
    return item.firstName + item.lastName;
})

12.  分組 groupBy

分組,根據字段

var collection = [
    {name:'',size:''},
    ...
];
_.groupBy(collection, 'size');

分組,根據匿名函數

var collection = [
    {name: '', age:20},
    ...
];

_.groupBy(collection, function(item){
    return item.age > 20 ? 'old' : 'young';
})

13. 獲取最小/最大 min/max

獲取最小,根據字段

_.min(collectin, 'age');

獲取最大,根據匿名函數

_.max(collecion, function(item){
    return item.age + item.workinghours;
})

14. 獲取集合大小 size

var collection = [
    {name: ''},
    ...
];

var first = _.first(collection);
_.size(collection);
_.size(first.name);//獲取字符串的長度

15. 提取嵌套集合中的有用部分 pluck, flatten

以下想獲取所有集合元素中的employees下的所有對象,即[ { name: 'b' }, { name: 'c' }, { name: 'e' }, { name: 'f' } ]。

第一步通過 pluck 方法獲取[ [ { name: 'b' }, { name: 'c' } ],[ { name: 'e' }, { name: 'f' } ] ]。

第二步通過 flatten 方法獲取想要的結果。

var collection = [
  {employer: 'a', employees: [{name:'b'},{name:'c'}]},
  {employer: 'd', employees: [{name:'e'},{name:'f'}]}
];

//pluck找出符合條件的字段,
//[ [ { name: 'b' }, { name: 'c' } ],[ { name: 'e' }, { name: 'f' } ] ]
var tempResult = _.pluck(collection, 'employees');
console.log(tempResult);

//[ { name: 'b' }, { name: 'c' }, { name: 'e' }, { name: 'f' } ]
var employees = _.flatten(tempResult);
console.log(employees);

var result = _.filter(employees, function(item){
  return (/^[bx]/i).test(item.name);//找出name值以b或x開頭的
});

console.log(result);

另外,falttenDeep方法可以使多層嵌套扁平化成一層。

16. 去除集合中的無效元素,比如null, 0, undefined等。compact

var collection = [
  {name: 'aa'},
  0,
  {name: 'bb'},
  null,
  {name:'cc'},
  undefined,
  {name:'dd'}
];

var letters = ['a', 'b'],//過濾條件
  compactResult = _.compact(collection),
  result = [];

//遍歷打印
_.forEach(compactResult, function(item){
  console.log(item.name);
});

//操作某個元素
_.each(letters, function(letter){
  var filterResult = _.filter(compactResult, function(item){
    return _.startsWith(item.name.toLowerCase(), letter);
  });

  //合並數組
  result = result.concat(filterResult);
});

//[ { name: 'aa' }, { name: 'bb' } ]
console.log(result);

17. 去除集合中不符合某種規律的元素 【pluck, compact, startsWith】

以下,除去不包含name字段的集合元素。

var collection = [
    {name: 'a'},
    {name: 'b'},
    {name: 'c'},
    {},
    true,
    1
];

//先篩選出包含name字段的值,不包含的顯示undefined
var pluckResult = _.pluck(collection, 'name');

//[ 'a', 'b', 'c', undefined, undefined, undefined ]
console.log(pluckResult);


var letters = ['a', 'b'],
    //再去除undefined
    compactResult = _.compact(pluckResult),
    result = [];

//[ 'a', 'b', 'c' ]
console.log(compactResult);

_.each(letters, function(letter){
   var filterResult = _.filter(compactResult, function(item){
      return _.startsWith(item.toLowerCase(), letter);
   });

    result = result.concat(filterResult);
});

console.log(result);

18. 所有集合元素滿足條件或部分集合元素滿足條件 every

判斷所有集合元素滿足某種條件。

var _ = require('lodash');

var collection = [
    {name: 'a'},
    {name: 'b'},
    {name: 'c'}
];

if(!_.every(collection, 'name')){
    console.log("有集合元素不包含name字段");
}

判斷部分集合元素滿足條件。

_.some(collection, 'name')

19. 並集、交集、補集 【union, interseciton, xor】

var a = [];
var b = [];
var c = [];

_.union(a, b, c);
_.intersection(a, b, c);
_.xor(a, b);

 

轉:https://www.cnblogs.com/darrenji/p/5011241.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM