JavaScript - 複製對象數組並在不更改原始數組的情況下進行更改

Question

我有一個對象數組。我想深入複製對象數組並對每個對象進行一些更改。我想在不修改原始數組或原始對象的情況下執行此操作。

這是我完成它的方式。然而，JavaScript新手我想確保這是一個好方法。

有沒有更好的方法來做到這一點？

const users = 
[ 
    { 
     id  : 1,  
     name  : 'Jack', 
     approved : false 
    }, 
    { 
     id  : 2,  
     name  : 'Bill', 
     approved : true 
    }, 
    { 
     id  : 3,  
     name  : 'Rick', 
     approved : false 
    }, 
    { 
     id  : 4,  
     name  : 'Rick', 
     approved : true 
    } 
]; 


const users2 = 
    users 
     .map(
      (u) => 
      { 
       return Object.assign({}, u); 
      } 
     )  
     .map(
      (u) => 
      { 
       u.approved = true; 
       return u; 
      } 
     );  


console.log('New users2 array of objects:') 
console.log(users2); 

console.log('This was original users array is untouched:') 
console.log(users); 

輸出：

New users2 array of objects: 
[ { id: 1, name: 'Jack', approved: true }, 
    { id: 2, name: 'Bill', approved: true }, 
    { id: 3, name: 'Rick', approved: true }, 
    { id: 4, name: 'Rick', approved: true } ] 
This was original users array is untouched: 
[ { id: 1, name: 'Jack', approved: false }, 
    { id: 2, name: 'Bill', approved: true }, 
    { id: 3, name: 'Rick', approved: false }, 
    { id: 4, name: 'Rick', approved: true } ] 

Answer 1

是的，這看起來很不錯。您也可以在克隆時執行修改，以避免在陣列上映射兩次。

const users2 = users.map((u) => { 
    const copiedUser = Object.assign({}, u); 
    copiedUser.approved = true; 
    return copiedUser; 
}); 

Answer 2

對於單程，您可以使用Object.assign以及更改的屬性。

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }]; 
 
const users2 = users.map(u => Object.assign({}, u, { approved: true })); 
 

 
console.log(users2); 
 
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

有幾種方法可以複製在JavaScript中的陣列，我認爲，最常用的是：

• 切片（）
• 陣列。從（）

切片函數將返回一個給定的陣列的一部分（或全部內容）作爲新的數組，基於在開始和結束索引（開始和結束索引是可選的）：

const a = [1,2,3,4,5,6,7,8,9] 
 
/* 
 
* Only begin index 
 
*/ 
 
const b = a.slice(2) 
 
console.log(b) //Will Print [3,4,5,6,7,8,9] 
 
/* 
 
* Begin index and end index 
 
*/ 
 
const c = a.slice(5,8) 
 
console.log(c) //Will Print [6,7,8] 
 
/* 
 
* No indexes provided 
 
*/ 
 
const d = a.slice() 
 
console.log(d) //Will print [1,2,3,4,5,6,7,8,9]

Array.from（）是一個函數，它將根據數組或類似參數創建一個新數組。

const a = Array.from('bar'); 
 
console.log(a) //Will Print ["b","a","r"] 
 
const b = ["for","bar"]; 
 
const c = Array.from(b); 
 
console.log(c) //Will print ["for","bar"]

More about slice

More about Array.from()