Search an array of JavaScript objects for an object with a matching value

技术背景

在JavaScript开发中，经常会遇到在对象数组里查找具有特定属性值的对象的需求。例如，在一个包含多个用户信息对象的数组中，查找具有特定ID的用户对象。这就需要使用合适的方法来高效地完成查找操作。

实现步骤

1. 使用find()方法

find()方法会返回数组中满足提供的测试函数的第一个元素的值。若没有元素满足测试函数，则返回undefined。

myArray.find(x => x.id === '45').foo;

2. 使用findIndex()方法

若想查找满足条件的元素的索引，可使用findIndex()方法。它会返回数组中满足提供的测试函数的第一个元素的索引，若没有元素满足，则返回 -1。

myArray.findIndex(x => x.id === '45');

3. 使用filter()方法

若想获取所有匹配元素组成的数组，可使用filter()方法。

myArray.filter(x => x.id === '45');

若想获取匹配元素的特定属性组成的数组，可结合map()方法。

myArray.filter(x => x.id === '45').map(x => x.foo);

4. 使用jQuery的grep()函数

var result = $.grep(myArray, function(e){ return e.id == id; });

5. 创建查找对象

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}
// 现在可以使用 lookup[id] 进行查找

6. 使用ES6的Map

const map = new Map( myArray.map(el => [el.id, el]) );
map.get(27).foo;

7. 使用reduce()方法

var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} ];
var id = 73;
var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

8. 自定义查找函数

function findById(source, id) {
    for (var i = 0; i < source.length; i++) {
        if (source[i].id === id) {
            return source[i];
        }
    }
    throw "Couldn't find object with id: " + id;
}

9. 通用的查找函数

function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

核心代码

以下是一个包含多种查找方法的示例代码：

function A(arr, id) {
    return arr.find(o => o.id == id);
}

function B(arr, id) {
    let idx = arr.findIndex(o => o.id == id);
    return arr[idx];
}

function C(arr, id) {
    return arr.filter(o => o.id == id)[0];
}

function D(arr, id) {
    return arr.reduce((a, b) => (a.id == id && a) || (b.id == id && b));
}

function E(arr, id) {
    for (var i = 0; i < arr.length; i++) if (arr[i].id == id) return arr[i];
    return null;
}

function F(arr, id) {
    var retObj = {};
    $.each(arr, (index, obj) => {
        if (obj.id == id) { 
            retObj = obj;
            return false;
        }
    });
    return retObj;
}

function G(arr, id) {
    return $.grep(arr, e => e.id == id )[0];
}

function H(arr, id) {
    return $.map(myArray, function(val) {
        return val.id == id ? val : null;
    })[0];
}

function I(arr, id) {
    return _.find(arr, o => o.id == id);
}

let J = (() => {
    let cache = new Map();
    return function J(arr, id, el = null) { 
        return cache.get(id) || (el = arr.find(o => o.id == id), cache.set(id, el), el);
    }
})();

function K(arr, id) {
    return mapK.get(id)
}

function L(arr, id) {
    return mapL[id];
}

// 测试数据
myArray = [...Array(10)].map((x, i) => ({'id': `${i}`, 'foo': `bar_${i}`}));
const mapK = new Map( myArray.map(el => [el.id, el]) );
const mapL = {}; myArray.forEach(el => mapL[el.id] = el);

// 测试
[A, B, C, D, E, F, G, H, I, J, K, L].forEach(f => console.log(`${f.name}: ${JSON.stringify(f(myArray, '5'))}`));

最佳实践

• 若只需查找一个匹配元素，优先使用find()方法。使用时，为避免对象未找到导致的错误，可使用可选链操作符?.。

const myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
const res = myArray.find(x => x.id === '100')?.foo; // 若对象未找到，返回 undefined

• 若需要多次查找，可使用Map或查找对象来提高查找效率。

const map = new Map( myArray.map(el => [el.id, el]) );
// 多次查找
map.get('73').foo;
map.get('45').foo;

常见问题

1. 浏览器兼容性问题

find()、filter()等方法以及箭头函数在较旧的浏览器（如IE）中不被支持。若需要支持这些浏览器，可使用Babel进行代码转译，并引入polyfill。

2. 对象未找到的错误

使用find()方法查找对象，若对象未找到，直接访问其属性会导致错误。可使用可选链操作符?.来避免。

const myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
// 错误示例
const res1 = myArray.find(x => x.id === '100').foo; // 会抛出错误
// 正确示例
const res2 = myArray.find(x => x.id === '100')?.foo; // 返回 undefined