2017-12-25

JavaScript 從陣列中取出符合條件的第一個物件 (C# LINQ 的 FirstOrDefault)

之前筆記 JavaScript 依屬性值過濾陣列取得完整物件 紀錄到如何將陣列中的符合特定屬性值條件的物件取出,與本文要介紹的用法相近,只是本文僅取出一筆,最後回傳值是 object,而前文則是回傳 array,當然可以透過前文技巧取出陣列後再使用 index 為 0 取出第一筆資料,只是既然要過濾條件了直接取得最後需要的物件不僅較省資源也較直覺,就來看看該怎麼做吧


找出第一個符合條件的物件

  • 陣列範例
    var dataobj=[
              {
                name:'ASP.NET MVC',
                type:3,
                salary:15000,
                headcount:25
              },{
                name:'Java',
                type:3,
                salary:25000,
                headcount:75
              },{
                name:'Python',
                type:3,
                salary:22000,
                headcount:50
              },{
                name:'React',
                type:1,
                salary:22000,
                headcount:30
              },{
                name:'Angular',
                type:1,
                salary:20000,
                headcount:15
              },{
                name:'Oracle',
                type:2,
                salary:28000,
                headcount:10
              },{
                name:'Sql Server',
                type:2,
                salary:18000,
                headcount:8
              },{
                name:'ASP.NET MVC',
                type:3,
                salary:25000,
                headcount:5
              }
    
      ];
    
  1. 使用自定 function
    • 使用 for

      function findObjectByProporigin(arr, prop, val) {
       for (var i = 0; i < arr.length; i++) {
        if (arr[i][prop] === val) {
         return arr[i];
        }
       }
       return null;
      }
      findObjectByPropfor(dataobj,"name","ASP.NET MVC")
      

      1for

    • 使用 for...in

      function findObjectByPropforin(arr, prop, val) {
         for(var index in arr){
        if (arr[index][prop] === val) {
         return arr[index];
        }
       }
       return null;
      }
      findObjectByPropforin(dataobj,'name','ASP.NET MVC')
      

      4forin

    • 使用 for...of

      function findObjectByPropforof(arr, prop, val) {
         for(var el of arr){
        if (el[prop] === val) {
         return el;
        }
       }
       return null;
      }
      findObjectByPropforof(dataobj,'name','ASP.NET MVC')
      

      5forof

    • forEach 與 map 無法中途終止會造成 LastOrDefault 的效果

      • forEach
        function findObjectByPropforEach(arr, prop, val) {
          var result=null;
         arr.forEach(function (el) {
          if (el[prop] === val) {
           result= el;
          }
         });
         return result;
        };
        findObjectByPropforEach(dataobj,"name","ASP.NET MVC")
        

        2foreach

      • map
        function findObjectByPropmap(arr, prop, val) {
         var result = null;
         arr.map(el => {
          if (el[prop] === val) {
           result = el;
           return true;
          }
         });
         return result;
        }
        findObjectByPropmap(dataobj,"name","ASP.NET MVC")
        

        3map

  2. 使用 ES6 - find
    dataobj.find(obj=>obj.name==='ASP.NET MVC')
    

    6find

  3. 使用 lodash - find
    _.find(dataobj,obj=>obj.name==='ASP.NET MVC')
    

    7lodashfind

  4. 使用 Ramda - find
    R.find(obj=>obj.name==='ASP.NET MVC', dataobj)
    

    8ramda

心得

原本以為程式碼與之前筆記 JavaScript 依屬性值過濾陣列取得完整物件 會非常相似,想不到測試撰寫過程才知道是我想得太簡單了,更進一步證實我的 JavaScript 技能相當薄弱呀(這時才發現 forEachmap 無法中途終止 - 沒有 breakcontinue),幸虧本身就不是靠 js 吃穿的,覺得還過得去 哈哈

不過經過一番測試與查閱資料後,已經比較清楚其中差異,相信下次一定可以比較快解決問題,至少有地方可以參考

遞迴陣列

  1. JavaScript 依屬性值過濾陣列取得完整物件
  2. Javascript: find an object in array based on object's property
  3. Array.prototype.find()
  4. JavaScript 循環中斷研究與終結,前端 er 必背!
  5. lodash - find
  6. Ramda - find

沒有留言:

張貼留言