underscore.js indexBy()用法及代碼示例

Underscore.js是一個JavaScript庫，提供了許多有用的函數，即使在不使用任何內置對象的情況下，也可以極大地幫助您進行編程，例如映射，過濾，調用等。
_.indexBy()函數用於返回列表中每個元素的鍵，然後返回帶有每個項目索引的對象。它根據參數中給定的屬性給出結果。此外，它類似於groupBy()函數，但每個項目的開頭都有一個索引。傳遞的數組必須具有唯一的屬性(該屬性需要作為參數傳遞)。如果該屬性不是唯一的，則輸出將是最後一個匹配的元素。

參數：此函數接受上述和以下所述的三個參數：

List:此參數包含項目列表。
Iteratee:此參數用於保存測試條件。
Context:此參數用於顯示內容。

返回值：返回值是元素及其索引(在參數中傳遞的屬性)。

將數組直接傳遞給_.indexBy()函數：_.indexBy()函數將列表中的元素一個接一個地進行，並按其結果直接顯示其結果以及它們的索引。在遍曆並顯示所有元素以及索引之後，sort By函數結束。然後隻需通過console.log()來顯示元素。

例：

<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(_.indexBy(['HTML', 'CSS3', 'JS', 'PHP'])); 
        </script> 
    </body> 
</html>

輸出：

將具有多個屬性的數組傳遞給_.indexBy()函數：將具有多個屬性(如此處的3個屬性)的數組傳遞給indexBy()函數，僅將元素1及其索引一起顯示。索引將根據參數中指定的屬性來選擇，例如此處的屬性為“ prop2”。因此，“ prop2”的值將作為結果中的索引給出。

例：

<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"> 
           var arr =  [ 
                {prop1:"10", prop2:"07", prop3: "Geeks"}, 
                {prop1:"12", prop2:"86", prop3: "for"}, 
                {prop1:"11", prop2:"58", prop3: "Geeks."}  
            ]; 
            console.log(_.indexBy(arr, 'prop2')); 
        </script> 
    </body> 
</html>

輸出：

將具有“ date”屬性的結構傳遞給_.indexBy()函數：首先，聲明數組(此處的數組為“訂單”)。該數組包含一個屬性作為“日期”，其日期格式為：“ dd-mm-yy”。然後將數組和結構傳遞給_.indexBy()函數。 Console.log的最終答案。

例：

<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"> 
           var 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(_.indexBy(orders, 'date')); 
        </script> 
    </body> 
</html>

輸出：

將具有'true'/'false'作為屬性的數組傳遞給_.indexBy()函數：聲明具有一個屬性為'true'/'false'的數組(例如此處的“ people”)。這是定義索引的屬性，即現在，索引將為true或false。也不是因為該屬性存在重複性，因為有兩個值：true，false但有四個人。因此，隻有最後一個具有假(/true)的元素才會在結果中顯示。

例：

<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"> 
           var people = [ 
                {"name": "sakshi", "hasLong": "false"}, 
                {"name": "aishwarya", "hasLong": "true"}, 
                {"name": "akansha", "hasLong": "true"}, 
                {"name": "preeti", "hasLong": "true"} 
               ] 
            console.log(_.indexBy(people, 'hasLong')); 
        </script> 
    </body> 
</html>

輸出：

相關用法

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