blocks|key|4302764|text|您可以使用.map和+spread+operator的混合|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4302765|可以在创建新数组后设置值|4302766|​|4302767|let+array+=+[{id:1,name:'One'},+{id:2,+name:'Two'},+{id:3,+name:+'Three'}];

let+array2+=+array.map(a+=>+{return+{...a}})

array2.find(a+=>+a.id+==+2).name+=+"Not+Two";

console.log(array);
console.log(array2);|code-block|syntax|javascript|4302768|.as-console-wrapper+{+max-height:+100%25+!important;+top:+0;+}|4302769|4302770|或您可以在.map中这样做|BOLD|4302771|4302772|let+array+=+[{id:1,name:'One'},+{id:2,+name:'Two'},+{id:3,+name:+'Three'}];

let+array2+=+array.map(a+=>+{
++var+returnValue+=+{...a};

++if+(a.id+==+2)+{
++++returnValue.name+=+"Not+Two";
++}

++return+returnValue
})


console.log(array);
console.log(array2);|4302773|.as-console-wrapper+{+max-height:+100%25+!important;+top:+0;+}|4302774|4302775|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control|1|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator^0|5|4|5|4|0|A|G|1|0|0|0|0|0|0|0|1|5|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]|$9|1G|A|1H|1|1I]]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1K|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1M|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1N|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1O|8|@$9|1P|A|1Q|B|T]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|U|3|I|5|6|7|1T|8|@]|D|@]|E|$]]|$1|V|3|W|5|L|7|1U|8|@]|D|@]|E|$M|N]]|$1|X|3|Y|5|L|7|1V|8|@]|D|@]|E|$M|N]]|$1|Z|3|I|5|6|7|1W|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]]]

<p>You can use a mix of <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control" rel="noreferrer"><code>.map</code></a> and the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator" rel="noreferrer"><code>...</code> spread operator</a></p>

<p>You can set the value after you've created your new array</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a =&gt; {return {...a}})

array2.find(a =&gt; a.id == 2).name = "Not Two";

console.log(array);
console.log(array2);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper { max-height: 100% !important; top: 0; }</code></pre>
</div>
</div>
</p>

<p><strong>Or</strong> you can do it in the <code>.map</code></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a =&gt; {
  var returnValue = {...a};

  if (a.id == 2) {
    returnValue.name = "Not Two";
  }

  return returnValue
})


console.log(array);
console.log(array2);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper { max-height: 100% !important; top: 0; }</code></pre>
</div>
</div>
</p>


blocks|key|3888883|text|有几种方法可以做到这一点。我建议使用Array.map：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3888884|let+new_array+=+array.map(element+=>+element.id+==+2+?+{...element,+name+:+'New+Name'}+:+element);|code-block|syntax|javascript|3888885|或者使用Object.assign：|3888886|let+new_array+=+array.map(element+=>+element.id+==+2+?+Object.assign({},+element,+{name+:+'New+Name'})+:+element);|3888887|Map返回一个新数组，因此不需要数组扩展操作符。|3888888|entityMap^0|I|9|0|0|4|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>There are a few ways to do this. I would suggest using <code>Array.map</code> :</p>

<pre><code>let new_array = array.map(element =&gt; element.id == 2 ? {...element, name : 'New Name'} : element);
</code></pre>

<p>or with <code>Object.assign</code> :</p>

<pre><code>let new_array = array.map(element =&gt; element.id == 2 ? Object.assign({}, element, {name : 'New Name'}) : element);
</code></pre>

<p>Map returns a new array, so you shouldn't need the array spread operator. </p>


blocks|key|3312695|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3312696|let+array+=+[{id:1,name:'One'},+{id:2,+name:'Two'},+{id:3,+name:+'Three'}];

let+array2+=[...array.slice(0,+0),+Object.assign({},+array[0],+{
+++++++++++++++++++name:'new+one'++//change+any+property+of+idx
++++++++++++}),...array.slice(0+%2B+1)]

console.log(array);
console.log(array2);|code-block|syntax|javascript|3312697|3312698|[...array.slice(0,+idx),+Object.assign({},+array[idx],+{
+++++++++++++++x:new_x++//change+any+property+of+idx
++++++++}),...array.slice(idx+%2B+1)]|3312699|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 =[...array.slice(0, 0), Object.assign({}, array[0], {
                   name:'new one'  //change any property of idx
            }),...array.slice(0 + 1)]

console.log(array);
console.log(array2);</code></pre>
</div>
</div>
</p>

<pre><code>[...array.slice(0, idx), Object.assign({}, array[idx], {
               x:new_x  //change any property of idx
        }),...array.slice(idx + 1)]
</code></pre>


blocks|key|3888943|text|我们可以用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3888944|let+array+=+[{id:1,name:'One'},+{id:2,+name:'Two'},+{id:3,+name:+'Three'}];
let+array2+=+[...array]
array2.find(a+=>+a.id+==+2).name+=+"Not+Two";
console.log(array2);|code-block|syntax|javascript|3888945|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 use </p>

<pre><code>let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];
let array2 = [...array]
array2.find(a =&gt; a.id == 2).name = "Not Two";
console.log(array2);
</code></pre>


blocks|key|3312752|text|您可以简单地使用map()并在那里更改元素。这是密码--|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3312753|array_copy+=+array.map((element)+=>+{
++console.log(element.id);
++if+(element.id+===+2)+{
++++element.name+=+"name+changed";
++}+
return+element;
});

console.log(array_copy);|code-block|syntax|javascript|3312754|在这里，主数组也会被修改，因为数组中的元素是对象，即使在新的数组中，它也引用相同的位置。|3312755|entityMap^0|8|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>You can simply use <code>map()</code> and change the element there.
here is the code---</p>

<pre><code>array_copy = array.map((element) =&gt; {
  console.log(element.id);
  if (element.id === 2) {
    element.name = "name changed";
  } 
return element;
});

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

<p>Here the main array also gets modified, as elements inside the array are objects and it references to the same location even in the new array.</p>


blocks|key|3312766|text|你可以在map中这样做，不需要spread|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3312767|const+array+=+[{id:1,name:'One'},+{id:2,+name:'Two'},+{id:3,+name:+'Three'}]

const+updatedArray+=+array.map(a+=>+{
+++if+(a.id+==+2)+{
++++++a.name+=+'New+Name';
+++}
+++return+a;
});|code-block|syntax|javascript|3312768|entityMap^0|4|3|F|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can do it like this in <code>map</code>, no need for <code>spread</code>:</p>
<pre><code>const array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]

const updatedArray = array.map(a =&gt; {
   if (a.id == 2) {
      a.name = 'New Name';
   }
   return a;
});
</code></pre>


blocks|key|4302883|text|将属性从filterQueryParams合并到selectedLaws+(现有解决方案不适合我)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4302884|if+(this.filterQueryParams+&&+Object.prototype.toString.call(this.filterQueryParams)+===+'[object+Array]')+{
++for+(const+law+of+this.filterQueryParams)+{
++++if+(law+as+Laws.LawDetail)+{
++++++const+selectedLaw+=+this.selectedLaws.find(x+=>+x.languageCode+===+law.languageCode);
++++++if+(selectedLaw)+{
++++++++for+(const+propName+of+Object.keys(law))+{
++++++++++selectedLaw[propName]+=+law[propName];
++++++++}
++++++}
++++++else+{
++++++++this.selectedLaws.push(law);
++++++}
++++}
++}
}|code-block|syntax|javascript|4302885|entityMap^0|4|H|O|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Merging properties from <code>filterQueryParams</code> to <code>selectedLaws</code> (existing solutions did not suit me):</p>
<pre><code>if (this.filterQueryParams &amp;&amp; Object.prototype.toString.call(this.filterQueryParams) === '[object Array]') {
  for (const law of this.filterQueryParams) {
    if (law as Laws.LawDetail) {
      const selectedLaw = this.selectedLaws.find(x =&gt; x.languageCode === law.languageCode);
      if (selectedLaw) {
        for (const propName of Object.keys(law)) {
          selectedLaw[propName] = law[propName];
        }
      }
      else {
        this.selectedLaws.push(law);
      }
    }
  }
}
</code></pre>


blocks|key|4302893|text|使用Spred运算符，可以使用以下方法更新特定的数组值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4302894|​|4302895|let+array+=+[
++{+id:+1,+name:+"One"+},
++{+id:+2,+name:+"Two"+},
++{+id:+3,+name:+"Three"+},
];
const+label+=+"name";
const+newValue+=+"Two+Updated";
//+Errow+comes+if+index+was+string,+so+make+sure+it+was+integer
const+index+=+1;+//+second+element,+

const+updatedArray+=+[
++...array.slice(0,+index),
++{
++++//+here+update+data+value
++++...array[index],
++++[label]:+newValue,
++},
++...array.slice(index+%2B+1),
];

console.log(updatedArray);|code-block|syntax|javascript|4302896|4302897|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>Using Spred Operator, you can update particular array value using following method</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 array = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];
const label = "name";
const newValue = "Two Updated";
// Errow comes if index was string, so make sure it was integer
const index = 1; // second element, 

const updatedArray = [
  ...array.slice(0, index),
  {
    // here update data value
    ...array[index],
    [label]: newValue,
  },
  ...array.slice(index + 1),
];

console.log(updatedArray);</code></pre>
</div>
</div>
</p>


blocks|key|3312784|text|import+React,{useState}+from+'react';


export+function+App(props)+{
++const[myObject,setMyObject]+=+useState({
++++"Name":"",
++++"Age":""
++});
++const[myarray,+setmyarray]+=+useState([]);
const+addItem+=()+=>{
++setMyObject({...myObject,"Name":"Da","Age":"20"});
++setmyarray([...myarray,+1]);
};

++console.log(myarray);console.log(myObject);
++return+(
++++<div+className='App'>
++++++<h1>Hello+React.</h1>
++++++<h2>Start+editing+to+see+some+magic+happen!</h2>
++++++<button+onClick={addItem}>Add+me</button>
++++</div>

++);
}

//+Log+to+console
console.log('Hello+console')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3312785|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>import React,{useState} from 'react';


export function App(props) {
  const[myObject,setMyObject] = useState({
    &quot;Name&quot;:&quot;&quot;,
    &quot;Age&quot;:&quot;&quot;
  });
  const[myarray, setmyarray] = useState([]);
const addItem =() =&gt;{
  setMyObject({...myObject,&quot;Name&quot;:&quot;Da&quot;,&quot;Age&quot;:&quot;20&quot;});
  setmyarray([...myarray, 1]);
};

  console.log(myarray);console.log(myObject);
  return (
    &lt;div className='App'&gt;
      &lt;h1&gt;Hello React.&lt;/h1&gt;
      &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;button onClick={addItem}&gt;Add me&lt;/button&gt;
    &lt;/div&gt;

  );
}

// Log to console
console.log('Hello console')
</code></pre>


<p>I have an array containing objects in javascript / typescript. </p>

<pre><code>let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]
</code></pre>

<p>How can I update name of the second element (with id 2) and copy the array to a new array using javascript spread (...) operator?</p>


Update Array containing objects using spread operator

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有一个数组，其中包含javascript / typescript中的对象。let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]如何更新第二个元素的名称(使用id 2)并使用javascript (.)将数组复制到新数组接...

问使用spread运算符更新包含对象的数组
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用spread运算符更新包含对象的数组EN