Collect.js 教程 · ZetCode 中文系列教程

# Collect.js 教程 > 原文： [http://zetcode.com/javascript/collectjs/](http://zetcode.com/javascript/collectjs/) Collect.js 教程展示了如何使用 Collect.js 庫處理 JavaScript 中的數組和對象。 ## Collect.js Collect.js 是用于處理數組和對象的流暢，便捷的包裝器。它是 Laravel 集合的接口。它包含許多使數據處理更加容易的函數。 Collect.js 幫助程序員編寫更簡潔，更易于維護的 JavaScript 代碼。 ## Collect.js 安裝首先，我們安裝 Collect.js 庫。 ```js $ npm init $ npm i collect.js ``` `collect.js`庫與`npm`一起本地安裝。 ## `collect()`函數我們將帶有`collect()`的 JavaScript 數組轉換為一個集合，并對該集合應用函數。最后，我們使用`all()`或`toArray()`返回底層數組。 ## Collect.js `all()`與`toArray` `all()`和`toArray()`函數從集合中返回基礎數組。這兩個函數之間的區別在于`toArray()`函數還將嵌套的集合轉換為數組（如果存在）。 `all_toarray.js` ```js const collect = require('collect.js'); const nums1 = [1, 2, 3]; const nums2 = [4, 5, 6]; const data = collect([collect(nums1), collect(nums2)]); console.log(data.all()); console.log(data.toArray()); ``` 該示例顯示了兩個函數之間的區別。 ```js $ node all_toarray.js [ Collection { items: [ 1, 2, 3 ] }, Collection { items: [ 4, 5, 6 ] } ] [ [ 1, 2, 3 ], [ 4, 5, 6 ] ] ``` 這是輸出。我們可以看到在第二個示例中，嵌套集合被轉換為數組。 ## Collect.js `count()` `count()`函數計算集合中元素的數量。 `count_elements.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); const nOfElements = data.count(); console.log(`There are ${nOfElements} elements`); ``` 該示例計算數組中值的數量。 ```js $ node count_elements.js Therea are 10 elements ``` ## Collect.js `unique()` `unique()`函數返回集合中的所有唯一項。 `unique.js` ```js const collect = require('collect.js'); const nums = [1, 1, 1, 2, 4, 4, 5]; const data = collect(nums); const unique_data = data.unique(); console.log(unique_data.all()); ``` 該示例顯示數組的唯一值。 ```js const unique_data = data.unique(); ``` 我們使用`unique()`從集合中獲取所有唯一值。 ```js console.log(unique_data.all()); ``` `all()`函數返回該集合表示的基礎數組。 ```js $ node unique.js [ 1, 2, 4, 5 ] ``` 這是輸出。 ## `first` 第一個函數返回通過給定真值測試的集合中的第一個元素，或者僅返回第一個值。 `first_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, -3, 4, -5, 6, 7, 8]; const data = collect(nums); let fval = data.first(); console.log(fval); let fneg = data.first(e => e < 0); console.log(fneg); ``` 該示例打印第一個值和第一個負值。 ```js $ node first_fun.js 1 -3 ``` 這是輸出。 ## `firstWhere` `firstWhere`函數返回具有給定鍵/值對的集合中的第一個元素。 `firstwhere_fun.js` ```js const collect = require('collect.js'); const users = [ { name: 'John', city: 'London', born: '2001-04-01' }, { name: 'Lenny', city: 'New York', born: '1997-12-11' }, { name: 'Andrew', city: 'Boston', born: '1987-02-22' }, { name: 'Peter', city: 'Prague', born: '1936-03-24' }, { name: 'Anna', city: 'Bratislava', born: '1973-11-18' }, { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }, { name: 'Adam', city: 'Trnava', born: '1983-12-01' }, { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }, { name: 'Robert', city: 'Prague', born: '1998-03-14' } ]; const data = collect(users); let fval = data.firstWhere('city', 'Bratislava'); console.log(fval); ``` 該示例打印出居住在布拉迪斯拉發的第一位用戶。 ```js $ node firstwhere_fun.js { name: 'Anna', city: 'Bratislava', born: '1973-11-18' } ``` 這是輸出。 ## Collect.js `avg()` `avg()`函數返回集合中所有項目的平均值。 `average.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); console.log(data.avg()); ``` 該程序將打印數字數組的平均值。 ## `min`和`max()` `min`和`max()`函數分別返回最小值和最大值。 `min_max.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); console.log(`Minimum: ${data.min()}`); console.log(`Maximum: ${data.max()}`); ``` 程序打印數字數組的最小值和最大值。 ```js $ node min_max.js Minimum: 1 Maximum: 10 ``` 這是輸出。 ## Collect.js `median` `median()`函數返回中位數。中位數是數據集的中間值。 `median_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); console.log(data.median()); ``` 該示例顯示數字數組的中位數。 ```js $ node median.js 5.5 ``` 如果沒有中間值，則按照我們的情況計算中間兩個值的平均值。 ## Collect.js `each` `each()`函數遍歷集合中的項目，并將每個項目傳遞給回調。 `each_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5]; let sum = 0; const data = collect(nums); data.each((item) => { sum += item; }); console.log(`The sum of values: ${sum}`); ``` 我們使用`each()`函數計算值的總和。 ```js $ node each_fun.js The sum of values: 15 ``` 這是輸出。 ## Collect.js `eachSpread` `eachSpread()`函數遍歷集合的項目，將每個嵌套的項目值傳遞給給定的回調。 `eachspread_fun.js` ```js const collect = require('collect.js'); const users = [ ['John Doe', 'gardener'], ['Peter Smith', 'programmer'], ['Lucy Black', 'teacher'] ]; const data = collect(users); data.eachSpread((user, occupation) => { console.log(`${user} is a ${occupation}`); }); ``` 該示例使用`eachSpread()`函數對嵌套數組進行迭代。 ```js $ node eachspread_fun.js John Doe is a gardener Peter Smith is a programmer Lucy Black is a teacher ``` 這是輸出。 ## Collect.js `map()` `map()`函數將給定的回調函數應用于每個元素，從而形成新的修改項集合。 `map_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5]; const data = collect(nums); const tr_data = data.map(e => e * 2); console.log(tr_data.all()); ``` 在示例中，我們通過將每個值乘以 2 來創建修改后的集合。 ```js $ node map_fun.js [ 2, 4, 6, 8, 10 ] ``` 這是輸出。 ## Collect.js `mapInto` `mapInto()`函數遍歷集合并根據元素創建對象。 `mapinto_fun.js` ```js const collect = require('collect.js'); const User = function (name, age) { this.name = name; this.age = age; }; const users = [ { name: 'John Doe', age: 34 }, { name: 'Peter Smith', age: 43 }, { name: 'Bruce Long', age: 40 }, { name: 'Lucy White', age: 54 }, ]; const data = collect(users); const objects = data.mapInto(User); console.log(objects.all()); ``` 在示例中，我們借助`mapInto()`函數將 JSON 對象文字轉換為 JavaScript 對象。 ```js $ node mapinto_fun.js [ User { name: { name: 'John Doe', age: 34 }, age: 0 }, User { name: { name: 'Peter Smith', age: 43 }, age: 1 }, User { name: { name: 'Bruce Long', age: 40 }, age: 2 }, User { name: { name: 'Lucy White', age: 54 }, age: 3 } ] ``` 這是輸出。 ## Collect.js `filter()` `filter()`函數使用給定的回調函數過濾集合，僅保留那些通過給定的真實性測試的項目。 `finter_fun.js` ```js const collect = require('collect.js'); const nums = [-1, 2, -3, 4, -5, 6, 7, 8, -9, 0]; const data = collect(nums); const filtered = data.filter((val, key) => val > 0); console.log(filtered.all()); ``` 該示例濾除正值。 ```js $ node finter_fun.js [ 2, 4, 6, 7, 8 ] ``` 這是輸出。 ```js $ npm i moment ``` 在下面的示例中，我們還需要`moment.js`庫。 `filter_fun2.js` ```js const collect = require('collect.js'); const moment = require('moment'); const users = [ { name: 'John', city: 'London', born: '2001-04-01' }, { name: 'Lenny', city: 'New York', born: '1997-12-11' }, { name: 'Andrew', city: 'Boston', born: '1987-02-22' }, { name: 'Peter', city: 'Prague', born: '1936-03-24' }, { name: 'Anna', city: 'Bratislava', born: '1973-11-18' }, { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }, { name: 'Adam', city: 'Trnava', born: '1983-12-01' }, { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }, { name: 'Robert', city: 'Prague', born: '1998-03-14' } ]; const data = collect(users); let res = data.filter((val, key) => getAge(val.born) > 40); console.log(res.all()); function getAge(dt) { return moment.duration(moment() - moment(dt, 'YYYY-MM-DD', true)).years(); } ``` 該示例過濾出年齡超過 40 歲的用戶。 ```js $ node filter_fun2.js [ { name: 'Peter', city: 'Prague', born: '1936-03-24' }, { name: 'Anna', city: 'Bratislava', born: '1973-11-18' }, { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }, { name: 'Robert', city: 'Bratislava', born: '1935-05-15' } ] ``` 列表中有四個人大于四十歲。 ## Collect.js `shuffle()` `shuffle()`函數隨機重組集合中的項目。 `shuffle.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); const shuffled = data.shuffle(); console.log(shuffled.all()); ``` 該示例重新排列數組。 ```js $ node shuffling.js [ 6, 4, 3, 7, 5, 10, 1, 9, 8, 2 ] ``` 這是一個示例輸出。 ## Collect.js `random()` `random()`函數從集合中返回一個隨機元素。 `random_fun.js` ```js const collect = require('collect.js'); let nums = [1, 2, 3, 4, 5, 6, 7, 8]; const data = collect(nums); let r1 = data.random(); console.log(r1); let r2 = data.random(2); console.log(r2.all()); ``` 該示例從一個數字數組中選擇一個隨機值和兩個隨機值。 ```js $ node random_fun.js 6 [ 4, 2 ] ``` 這是輸出。 ## Collect.js `sortBy()` `sortBy()`函數通過給定的鍵對集合進行排序。 `sortby_fun.js` ```js const collect = require('collect.js'); const users = [ { name: 'John Doe', occupation: 'gardener' }, { name: 'Adam Forsythe', occupation: 'writer' }, { name: 'Peter Smith', occupation: 'programmer' }, { name: 'Lucy Black', occupation: 'teacher' } ]; const data = collect(users); const sorted1 = data.sortBy('name'); console.log(sorted1.all()); const sorted2 = data.sortBy('occupation'); console.log(sorted2.all()); ``` 該程序通過提供的鍵對對象數組進行排序。 ```js $ node sortby_fun.js [ { name: 'Adam Forsythe', occupation: 'writer' }, { name: 'John Doe', occupation: 'gardener' }, { name: 'Lucy Black', occupation: 'teacher' }, { name: 'Peter Smith', occupation: 'programmer' } ] [ { name: 'John Doe', occupation: 'gardener' }, { name: 'Peter Smith', occupation: 'programmer' }, { name: 'Lucy Black', occupation: 'teacher' }, { name: 'Adam Forsythe', occupation: 'writer' } ] ``` 數組通過`name`和`occupation`鍵排序。 ## `nth()` `nth()`函數返回集合中的每個第 n 個元素。 `nth_fun.js` ```js const collect = require('collect.js'); const nums = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; const data = collect(nums); console.log(data.nth(2).all()); console.log(data.nth(3).all()); console.log(data.nth(4).all()); ``` 該示例返回數組的第二，第三和第四個元素。 ```js $ node nth_fun.js [ 'a', 'c', 'e', 'g' ] [ 'a', 'd', 'g' ] [ 'a', 'e' ] ``` 這是輸出。 ## Collect.js `chunk()` `chunk()`函數將集合分成給定大小的較小部分。 `chunk_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); const chunks = data.chunk(4); console.log(chunks.toArray()); ``` 該示例將數組分為包含四個元素的部分。 ```js $ node chunk_fun.js [ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9, 10 ] ] ``` 這是輸出。 ```js node flatten_fun.js [ 4, 5, 6, 7, 8, 9, 10 ] ``` 這是輸出。 ## Collect.js `dif()` `dif()`函數將一個集合與另一個集合進行比較。它從原始集合中返回第二個集合中不存在的值。 `diff_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4]; const nums2 = [3, 4, 5, 6]; const data = collect(nums); const data2 = collect(nums2); const difference = data.diff(data2); console.log(difference.all()); ``` 該示例返回兩個數組之間的差。 ```js $ node diff_fun.js [ 1, 2 ] ``` 這是輸出。 ## Collect.js `partition()` `partition()`函數將集合的元素分為兩部分：通過給定條件的元素和不通過給定條件的元素。 `partition_fun.js` ```js const collect = require('collect.js'); const nums = [-1, 2, 3, -4, 5, 7, -2]; const data = collect(nums); const [positive, negative] = data.partition(e => { return e < 0 && e != 0; }); console.log(positive.all()); console.log(negative.all()); ``` 該示例使用`partition`函數將正值與負值分開。 ```js $ node partition_fun.js [ -1, -4, -2 ] [ 2, 3, 5, 7 ] ``` 這是輸出。 ## Collect.js `pluck()` `pluck()`函數檢索給定鍵的所有值。 `pluck_fun.js` ```js const collect = require('collect.js'); const users = [ { name: 'John', city: 'London', born: '2001-04-01' }, { name: 'Lenny', city: 'New York', born: '1997-12-11' }, { name: 'Andrew', city: 'Boston', born: '1987-02-22' }, { name: 'Peter', city: 'Prague', born: '1936-03-24' }, { name: 'Anna', city: 'Bratislava', born: '1973-11-18' }, { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }, { name: 'Adam', city: 'Trnava', born: '1983-12-01' }, { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }, { name: 'Robert', city: 'Prague', born: '1998-03-14' } ]; let data = collect(users); let names = data.pluck('name'); console.log(names.all()); let cities = data.pluck('city'); console.log(cities.all()); ``` 該示例從`users`對象的數組中打印所有名稱和城市。由于名稱和城市在重復，因此我們使用`unique()`使其具有唯一性。 ```js $ node pluck_fun.js [ 'John', 'Lenny', 'Andrew', 'Peter', 'Anna', 'Albert', 'Adam', 'Robert' ] [ 'London', 'New York', 'Boston', 'Prague', 'Bratislava', 'Trnava' ] ``` 這是輸出。 ## Collect.js `implode()` `implode()`函數通過給定字符將集合的元素連接在一起。 `implode_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const data = collect(nums); let output = data.implode('-'); console.log(output); ``` 該示例使用'-'字符連接元素。當我們處理對象時，我們需要指定用于連接元素的鍵。 `implode_fun2.js` ```js const collect = require('collect.js'); const users = [ { name: 'John Doe', occupation: 'gardener' }, { name: 'Adam Forsythe', occupation: 'writer' }, { name: 'Peter Smith', occupation: 'programmer' }, { name: 'Lucy Black', occupation: 'teacher' } ]; const data = collect(users); let output = data.implode('name', ','); console.log(output); ``` 該示例將對象`users`數組中的名稱連接在一起。 ```js $ node implode_fun2.js John Doe,Adam Forsythe,Peter Smith,Lucy Black ``` 這是輸出。 ## Collect.js `reduce` `reduce`函數將集合減小為單個值，將每次迭代的結果傳遞到后續迭代中。該函數的第一個參數是累加器或進位，第二個參數是當前元素。 `reduce_fun.js` ```js const collect = require('collect.js'); const nums = [1, 2, 3, 4, 5, 6]; const data = collect(nums); const val = data.reduce((c, e) => { return e += c }); console.log(val); const val2 = data.chunk(2).reduce((c, e) => { return c + e.get(0) * e.get(1) }, 0); console.log(val2); ``` 該程序使用`reduce()`函數來計算總和和值乘積之和。 ```js const val2 = data.chunk(2).reduce((c, e) => { return c + e.get(0) * e.get(1) }, 0); ``` 借助`chunk()`函數，我們計算對的乘積之和：`1 * 2 + 3 * 4 + 5 * 6`。 ```js $ node reduce_fun.js 21 44 ``` 這是輸出。 ## Collect.js `tap` `tap`函數將集合傳遞給給定的回調，使我們可以在特定點掛接到集合中，并在不影響集合本身的情況下對項目執行某些操作。 `tap_fun.js` ```js const collect = require('collect.js'); const nums = [1, 3, 2, 6, 5, 4]; const data = collect(nums); const val = data.sort() .tap((col) => console.log(col.all())) .chunk(2) .tap((col) => console.log(col.toArray())) .reduce((c, e) => c + e.get(0) * e.get(1)); console.log(val); ``` 該示例對集合進行排序，將其分塊并最終縮小它。在此過程中，我們會掛接操作以查看結果。 ```js $ node tap_fun.js [ 1, 2, 3, 4, 5, 6 ] [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ] 44 ``` 這是輸出。 ## `every` `every`函數驗證集合中的所有元素均通過給定的真實性測試。 `every_fun.js` ```js const collect = require('collect.js'); const words = ['forest', 'wood', 'sky', 'cloud']; const data = collect(words); if (data.every(e => e.length > 2)){ console.log('Each word has more than 2 letters'); } else { console.log('There is at least one word that does not have more than 2 letters'); } ``` 該程序將驗證集合中的每個單詞是否包含兩個以上的字符。 ```js $ node every_fun.js Each word has more than 2 letters ``` 該集合通過了真相測試。 ## Collect.js `groupBy()` `groupBy()`函數通過給定的鍵對集合的項目進行分組。 `groupby_fun.js` ```js const collect = require('collect.js'); const users = [ { name: 'John', city: 'London', born: '2001-04-01' }, { name: 'Lenny', city: 'New York', born: '1997-12-11' }, { name: 'Andrew', city: 'Boston', born: '1987-02-22' }, { name: 'Peter', city: 'Prague', born: '1936-03-24' }, { name: 'Anna', city: 'Bratislava', born: '1973-11-18' }, { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }, { name: 'Adam', city: 'Trnava', born: '1983-12-01' }, { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }, { name: 'Robert', city: 'Prague', born: '1998-03-14' } ]; const data = collect(users); let cityGroups = data.groupBy('city'); cityGroups.each((group, city) => { console.log(city); group.each(e => { let { name, city, born } = e; console.log(`${name} ${born}`); }); }); ``` 該示例按城市對用戶進行分組。 ```js $ node groupby_fun.js London John 2001-04-01 New York Lenny 1997-12-11 Boston Andrew 1987-02-22 Prague Peter 1936-03-24 Robert 1998-03-14 Bratislava Anna 1973-11-18 Albert 1940-12-11 Robert 1935-05-15 Trnava Adam 1983-12-01 ``` 這是輸出。在本教程中，我們介紹了 Collect.js JavaScript 庫。您可能也對以下相關教程感興趣： [Ramda 教程](/javascript/ramda/)， [JSON 服務器教程](/javascript/jsonserver/)， [Moment.js 教程](/javascript/momentjs/)， [Lodash 教程](/javascript/lodash/)。