如何在不使用 try/catch(err) 的情况下处理返回 'null' 的 indexOf？

Question

我正在用数据填充 table - 使用 fixed-data-table，这是一个 React.js 组件。然而，这在现阶段并不那么重要。

table 有一个问题所在的搜索框。

首先，这是代码中有趣的部分。

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

            }
        }

如果您在 table 中输入某些内容，并且用户输入的列 returns 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 returning null...但这不是正确处理它的方法 - 我假设嗯，这种异常处理应该用于罕见的异常，不应该像后端那样在前端使用。

如何处理上面 Javascript 代码中的 indexOf returning null？它可能 return 在任何正在填充的源列中为空。

Answer 1

如果找不到key，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。

当然你可以将它用于其他类型：

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

MDN documentation

如何在不使用 try/catch(err) 的情况下处理返回 'null' 的 indexOf？

How do I handle indexOf returning 'null' without using try/catch(err)?

javascript

arrays

reactjs

fixed-data-table