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
      }
    ];

使用自定 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

使用 ES6 - find

dataobj.find(obj=>obj.name==='ASP.NET MVC')

6find

使用 lodash - find

_.find(dataobj,obj=>obj.name==='ASP.NET MVC')

7lodashfind

使用 Ramda - find

R.find(obj=>obj.name==='ASP.NET MVC', dataobj)

8ramda

心得

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

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

文章目錄

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

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

心得

遞迴陣列