在數組中查找對象，然后對其進行編輯

Question

假設我有以下數組：

var things = [
    {
        id: "12345",
        name: "Bryan"
    },
    {
        id: "55555",
        name: "Justin"
    }
]

我想搜索ID為55555的對象。 但是我想將特定對象的名稱從賈斯汀（Justin）更新為“ 邁克（Mike） ”，但仍保持整個部隊的完整。

目前，我有點想出一種搜索對象的方法，但是我找不到真正編輯該特定發現的解決方案。

有人可以幫我嗎？ 這是我到目前為止的內容：

var thing = things.filter(function (item) {
    return "55555" === item.id;
})[0]

Answer 1

如何找到正確的ID並更改名稱的函數

 var things = [ { id: "12345", name: "Bryan" }, { id: "55555", name: "Justin" } ] function updateThings(id, value, arr) { arr.forEach(function(item) { if (item.id == id) { item.name = value; return false; } }); } updateThings("55555", "Mike", things); document.body.innerHTML = '<pre>' + JSON.stringify(things, null, 4) + '</pre>'; 

Answer 2

我只是遍歷數組，檢查ID是否匹配並編輯名稱。

for (var i = 0; i < things.length; i++) {
    if (things[i].id == "55555") {
        things[i].name = "new name";
    }
}

Answer 3

使用.filter()效率低下，因為它在找到所需的項目后會不斷進行迭代。

---

您可以定義一個通用函數，如下所示：

function findElementByPropertyValue(arr, propertyName, propertyValue) {
    for (var i = 0, count = arr.length; i < count; i++) {
        var element = arr[i];
        if (element[propertyName] === propertyValue) {
            return element;
        }
    }
    return null;
}

然后像這樣使用它：

var mike = findElementByPropertyValue(things, 'id', '55555');
if (mike) {
    mike.name = 'Mike';
}

jsfiddle

---

如果需要更改數組中的許多元素，則可能需要創建一個哈希對象。

function createHashByProperty(arr, propertyName) {
    var hash = {};
    for (var i = 0, count = arr.length; i < count; i++) {
        var element = arr[i];
        hash[element[propertyName]] = element;
    }
    return hash;
}

您可以像這樣使用它：

var hash = createHashByProperty(things, 'id');

hash['55555'].name = 'Mike'; // Was 'Justin'
hash['12345'].name = 'Brian'; // Was 'Bryan'

jsfiddle

---

上面的兩個函數不會更改數組，它們只是允許您獲取對數組中元素的引用，因此您可以更改這些元素。

如果要從數組中刪除元素，則需要獲取其索引。 然后，您可以使用Array.prototype.splice函數刪除該元素。

這是執行此操作的函數：

function removeElementByPropertyValue(arr, propertyName, propertyValue) {
    for (var i = 0, count = arr.length; i < count; i++) {
        if (arr[i][propertyName] === propertyValue) {
            arr.splice(i, 1);
            return;
        }
    }
}

您可以像這樣使用它：

removeElementByPropertyValue(things, 'id', '55555');

jsfiddle

---

注意：此答案中的代碼使用純JavaScript； 它不依賴於jQuery庫。

Answer 4

為了提高效率，您可以存儲每個項目的位置，然后使用它來引用名稱：

var things = [
    {
        id: "12345",
        name: "Bryan"
    },
    {
        id: "55555",
        name: "Justin"
    }
], reference  = things.map(function(a){ return a.id });;

function replace (id, name, ar, ref) { ref.indexOf(id)>-1&&(ar[ref.indexOf(id)]['name']=name); }

replace("55555", "Phil", things, reference);

在這種情況下，您只需要循環一次。 然后，所有信息都存儲在reference變量中。 reference存儲id所在的位置，我們使用它來避免循環。 我不確定編譯器在做什么，是否會循環，但這會更有效率。

不完全支持.indexOf，因此您可以使用PollyFill

將此代碼添加到JavaScript文件的頂部：

[].indexOf||(Array.prototype.indexOf=function(a,b,c){for(c=this.length,b=(c+~~b)%c;b<c&&(!(b in this)||this[b]!==a);b++);return b^c?b:-1;})

和

Array.prototype.map||(Array.prototype.map=function(r,t){var n,o,e;if(null==this)throw new TypeError(" this is null or not defined");var i=Object(this),a=i.length>>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(n=t),o=new Array(a),e=0;a>e;){var p,f;e in i&&(p=i[e],f=r.call(n,p,e,i),o[e]=f),e++}return o});

隨着：

Array.prototype.forEach||(Array.prototype.forEach=function(r,t){var o,n;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),i=e.length>>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(o=t),n=0;i>n;){var a;n in e&&(a=e[n],r.call(o,a,n,e)),n++}});

取自： 這里 ， 這里和這里

注意：雖然IE 8和更低版本不支持indexOf實際上幾乎所有其他瀏覽器都支持indexOf 。