如何在不使用try/catch（err）的情況下處理indexOf返回'null'？

Question

我正在用數據填充表 - 使用fixed-data-table，這是一個React.js組件。但是，在現階段這並不重要。

表中有問題源於的搜索框。

首先，這裏是代碼的有趣部分。

for (var index = 0; index < size; index++) { 
      if (!filterBy || filterBy == undefined) { 
       filteredIndexes.push(index); 
      } 
      else { 

       var backendInfo = this._dataList[index]; 

       var userListMap = hostInfo.userList; 

       var userListArr = Object.values(userListMap); 


       function checkUsers(){ 
        for (var key in userListArr) { 
         if (userListArr.hasOwnProperty(key) && userListArr[key].text.toLowerCase().indexOf(filterBy) !== -1) { 
          return true; 
         } 
        } 
        return false; 
       } 


       if (backendInfo.firstName.indexOf(filterBy) !== -1 || backendInfo.lastName.toLowerCase().indexOf(filterBy) !== -1 || backendInfo.countryOrigin.toLowerCase().indexOf(filterBy) !== -1 
        || backendInfo.userListMap.indexOf(filterBy) !== -1) { 
        filteredIndexes.push(index); 
       } 

      } 
     } 

這是渲染和最後一部分是拋出錯誤，如果你輸入的東西在桌上，一列返回用戶輸入null。

的事情是，我可以使代碼工作，如果我改變的最後部分..

 try { 
      if (backendInfo.firstName.indexOf(filterBy) !== -1 || backendInfo.lastName.toLowerCase().indexOf(filterBy) !== -1 || backendInfo.countryOrigin.toLowerCase().indexOf(filterBy) !== -1 
      || backendInfo.userListMap.indexOf(filterBy) !== -1) { 
      filteredIndexes.push(index); 
      } 
     } 
     catch(err) { 
      console.log('Exception') 
     } 

隨着try/catch語句，它的工作原理100％按預期和處理的indexOf返回null .. 。但這不能成爲正確處理它的方式 - 我假設這種異常處理應該是罕見的例外，並且不應該在前端使用真正的異常處理後端。

如何在上面的Javascript代碼中處理indexOf返回null？它可能會在任何正在填充的源列中返回null。

Answer 1

如果找不到密鑰，JS會引發錯誤。 Try-catch是修復這些錯誤的好方法，但還有一種替代方法：

您可以在將值推入對象之前檢查對象是否存在於對象中。

var data = { }; 
 

 
var key = "test"; 
 

 
// your method works great 
 
try { 
 
    var value = data.firstname.indexOf(key); 
 
} catch (err) {} 
 

 
// another method, I'd prefer the try/catch 
 
var value = data.firstname ? data.firstname.indexOf(key) : undefined; 
 

 

 
// test if the object is the type of object you are looking for 
 
// this is in my opinion the best option. 
 
if(data.firstname instanceof Array){ 
 
    var value = data.firstname.indexOf(key); 
 
} 
 

 

 
// you can use the last option in your code like this: 
 

 
var firstnameHasKey = data.firstname instanceof Array && ~data.firstname.indexOf(key); 
 
var lastnameHasKey = data.lastname instanceof Array && ~data.lastname.indexOf(key); 
 
if(firstnameHasKey || lastnameHasKey){ 
 
    // logics 
 
}

如果測試instanceof & & indexOf，絕不是一個錯誤。如果firstname是undefined，則indexOf將不會被檢查。

Ofcourse你可以使用這個對於其他類型：

var myDate = new Date(); 
myDate instanceof Date;  // returns true 
myDate instanceof Object; // returns true 
myDate instanceof String; // returns false 

MDN documentation