1. 程式人生 > >Object.assign()如何使用?

Object.assign()如何使用?

Object.assign() 用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。1、以物件為引數的合併1)Object.assign方法的第一個引數是目標物件,後面的引數都是源物件   const target = {a: 1};   const source1 = {b: 2};   const source2 = {c: 3};   Object.assign(target, source1, source2);   console.log(target)// {a:1, b:2, c:3}2)如果只有一個引數,會直接返回該引數   const obj = {a: 1};   console.log(Object.is(Object.assign(obj), obj))//true3)如果該引數不是物件會先轉換成物件

  console.log(Object.assign(2))   console.log(typeof Object.assign(2))//object4)undefined和null無法轉成物件,所以如果他們作為引數會報錯   console.log(Object.assign(undefined))//報錯   console.log(Object.assign(null))//報錯2.如果非物件引數出現在原物件的位置 處理規則如下1)如果undefined和null不在首引數,就不會報錯   let obj1 = {a: 1};   console.log(Object.is(Object.assign(obj1, undefined), obj1));   console.log(Object.assign(obj1, null) === obj1);2)其他型別的值不在首引數也不會報錯。但是字串會以陣列的形式 拷貝入物件,其他值不會產生其他效果
  const v1 = 'abc';   const v2 = true;   const v3 = 10;   const v4 = {'Symbol':0};   const obj2 = Object.assign({}, v1, v2, v3,v4);   console.log(obj2);3)Object.assign拷貝的屬性是有限制的,只拷貝原物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性   Object.assign({b: 'c'},   Object.defineProperty({}, 'invisible', {     enumerable: false,     value: 'hello'     })   )   // { b: 'c' }4)屬性名為Symbol值得屬性,也會被Object.assign拷貝
  Object.assign({a: 'b'}, {[Symbol('c')]: 'd'})   console.log(Object.assign({a: 'b'}, {[Symbol('c')]: 'd'}))3注意點:1)淺拷貝 如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。   const obj3 = {a: {b:1}};   const obj4 = Object.assign({}, obj3);   obj3.a.b = 2;   console.log(obj4.a.b)2)同名屬性的替換 一旦遇到同名屬性,Object.assign的處理方法是替換,而不是新增   const target1 = {a: 8};   const source3 = {a: 9};   console.log(Object.assign(target1, source3))3)陣列處理 把陣列視為物件   var obj5 = Object.assign([1, 2, 3], [4, 5]);   console.log(obj5);4) 取值函式的處理 如果要複製的值是取值函式,那麼求值後再複製   const source4 = {     get foo() {return 1}   }   const target4 = {};   console.log(Object.assign(target4, source4));4常見的用途1)為物件新增屬性   class Point {     constructor (x, y) {       Object.assign(this, {x, y})     }   }2) 為物件新增方法   Object.assign(SomeClass.prototype, {     someMethod(arg1, arg2) {},     anotherMethod() {}   });3)克隆物件   function clone(origin) {     return Object.assign({}, origin);   }4)合併多個物件   const merge = (target, ...sources) => Object.assign(target, ...sources);5)為屬性指定預設值   const DEFAULTS = {     logLevel: 0,     outputFormat: 'html'   };

  function processContent(options) {     options = Object.assign({}, DEFAULTS, options);     console.log(options);     // ...   }