JavaScript中的Object.assign()方法_js object assign方法

/*
 * Let's define an object with two properties
 */
const desktop = {
  CPU: "Intel",
  Memory: "16GB"
};
 
/*
 * Let's define a property at runtime. 
 * This property we'll set as non-enumerable.
 */
Object.defineProperty(desktop, 'Operating_System', {
  value: "Windows 10",
  enumerable: false
});
 
/* Let's try to iterate through the properties of the desktop object.
 * Expected: 
   "CPU" 
   "Memory"
   The property desktop won't appear as we iterate 
   because the enumerable property is set to false.
 */ 
 
for( let keys in desktop){
  console.log(keys);
}
 
//Same as using Object.keys() methods
console.log(Object.keys(desktop));

这是上面的示例代码的步骤。

Object.assign(target, ...sources)

第一个参数是目标对象。简而言之，该target对象将是不同来源相结合的结果。

/*
* In this example, let's declare two objects, in our example, food and clothes. 
* After that, let's try to merge the two objects into one.
 */
 
//declare two objects
const food = { color: 'blue'};
const clothes = { brand: 'Guess'};
//merge two objects
const result = Object.assign({ companyName: "XYZ" }, food, clothes);
 
//The output would be:{companyName: "XYZ", color: "blue", brand: "Guess"}
console.log(result); 

克隆对象

/*
 * In this example, let's declare one object and clone it into an empty object. 
 */
 
//declare an object
const customer = { fName: 'Jin', lName: 'Necesario', handsome: true };
//clone the customer object
const clonedCustomer = Object.assign({}, customer);
 
//The output would be: {fName: "Jin", lName: "Necesario", handsome: true}
console.log(clonedCustomer);

关于Object.assign()方法的注意事项

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
 
const newPerson = new Person("jin", 'necesario', 100, 'brown');
 
Person.prototype.nationality = "English";
 
/*
* Person {firstName: "jin", lastName: "necesario", age: 100, eyeColor: "brown"}
* age: 100
* eyeColor: "brown"
* firstName: "jin"
* lastName: "necesario"
* __proto__:
* nationality: "English"
* constructor: ƒ Person(first, last, age, eyecolor)
* __proto__: Object
*/
console.log(newPerson);
 
/*output english*/
console.log(newPerson.nationality);
console.log(newPerson.__proto__.nationality);
 
let result = Object.assign({}, newPerson);
 
console.log(result);
 
/*undefined because no access to [[proto]]*/
console.log(result.nationality);
console.log(result.__proto__.nationality);

它不会复制getter和setter。

const customer = {
    fName: 'Jin',
    lName: 'Necesario',
    get fullName() {
        return this.lName + " " +  this.fName;
    },
    set fullName(value){
        const parts = value.split(" ");
        this.fName = parts[0];
        this.lName = parts[1];
    }
};
 
let result = Object.assign({}, customer);
 
/*
* We are showing that this object has a getter and setter that will be 
* available in the target object
* {enumerable: true, configurable: true, get: ƒ, set: ƒ}
*   configurable: true
*   enumerable: true
*   get: ƒ fullName()
*   set: ƒ fullName(value)
*   __proto__: Object
*/
 
console.log(Object.getOwnPropertyDescriptor(customer,'fullName'));
 
/*
 * Output: 
 * { fName: "Jin", lName: "Necesario", fullName: "Necesario, Jin"}
 */
console.log(result);
 
/*
* Output: 
* {value: "Necesario, Jin", writable: true, enumerable: true, configurable: true}
*  configurable: true
*  enumerable: true
*  value: "Necesario, Jin"
*  writable: true
*  __proto__: Object
*/
console.log(Object.getOwnPropertyDescriptor(result,'fullName'));

$.extend和Object.assign()之间的区别？

let customer = {
    id: 1,
    details: {
        firstName: 'Jin',
        lastName: 'Necesario',
        tall: true
    }
};
 
let customer2 = {
    id: 2,
    details: {
        firstName: 'Vincent'
    }
};
 
let newCustomer = Object.assign({}, customer, customer2);
let newCustomer2 = $.extend(true, {}, customer, customer2);
 
/**
 * output:
 * {
     details: {firstName: "Vincent"}
     id: 2
    }
 */
console.log(newCustomer);
 
/**
 *  output:
 *  {
 *    details: {firstName: "Vincent", lastName: "Necesario", tall: true}
 *    id: 2
 *   }
 */
console.log(newCustomer2); 

总结