在Javascript中查找对象数组中的值

时间:2012-09-17 15:19:52

标签: javascript arrays

我之前曾经问过类似的问题,但这个问题有点不同。我有一个未命名的对象数组,其中包含一个命名对象数组,我需要获取“name”为“string 1”的对象。这是一个示例数组。

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

更新:我之前应该说过,但是一旦找到它,我就想用一个已编辑的对象替换它。

20 个答案:

答案 0 :(得分:551)

查找数组元素:

let arr = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

let obj = arr.find(o => o.name === 'string 1');

console.log(obj);


替换数组元素:

let arr = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

let obj = arr.find((o, i) => {
    if (o.name === 'string 1') {
        arr[i] = { name: 'new string', value: 'this', other: 'that' };
        return true; // stop searching
    }
});

console.log(arr);

答案 1 :(得分:179)

您可以遍历数组并测试该属性:

function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].name === nameKey) {
            return myArray[i];
        }
    }
}

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

var resultObject = search("string 1", array);

答案 2 :(得分:116)

ES6 中,您可以像这样使用Array.prototype.find(predicate, thisArg?)

array.find(x => x.name === 'string 1')

http://exploringjs.com/es6/ch_arrays.html#_searching-for-array-elements https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/find

然后替换所述对象(并使用另一个很酷的 ES6 方法fill),您可以执行以下操作:

let obj = array.find(x => x.name === 'string 1');
let index = array.indexOf(obj);
array.fill(obj.name='some new string', index, index++);

答案 3 :(得分:32)

根据ECMAScript 6,您可以使用findIndex功能。

array[array.findIndex(x => x.name == 'string 1')]

答案 4 :(得分:20)

使用underscore.js使用findWhere方法:

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];


var result = _.findWhere(array, {name: 'string 1'});

console.log(result.name);

JSFIDDLE

中查看此内容

答案 5 :(得分:16)

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

var foundValue = array.filter(obj=>obj.name==='string 1');

console.log(foundValue);

答案 6 :(得分:13)

使用简单的for - 循环:

var result = null;
for (var i = 0; i < array.length; i++) { 
  if (array[i].name === "string 1") { 
    result = array[i];
    break;
  } 
}

或者,如果可以,也就是说,如果您的浏览器支持它,请使用Array.filter,这更简洁:

var result = array.filter(function (obj) {
  return obj.name === "string 1";
})[0];

答案 7 :(得分:11)

一行答案。 您可以使用过滤功能来获得结果。

&#13;
&#13;
var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

console.log(array.filter(function(arr){return arr.name == 'string 1'})[0]);
&#13;
&#13;
&#13;

答案 8 :(得分:10)

新答案

我添加了prop作为参数,使其更通用和可重复使用

/**
 * Represents a search trough an array.
 * @function search
 * @param {Array} array - The array you wanna search trough
 * @param {string} key - The key to search for
 * @param {string} [prop] - The property name to find it in
 */

function search(array, key, prop){
    // Optional, but fallback to key['name'] if not selected
    prop = (typeof prop === 'undefined') ? 'name' : prop;    

    for (var i=0; i < array.length; i++) {
        if (array[i][prop] === key) {
            return array[i];
        }
    }
}

用法:

var array = [
    { 
        name:'string 1', 
        value:'this', 
        other: 'that' 
    },
    { 
        name:'string 2', 
        value:'this', 
        other: 'that' 
    }
];

search(array, 'string 1');
// or for other cases where the prop isn't 'name'
// ex: prop name id
search(array, 'string 1', 'id');

摩卡测试:

var assert = require('chai').assert;

describe('Search', function() {
    var testArray = [
        { 
            name: 'string 1', 
            value: 'this', 
            other: 'that' 
        },
        { 
            name: 'string 2', 
            value: 'new', 
            other: 'that' 
        }
    ];

    it('should return the object that match the search', function () {
        var name1 = search(testArray, 'string 1');
        var name2 = search(testArray, 'string 2');

        assert.equal(name1, testArray[0]);
        assert.equal(name2, testArray[1]);

        var value1 = search(testArray, 'this', 'value');
        var value2 = search(testArray, 'new', 'value');

        assert.equal(value1, testArray[0]);
        assert.equal(value2, testArray[1]);
    });

    it('should return undefined becuase non of the objects in the array have that value', function () {
        var findNonExistingObj = search(testArray, 'string 3');

        assert.equal(findNonExistingObj, undefined);
    });

    it('should return undefined becuase our array of objects dont have ids', function () {
        var findById = search(testArray, 'string 1', 'id');

        assert.equal(findById, undefined);
    });
});

测试结果:

Search
    ✓ should return the object that match the search
    ✓ should return undefined becuase non of the objects in the array have that value
    ✓ should return undefined becuase our array of objects dont have ids


  3 passing (12ms)

旧答案 - 由于不良做法而被删除

如果你想知道为什么这是不好的做法,那么请看这篇文章:

Why is extending native objects a bad practice?

进行数组搜索的原型版本:

Array.prototype.search = function(key, prop){
    for (var i=0; i < this.length; i++) {
        if (this[i][prop] === key) {
            return this[i];
        }
    }
}

用法:

var array = [
    { name:'string 1', value:'this', other: 'that' },
    { name:'string 2', value:'this', other: 'that' }
];

array.search('string 1', 'name');

答案 9 :(得分:10)

带着foreach:

let itemYouWant = null;
array.forEach((item) => {
    if (item.name === 'string 1') {
        itemYouWant = item;
    }
});
console.log(itemYouWant);

答案 10 :(得分:9)

考虑到您有以下代码段:

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

您可以使用以下功能搜索项目

const search = what => array.find(element => element.name === what);

您可以检查是否找到了该项目。

if (search("string 1")) {
    console.log(search.value, search.other);
} else {
    console.log('No result found');
}

答案 11 :(得分:4)

你可以通过一个简单的循环来完成:

var obj = null;    
for (var i = 0; i < array.length; i++) {
    if (array[i].name == "string 1") {
        obj = array[i];
        break;
    }
}

答案 12 :(得分:3)

另一种方法(帮助@NullUserException和@Wexoni的注释)是检索数组中的对象索引,然后从那里开始:

var index = array.map(function(obj){ return obj.name; }).indexOf('name-I-am-looking-for');
// Then we can access it to do whatever we want
array[index] = {name: 'newName', value: 'that', other: 'rocks'};

答案 13 :(得分:2)

与之前的答案类似,我使用了以下内容:

    Array.prototype.getIemtByParam = function(paramPair) {
      var key = Object.keys(paramPair)[0];
      return this.find(function(item){return ((item[key] == paramPair[key]) ? true: false)});
    }

用法:

myArray.getIemtByParam(
    {name: 'Sasha'}
);

答案 14 :(得分:1)

  

您是否在对象列表中的项目中寻找通用搜索(过滤器)而未指定项目密钥

<强>输入

var productList = [{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}]
function customFilter(objList, text){
if(undefined === text || text === '' ) return objList;
return objList.filter(product => {
    let flag;
    for(let prop in product){
        flag = false;
        flag = product[prop].toString().indexOf(text) > -1;
        if(flag)
        break;
    }
return flag;
});}

<强>执行

customFilter(productList, '$9');

enter image description here

答案 15 :(得分:1)

如果您正在使用jQuery,请尝试$ .grep()。

http://api.jquery.com/jquery.grep/

答案 16 :(得分:0)

您可以使用npm中的query-objects。您可以使用过滤器搜索对象数组。

const queryable = require('query-objects');

const users = [
    {
      firstName: 'George',
      lastName: 'Eracleous',
      age: 28
    },
    {
      firstName: 'Erica',
      lastName: 'Archer',
      age: 50
    },
    {
      firstName: 'Leo',
      lastName: 'Andrews',
      age: 20
    }
];

const filters = [
    {
      field: 'age',
      value: 30,
      operator: 'lt'
    },
    {
      field: 'firstName',
      value: 'Erica',
      operator: 'equals'
    }
];

// Filter all users that are less than 30 years old AND their first name is Erica
const res = queryable(users).and(filters);

// Filter all users that are less than 30 years old OR their first name is Erica
const res = queryable(users).or(filters);

答案 17 :(得分:0)

function getValue(){
    for(var i = 0 ; i< array.length; i++){
        var obj = array[i];
        var arr = array["types"];
        for(var j = 0; j<arr.length;j++ ){
            if(arr[j] == "value"){
                return obj;
            }
        }

    }
}

答案 18 :(得分:0)

以下是搜索和替换的解决方案

function searchAndUpdate(name,replace){
    var obj = array.filter(function ( obj ) {
        return obj.name === name;
    })[0];
    obj.name = replace;
}

searchAndUpdate("string 2","New String 2");

答案 19 :(得分:-1)

这个答案适用于打字稿/ Angular 2,4,5 +

我在上面的@rujmah回答的帮助下得到了这个答案。他的回答带来了数组计数...然后找到值并用另一个值替换它......

这个答案的作用是简单地获取可能通过另一个模块/组件在另一个变量中设置的数组名称...在这种情况下,我构建的数组具有逗留日期的css名称。所以这样做是提取该名称然后允许我将其设置为另一个变量并像这样使用它。在我的例子中,它是一个html css类。

let obj = this.highlightDays.find(x => x.css); let index = this.highlightDays.indexOf(obj); console.log('here we see what hightlightdays is ', obj.css); let dayCss = obj.css;