基礎!使用map返回一個新的陣列要注意哦

森林蘑菇_mushroom發表於2018-06-04

定義和用法

map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。

  • 這段話還是比較繞口的,沒動腦子的時候,意思就是返回一個新陣列唄,結果某次用了map,原變數還沒改呢,就發現結果變了,唉呀媽呀,可神奇了。

錯誤示範

let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    v.a += 1;
    v.b += '1';
    return v
});
console.log(arr); // [{a:2,b:'21'},{a:3,b:'31'}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]
複製程式碼
  • 隨意感受下,很崩潰。

分析

  • 造成這個原因是因為,他返回的陣列,就是return了一個處理過的物件啊,那js的引用型別還是毛變化都沒有,那個改變(v),就等於改變了指向同一個地址的v,呵呵了。
  • 那麼知道為啥就好辦了,首先想到的就是assign
  • Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。
  • 其他的嘛,不加班的那一天再想吧。
let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    let v1 = Object.assign({},v);
    v1.a += 1;
    v1.b += '1';
    return v1
});
console.log(arr); // [{a:1,b:2},{a:2,b:3}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]
複製程式碼

相關文章