blocks|key|404717|text|当然，只要改变它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|404718|使用jQuery的$.each|offset|length|style|CODE|404719|$.each(foo,+function()+{
++++if+(this.bar+===+1)+{
++++++++this.baz[0]+=+11;
++++++++this.baz[1]+=+22;
++++++++this.baz[2]+=+33;
++++++++//+Or:+`this.baz+=+[11,+22,+33];`
++++}
});|code-block|syntax|javascript|404720|使用ES5的forEach|404721|foo.forEach(function(obj)+{
++++if+(obj.bar+===+1)+{
++++++++obj.baz[0]+=+11;
++++++++obj.baz[1]+=+22;
++++++++obj.baz[2]+=+33;
++++++++//+Or:+`obj.baz+=+[11,+22,+33];`
++++}
});|404722|...or你有other+looping+options+in+this+other+SO+answer。|404723|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9329446/for-each-in-a-array-how-to-do-that-in-javascript/9329476#9329476^0|0|9|6|0|0|6|7|0|0|7|19|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Sure, just change it:</p>

<p>With jQuery's <code>$.each</code>:</p>

<pre><code>$.each(foo, function() {
    if (this.bar === 1) {
        this.baz[0] = 11;
        this.baz[1] = 22;
        this.baz[2] = 33;
        // Or: `this.baz = [11, 22, 33];`
    }
});
</code></pre>

<p>With ES5's <code>forEach</code>:</p>

<pre><code>foo.forEach(function(obj) {
    if (obj.bar === 1) {
        obj.baz[0] = 11;
        obj.baz[1] = 22;
        obj.baz[2] = 33;
        // Or: `obj.baz = [11, 22, 33];`
    }
});
</code></pre>

<p>...or you have <a href="https://stackoverflow.com/questions/9329446/for-each-in-a-array-how-to-do-that-in-javascript/9329476#9329476">other looping options in this other SO answer</a>.</p>


blocks|key|1547128|text|带扩展(...)运算符的.map|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1547129|var+result+=+foo.map(el+=>+el.bar+==+1+?+{...el,+baz:+[11,22,33]}+:+el);|1547130|entityMap^0|4|3|C|4|0|0|20|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

<p><code>.map</code> with <em>spread</em> (<code>...</code>) operator</p>

<p><code>var result = foo.map(el =&gt; el.bar == 1 ? {...el, baz: [11,22,33]} : el);</code></p>


blocks|key|3568539|text|您可以使用find并更改其属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3568540|​|3568541|let+foo+=+[{+bar:+1,+baz:+[1,2,3]+},+{+bar:+2,+baz:+[4,5,6]+}];

let+obj+=+foo.find(f=>f.bar==1);
if(obj)
++obj.baz=[2,3,4];
console.log(foo);|code-block|syntax|javascript|3568542|3568543|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find^0|5|4|5|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find" rel="noreferrer"><code>find</code></a> and change its property.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];

let obj = foo.find(f=&gt;f.bar==1);
if(obj)
  obj.baz=[2,3,4];
console.log(foo);</code></pre>
</div>
</div>
</p>


blocks|key|3568484|text|没有jQuery和向后兼容性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3568485|for+(var+i+=+0;+i+<+foo.length;+i%2B%2B)+{
++++if+(foo[i].bar+===+1)+{
++++++++foo[i].baz+=+[11,12,13];
++++}
}|code-block|syntax|javascript|3568486|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Without jQuery and backwards compatibility</p>

<pre><code>for (var i = 0; i &lt; foo.length; i++) {
    if (foo[i].bar === 1) {
        foo[i].baz = [11,12,13];
    }
}
</code></pre>


blocks|key|1445824|text|我们也可以通过使用Array的map函数来实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445825|+foo.map((obj)+=>+{
+++if(obj.bar+==+1){
+++++obj.baz[0]+=+11;
+++++obj.baz[1]+=+22;
+++++obj.baz[2]+=+33;
+++}
+})|code-block|syntax|javascript|1445826|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>We can also achieve this by using Array's map function:</p>

<pre><code> foo.map((obj) =&gt; {
   if(obj.bar == 1){
     obj.baz[0] = 11;
     obj.baz[1] = 22;
     obj.baz[2] = 33;
   }
 })
</code></pre>


blocks|key|3568634|text|++++const+objArr+=+[
++++++++{prop1:+'value1',+prop2:+'value11'},
++++++++{prop1:+'value2',+prop2:+'value22'},
++++++++{prop1:+'value3',+prop2:+'option33'},
++++++++{prop1:+'value4',+prop2:+'option44'}
++++]

++++const+newObjArr+=+objArr.map(obj+=>+{
++++++++++++if+(['value1',+'value2'].includes(obj.prop1))+{
++++++++++++++++return+{...obj,+prop1:+'newValue'}
++++++++++++}
++++++++++++return+obj
++++++++}
++++)
++++
++++//+const+responseGotten+=+[
++++//+++++{+prop1:+'newValue',+prop2:+'value11'+},
++++//+++++{+prop1:+'newValue',+prop2:+'value22'+},
++++//+++++{+prop1:+'value3',+prop2:+'option33'+},
++++//+++++{+prop1:+'value4',+prop2:+'option44'+}
++++//+]|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3568635|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    const objArr = [
        {prop1: 'value1', prop2: 'value11'},
        {prop1: 'value2', prop2: 'value22'},
        {prop1: 'value3', prop2: 'option33'},
        {prop1: 'value4', prop2: 'option44'}
    ]

    const newObjArr = objArr.map(obj =&gt; {
            if (['value1', 'value2'].includes(obj.prop1)) {
                return {...obj, prop1: 'newValue'}
            }
            return obj
        }
    )
    
    // const responseGotten = [
    //     { prop1: 'newValue', prop2: 'value11' },
    //     { prop1: 'newValue', prop2: 'value22' },
    //     { prop1: 'value3', prop2: 'option33' },
    //     { prop1: 'value4', prop2: 'option44' }
    // ]
</code></pre>


blocks|key|3568442|text|$.each(foo,function(index,value)
{
++++if(this.bar==1)
++++{
this.baz[0]+=+11;
++++++++this.baz[1]+=+22;
++++++++this.baz[2]+=+33;
++++}

});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3568443|但是for循环比$.each快，所以你可以尝试使用|unstyled|3568444|for(var+i=0;+i+<foo.length;+i%2B%2B)
{

if(foo[i].bar==1)
{
//change+the+code
}
}|3568445|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$.each(foo,function(index,value)
{
    if(this.bar==1)
    {
this.baz[0] = 11;
        this.baz[1] = 22;
        this.baz[2] = 33;
    }

});
</code></pre>

<p>but for loop is faster than $.each so u can try to use </p>

<pre><code>for(var i=0; i &lt;foo.length; i++)
{

if(foo[i].bar==1)
{
//change the code
}
}
</code></pre>


blocks|key|1445859|text|但在选择上述任何一种技术之前，请记住与每种方法相关的性能挑战。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445860|Object+iterate+For-In,+average:+~240+microseconds.

Object+iterate+Keys+For+Each,+average:+~294+microseconds.

Object+iterate+Entries+For-Of,+average:+~535+microseconds.|code-block|syntax|javascript|1445861|参考-+3+JavaScript+Performance+Mistakes+You+Should+Stop+Doing|offset|length|1445862|entityMap|0|LINK|mutability|MUTABLE|url|https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951^0|0|0|4|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>But before opting any of the mentioned techniques please keep in mind the performance challenges associated with each of the approach.</p>

<pre><code>Object iterate For-In, average: ~240 microseconds.

Object iterate Keys For Each, average: ~294 microseconds.

Object iterate Entries For-Of, average: ~535 microseconds.
</code></pre>

<p>Reference - <a href="https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951" rel="nofollow noreferrer">3 JavaScript Performance Mistakes You Should Stop Doing</a></p>


blocks|key|1445875|text|你可以使用javascript的过滤功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445876|​|1445877|obj+=+[
++++{inActive:false,+id:1},
++++{inActive:false,+id:2},
++++{inActive:false,+id:+3}
];
let+nObj+=+obj.filter(ele+=>+{
++++ele.inActive+=+true;
++++return+ele;
});

console.log(nObj);|code-block|syntax|javascript|1445878|1445879|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can make use of filter function of javascript.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>obj = [
    {inActive:false, id:1},
    {inActive:false, id:2},
    {inActive:false, id: 3}
];
let nObj = obj.filter(ele =&gt; {
    ele.inActive = true;
    return ele;
});

console.log(nObj);</code></pre>
</div>
</div>
</p>


blocks|key|404841|text|您可以使用简单的for循环来修改数组|type|unstyled|depth|inlineStyleRanges|entityRanges|data|404842|​|404843|var+foo+=+[{+bar:+1,+baz:+[1,2,3]+},+{+bar:+2,+baz:+[4,5,6]+}];
for(i+=+0;i+<+foo.length;i%2B%2B){
++//Here+your+confition+for+which+item+you+went+to+edit
	if(foo[i].bar+==+1){
++++//Here+you+logic+for+update+property
		foo[i].baz=+[1,11,22]
	}
}
console.log(foo);|code-block|syntax|javascript|404844|404845|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can modify the array by using simple for loop</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];
for(i = 0;i &lt; foo.length;i++){
  //Here your confition for which item you went to edit
	if(foo[i].bar == 1){
    //Here you logic for update property
		foo[i].baz= [1,11,22]
	}
}
console.log(foo);</code></pre>
</div>
</div>
</p>


blocks|key|405888|text|你可以尝试一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|405889|​|405890|const+tasks+=+[+{+id:+1,+done:+false+},+{+id:+2,+done:+false+}+]
const+completed_task+=+{+id:+1,+done:+true+}

const+markCompleted+=+(tasks,+task)+=>+{
++const+index+=+tasks.findIndex(t+=>+t.id+===+task.id);
++tasks.splice(index,+1);
++tasks.push(task);
++return+tasks;
}

console.log(tasks)
console.log(markCompleted(tasks,+completed_task))|code-block|syntax|javascript|405891|405892|编辑|offset|length|style|BOLD|405893|要避免索引更改：|405894|const+markCompleted+=+(tasks,+task)+=>+{
++++++const+index+=+tasks.findIndex(t+=>+t.id+===+task.id);
++++++tasks[index]+=+task;
++++++return+tasks;
++++}|405895|entityMap^0|0|0|0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@$L|10|M|11|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|S|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>you can play around: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const tasks = [ { id: 1, done: false }, { id: 2, done: false } ]
const completed_task = { id: 1, done: true }

const markCompleted = (tasks, task) =&gt; {
  const index = tasks.findIndex(t =&gt; t.id === task.id);
  tasks.splice(index, 1);
  tasks.push(task);
  return tasks;
}

console.log(tasks)
console.log(markCompleted(tasks, completed_task))</code></pre>
</div>
</div>
</p>

<p><strong>EDIT</strong></p>

<p>to avoid index change: </p>

<pre><code>const markCompleted = (tasks, task) =&gt; {
      const index = tasks.findIndex(t =&gt; t.id === task.id);
      tasks[index] = task;
      return tasks;
    }
</code></pre>


<pre><code>var foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];

var filtered = $.grep(foo, function(v){
    return v.bar === 1;
});

console.log(filtered);
</code></pre>

<p><a href="http://jsfiddle.net/98EsQ/">http://jsfiddle.net/98EsQ/</a></p>

<p>Is there any way to modify a certain objects property (like the one I'm filtering out above) without creating new arrays and/or objects?</p>

<p>Desired result: <code>[{ bar: 1, baz: [11,22,33] }, { bar: 2, baz: [4,5,6] }]</code></p>


Modify object property in an array of objects

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

问修改对象数组中的对象属性
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修改对象数组中的对象属性EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问修改对象数组中的对象属性
EN