js map 實戰
阿新 • • 發佈：2020-07-13
需求：後端需要一個數組，裡面的結構是
let arr = [{"url":'http://www.xxx.com',"test_id": 1001}]
習慣了for of一把梭的我，想試試用map來實現這個需求。
進行測試驗證：
var users = [
{name: "張含韻", "email": "[email protected]"},
{name: "江一燕", "email": "[email protected]"},
{name: "李小璐", "email": "[email protected]"}
];
var emails = users.map(function (user) { return user.email; });
// 輸出emails ：["[email protected]", "[email protected]", "[email protected]"]
說來慚愧，對於map這個內建函式，總沒掌握它的精髓，知道它可以做迴圈，也知道可以拿來去重，但總是用不靈活。
（map方法的作用不難理解，“對映”嘛，也就是原陣列被“對映”成對應新陣列。）
接著上面的問題我們繼續：
var users = [
{name: "張含韻", "email": "[email protected]"},
{name: "江一燕", "email": "[email protected]"},
{name: "李小璐", "email": "[email protected]"}
];
var emails = users.map(function (user) {user.age = 12; ruturn user });
// 輸出 users ：
// 輸出 emails ：
發現原來的陣列被改變了，這個是什麼原因呢？
群友A解答道: user本身也是物件，會有記憶體指向，直接賦值屬性會改變原來的物件
那下一步是考慮怎麼才能不影響原陣列？
這裡群友給了幾種解決思路：
1. 也可以先 JSON.parse(JSON.stringify(user))處理，也可以clone後再處理
2. users.map((user) => ({ ...user, value: 123 })) // 這裡用瞭解構的語法
3.反正都是用map，內部就是怎麼處理物件用到同個記憶體的問題
4.有空多去翻下 MDN
5.喜歡短的嗎 this.newObj.images && this.newObj.images.map(func)
這個地方，加解構和不加解構有什麼區別呢？
// 加了不改變原陣列，陣列內的物件是個新物件了，不加就是在原物件上更改（原陣列會變）
users.map((user) => ({ ...user, value: 123 })) // 這裡用瞭解構的語法
感謝群友提供的圖：
定義數組裡面有物件，理論上是開闢了多個記憶體空間，每個物件（含陣列）都有各自的指向記憶體空間
image.png寫在最後，很多東西總覺得會了，其實實際的操作中會遇到很多細節問題。