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');

 

本系列包括：

 

● lodash用法系列(1),數組集合操做
● lodash用法系列(2),處理對象 
● lodash用法系列(3),使用函數 
● lodash用法系列(4),使用Map/Reduce轉換  
● lodash用法系列(5),鏈式 
● lodash用法系列(6),函數種種 

■ 遍歷

【forEach】

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

 

■ 字符串排序

【sortBy】
【排序，字段字符串】

 

var strSortResult = _.sortBy('cda').join(' ');
console.log(strSortResult);

 

■ 根據數組元素的某個字段排序

● 在匿名函數中聲明排序字段

【sortBy】
【排序，匿名函數】

 

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】
【排序，字段字符串數組】

_.sortBy(arr, ['name','age']);

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

【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(' '));

 

■ 經過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);
});

 

■ 經過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方法過濾集合，傳入匿名函數

【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);
});

 

■ 經過reject方法過濾到不須要的集合元素，傳入對象

【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);
});

 

■ 找到特定的元素

【find, findLast】
【搜尋，過濾條件爲對象】

 

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

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

 

■ 從前到後從數組中獲取一些

【take】
【數組，獲取一些】

 

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

 

■ 從前到後從字符串中獲取一些

【take】
【字符串，獲取一些】

 

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

 

■ 從後到前從數組中獲取一些

【takeRight】
【數組，獲取一些，從後面開始】

 

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

 

■ 從後到前從字符串中獲取一些

【takeRight】
【字符串，獲取一些，從後面開始】

 

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

 

■ 把大數據分紅多份分批處理

【chunks,isUndefined,last,defer,partial】

 

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);

 

以上，使用range方法生成了一個比較大的集合，再使用chunk方法分隔成多份。使用process無限遞歸處理完全部的份數。

還能夠根據集合長度來進行份數劃分。

 

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

 

■ 去除集合中的重複部分

【uniq】

 

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

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

 

■ 根據對象字段分組

【groupBy】
【分組，根據字段】

 

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

 

■ 根據匿名函數分組

【groupBy】
【分組，根據匿名函數】

 

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

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

 

■ 獲取最小，根據字段

【min】

_.min(collectin, 'age');

■ 獲取最大，根據匿名函數

【max】
【最大值，根據匿名函數】

 

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

 

■ 獲取集合大小

【size】

 

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

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

 

■ 提取嵌套集合中的有用部分

【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方法能夠使多層嵌套扁平化成一層。

■ 去除集合中的無效元素，好比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);

 

■ 去除集合中不符合某種規律的元素

【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);

 

■ 全部集合元素知足條件或部分集合元素知足條件

【every】

判斷全部集合元素喲啊知足某種條件。

 

var _ = require('lodash');

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

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

 

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

 

_.some(collection, 'name')

■ 並集、交集、補集

【union, interseciton, xor】

 

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

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

 

參考資料：lodash essentials

 

未完待續~~