1. 程式人生 > 其它 >Javascript ES6 / ES5在陣列中查詢並更改

Javascript ES6 / ES5在陣列中查詢並更改

可以使用Filter

const list =[{id:0},{id:1},{id:2}];let listCopy =[...list];let filteredDataSource = listCopy.filter((item)=>{if(item.id ===1){
           item.id =12345;}return item;});
console.log(filteredDataSource);

陣列[物件{id:0},物件{id:12345},物件{id:2}]

一線使用傳播運算元。

const updatedData = originalData.map
(x =>(x.id === id ?{...x, updatedField:1}: x));

 

給定一個更改的物件和一個數組:

const item ={...}let items =[{id:2},{id:3},{id:4}];

通過遍歷陣列,使用新物件更新陣列:

items = items.map(x =>(x.id === item.id)? item : x)

 

儘管大多數現有答案都很不錯,但我想提供一個使用傳統for迴圈的答案,此處也應考慮。OP請求一個與ES5 / ES6相容的答案,並且傳統的for迴圈適用:)

在這種情況下使用陣列函式的問題在於,它們不會使物件發生突變,但是在這種情況下,必須進行突變。使用傳統的for迴圈所帶來的效能提升僅僅是(巨大)獎勵。

const findThis =2;const items =[{id:1,...},{id:2,...},{id:3,...}];for(let i =0, l = items.length; i < l;++i){if(items[i].id === findThis){
    items[i].iAmChanged =true;break;}}

儘管我非常喜歡陣列函式,但不要讓它們成為工具箱中的唯一工具。如果目的是使陣列變異,則它們不是最合適的。

 

 

 

 

可以使用Filter

const list =[{id:0},{id:1},{id:2}];let listCopy 
=[...list];let filteredDataSource = listCopy.filter((item)=>{if(item.id ===1){ item.id =12345;}return item;}); console.log(filteredDataSource);

陣列[物件{id:0},物件{id:12345},物件{id:2}]