ES6 -- 新內建方法取代舊內建方法: 複製物件屬性

當我們想把2個物件複製到一個物件中,

在ES5, 會用Object.keys() & forEach()寫:

e.g.

var dst  = {quux: 0};
var src1 = {foo: 1, bar: 2};
var src2 = {foo: 3, baz: 4};

Object.keys(src1).forEach(function(k) {

    dst[k] = src1[k];                                                       // 將src1這陣列的值複製到dst物件上

});

Object.keys(src2).forEach(function(k) {

    dst[k] = src2[k];                                                       // 將src2這陣列的值複製到dst物件上

});

console.log(dst);                                                       // Object {quux: 0, foo: 3, bar: 2, baz: 4}



在ES6可用Object.assign()這個新語法寫:

e.g.

var dst  = {quux: 0}
var src1 = {foo: 1, bar: 2}
var src2 = {foo: 3, baz: 4}

Object.assign(dst, src1, src2);                                      // dst是要被放值進去的物件, src1和src2陣列的值要放進dst物件裡

console.log(dst);                                                             // Object {quux: 0, foo: 3, bar: 2, baz: 4}



p.s. 補充:

從ES5開始, "列舉一個物件中的所有屬性"有3種方法:


1. for...in loops

     -->  traverses all enumerable properties of an object and its prototype chain. (可知道會列舉出的不只是該物件本身, 連物件原型鏈上的屬性(如果有的話)也會被列舉出來。且for...in loop只會列舉有被列舉出來的屬性, 也就是enumerable: true的那些)

    -->  可搭配hasOwnProperty()限定只能列舉出該物件本身的屬性, 而不要列到那些在物件原型鏈上的屬性。


2. Object.keys(物件)

     -->  returns an array with all the own (not in the prototype chain) enumerable properties names ("keys") of an oject。(只會列舉該物件本身的屬性, 且只會列舉有被列舉出來的屬性, 也就是enumerable: true的那些)


    e.g. getFoo這個屬性是不被列舉的屬性:

    var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
    my_obj.foo = 1;

    console.log(Object.keys(my_obj));                             // console: ['foo']


3. Object.getOwnPropertyNames(物件)

     -->  returns an array containing all own properties names (enumerable or not) of an object. (只會列舉該物件本身的屬性, 且不管該屬性是否是enumerable: true皆會列舉出來)


p.s. 補充:
Object.assign(target, ...source);

--> 會複製1個至多個來源物件(source objects)中可列舉的屬性到1個目標物件(target object)。會回傳這個目標物件。

--> 要注意來源物件中的值的複製前後順序會影響最後輸出的數值:
 
     e.g.
   
     var o1 = { a: 1, b: 1, c: 1 };
     var o2 = { b: 2, c: 2 };
     var o3 = { c: 3 };

     var obj = Object.assign({}, o1, o2, o3);                           // 輸出值優先度: o3 > o2 > o1
     console.log(obj);                                                                 // { a: 1, b: 2, c: 3 }