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

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% 按预期工作并处理返回 null 的 indexOf...但这不是正确处理它的方法 - 我假设这种异常处理是，嗯，应该用于罕见的例外情况，并且不应该像后端一样在前端使用。

如何处理上述 Javascript 代码中返回 null 的 indexOf？它可能在正在填充的任何源列中返回 null。

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