underscore.js _.groupBy用法及代碼示例

Underscore.js_。groupBy()函數用於對傳遞的數組中的元素進行集合。它的工作原理是將每個元素的值與另一個元素進行匹配。如果它們匹配，則將它們放入一個集合中，否則我們將有 2 個集合/組。我們還可以傳遞一個函數，根據該函數的結果我們將收集元素。它既可以根據數字分組，也可以根據字符串分組。

用法:

_.groupBy( list, iterate, context );

參數：

列表：該參數包含元素列表。
迭代：該參數包含用於測試元素的條件。
語境：它是用於顯示的文本。它是一個可選參數。

返回值：

它將集合作為不同的數組返回。

在 _.groupBy() 函數中使用 Math.ceil()：

_.groupBy() 函數從列表中一一獲取元素，並將它們傳遞給 Math.ceil() 函數。然後函數的每個元素的輸出將與 Math.ceil() 中另一個元素的輸出匹配，然後它們被放入 1 個組，否則它們將被放入 2 個單獨的組。當所有元素與所有其餘元素匹配後，_.groupBy 函數結束。

例子：在此示例中，我們在 _.groupBy() 函數中使用 Math.ceil()。

html


<html>
<head>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
    </script>
</head>
<body>
    <script type="text/javascript">
        console.log(_.groupBy([2.7, 3.4, 6.6, 1.2, 2.0, 2.4], function (num) {
            return Math.ceil(num);
        }));
    </script>
</body>
</html>

輸出：

在 _.groupBy() 函數中使用 length()：

將數組元素傳遞給 groupBy() 函數並根據元素的長度匹配元素。如果兩個元素的長度相同，則它們將分為 1 組，否則將形成 2 組。

例子：在此示例中，我們在 _.groupBy() 函數中使用 length()。

html


<html>
<head>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
    </script>
</head>
<body>
    <script type="text/javascript">
        console.log(_.groupBy(['HTML', 'CSS3', 'JS', 'PHP'], 'length'));
    </script>
</body>
</html>

輸出：

使用 _.groupBy() 函數中傳遞的數組的屬性：

首先，聲明數組(這裏數組是‘arr’)。選擇一個需要檢查的條件，如下‘prop3’。那麽‘prop3’中具有相同值的元素將被分為1組。 Console.log最終答案。

例子：在此示例中，我們使用在 _.groupBy() 函數中傳遞的數組的屬性。

html


<html>
<head>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
    </script>
</head>
<body>
    <script type="text/javascript">
        let arr = [
            { prop1: "10", prop2: "07", prop3: "Geeks" },
            { prop1: "12", prop2: "86", prop3: "for" },
            { prop1: "11", prop2: "58", prop3: "Geeks" }
        ];
        console.log(_.groupBy(arr, 'prop3'));
    </script>
</body>
</html>

輸出：

將 ‘date’ 作為數組的屬性一起傳遞給 _.groupBy() 函數：

首先，定義一個具有一個屬性的數組為 ‘date’，格式為“dd-mm-yy”。然後將數組和 ‘date’ 屬性傳遞給 _.groupBy() 函數。具有相同日期的元素將被分為 1 組。組編號將從 0 開始。

例子：在此示例中，我們將 ‘date’ 作為數組的屬性一起傳遞給 _.groupBy() 函數。

html


<html>
<head>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
    </script>
</head>
<body>
    <script type="text/javascript">
        let orders = [
            { date: "30-60-90 Day", Name: "Kim", amount: 415 },
            { date: "30-60-90 Day", Name: "Kelly", amount: 175 },
            { date: "30 Day", Name: "Shelly", amount: 400 },
            { date: "30 Day", Name: "Sarvesh", amount: 180 }
        ];
        console.log(_.groupBy(orders, "date"));
    </script>
</body>
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自Sakshi98大神的英文原創作品 Underscore.js _.groupBy Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。