es6 Object.assign()方法
基本用法
Object.assign()
方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。
const target ={ a:1};
const source1 ={ b:2};
const source2 ={ c:3};
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.assign()
方法的第一個引數是目標物件,後面的引數都是源物件。
注意,如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
const target
const source1 ={ b:2, c:2};
const source2 ={ c:3};
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
如果只有一個引數,Object.assign()
會直接返回該引數。
const obj ={a:1};
Object.assign(obj)=== obj // true
如果該引數不是物件,則會先轉成物件,然後返回。
typeofObject.assign(2)// "object"
由於undefined
和null
無法轉成物件,所以如果它們作為引數,就會報錯。
Object.assign(undefined)// 報錯
Object.assign(null)// 報錯
如果非物件引數出現在源物件的位置(即非首引數),那麼處理規則有所不同。首先,這些引數都會轉成物件,如果無法轉成物件,就會跳過。這意味著,如果undefined
和null
不在首引數,就不會報錯。
let obj ={a:1};
Object.assign(obj,undefined)=== obj // true
Object.assign(obj,null)=== obj // true
其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。
const v1 ='abc';
const v2 =true;
const v3 =10;
const obj =Object.assign({}, v1, v2, v3);
console.log(obj);// { "0": "a", "1": "b", "2": "c" }
上面程式碼中,v1
、v2
、v3
分別是字串、布林值和數值,結果只有字串合入目標物件(以字元陣列的形式),數值和布林值都會被忽略。這是因為只有字串的包裝物件,會產生可列舉屬性。
Object(true)// {[[PrimitiveValue]]: true}
Object(10)// {[[PrimitiveValue]]: 10}
Object('abc')// {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
上面程式碼中,布林值、數值、字串分別轉成對應的包裝物件,可以看到它們的原始值都在包裝物件的內部屬性[[PrimitiveValue]]
上面,這個屬性是不會被Object.assign()
拷貝的。只有字串的包裝物件,會產生可列舉的實義屬性,那些屬性則會被拷貝。
Object.assign()
拷貝的屬性是有限制的,只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable:
false
)。
Object.assign({b:'c'},
Object.defineProperty({},'invisible',{
enumerable:false,
value:'hello'
})
)
// { b: 'c' }
上面程式碼中,Object.assign()
要拷貝的物件只有一個不可列舉屬性invisible
,這個屬性並沒有被拷貝進去。
屬性名為 Symbol 值的屬性,也會被Object.assign()
拷貝。
Object.assign({ a:'b'},{[Symbol('c')]:'d'})
// { a: 'b', Symbol(c): 'd' }
注意點
(1)淺拷貝
Object.assign()
方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。
const obj1 ={a:{b:1}};
const obj2 =Object.assign({}, obj1);
obj1.a.b =2;
obj2.a.b // 2
上面程式碼中,源物件obj1
的a
屬性的值是一個物件,Object.assign()
拷貝得到的是這個物件的引用。這個物件的任何變化,都會反映到目標物件上面。
(2)同名屬性的替換
對於這種巢狀的物件,一旦遇到同名屬性,Object.assign()
的處理方法是替換,而不是新增。
const target ={ a:{ b:'c', d:'e'}}
const source ={ a:{ b:'hello'}}
Object.assign(target, source)
// { a: { b: 'hello' } }
上面程式碼中,target
物件的a
屬性被source
物件的a
屬性整個替換掉了,而不會得到{
a: { b: 'hello', d: 'e' } }
的結果。這通常不是開發者想要的,需要特別小心。
一些函式庫提供Object.assign()
的定製版本(比如 Lodash 的_.defaultsDeep
方法),可以得到深拷貝的合併。
(3)陣列的處理
Object.assign()
可以用來處理陣列,但是會把陣列視為物件。
Object.assign([1,2,3],[4,5])
// [4, 5, 3]
上面程式碼中,Object.assign()
把陣列視為屬性名為 0、1、2 的物件,因此源陣列的 0 號屬性4
覆蓋了目標陣列的
0 號屬性1
。
(4)取值函式的處理
Object.assign()
只能進行值的複製,如果要複製的值是一個取值函式,那麼將求值後再複製。
const source ={
get foo(){return1}
};
const target ={};
Object.assign(target, source)
// { foo: 1 }
上面程式碼中,source
物件的foo
屬性是一個取值函式,Object.assign()
不會複製這個取值函式,只會拿到值以後,將這個值複製過去。
常見用途
Object.assign()
方法有很多用處。
(1)為物件新增屬性
classPoint{
constructor(x, y){
Object.assign(this,{x, y});
}
}
上面方法通過Object.assign()
方法,將x
屬性和y
屬性新增到Point
類的物件例項。
(2)為物件新增方法
Object.assign(SomeClass.prototype,{
someMethod(arg1, arg2){
···
},
anotherMethod(){
···
}
});
// 等同於下面的寫法
SomeClass.prototype.someMethod =function(arg1, arg2){
···
};
SomeClass.prototype.anotherMethod =function(){
···
};
上面程式碼使用了物件屬性的簡潔表示法,直接將兩個函式放在大括號中,再使用assign
方法新增到SomeClass.prototype
之中。
(3)克隆物件
function clone(origin){
returnObject.assign({}, origin);
}
上面程式碼將原始物件拷貝到一個空物件,就得到了原始物件的克隆。
不過,採用這種方法克隆,只能克隆原始物件自身的值,不能克隆它繼承的值。如果想要保持繼承鏈,可以採用下面的程式碼。
function clone(origin){
let originProto =Object.getPrototypeOf(origin);
returnObject.assign(Object.create(originProto), origin);
}
(4)合併多個物件
將多個物件合併到某個物件。
const merge =
(target,...sources)=>Object.assign(target,...sources);
相關推薦
es6 Object.assign()方法
基本用法 Object.assign()方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。 const target ={ a:1};const source1 ={ b:2};const source2 ={ c:3};O
ES6中Object.assign() 方法
添加屬性 克隆對象 調用函數 rim 包裝 無法 ssi get 產生 ES6中Object.assign() 方法 1. 對象合並Object.assign 方法用於對象的合並,將源對象(source)的所有可枚舉屬性,復制到目標對象上。如下代碼演示: var t
ES6中新增的Object.assign()方法
ES6提供了Object.assign()方法用於物件的合併,將源物件( source )的所有可列舉屬性,複製到目標物件( target )。 Object.assign()方法的第一個引數是目標物件,後面的引數都是源物件。 注意,如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則
原生js物件合併物件拷貝Object.assign()方法的es5、es6實現
實現思路:支援es6的瀏覽器,可以直接用Object.assign()合併物件,只支援es5的瀏覽器,我們用pollyfill的方法。 作用 Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。 語法 Obj
Object.assign() 方法
str 相同 拷貝 ron var ces setter ret targe Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。 Object.assign(target, ...sources) target:
Object.assign()方法的用法
1.合併多個物件 2.克隆物件(淺); 3.為物件新增多個方法 定義方法: insertRprm(data) { let params = Object.assign({}, { pagename: 'new_wechat', eventt
ES6 Object.assign()的用法
1.Object.assign()基本用法: Object.assign方法用來將源物件(source)的所有可列舉屬性,複製到目標物件(target)。它至少需要兩個物件作為引數,第一個引數是目標物件,後面的引數都是源物件。 let targetObj1 = { a
ES6對象方法Object.assign()
null tor 添加 -m property pan 希望 asc ... 1 基本用法 Object.assign方法用於對象的合並,將源對象( source )的所有可枚舉屬性,復制到目標對象( target )。 [javascript] view pla
es6 javascript對象方法Object.assign()
getproto -h 克隆 需要 value other div function ogl es6 javascript對象方法Object.assign() 2016年12月01日 16:42:34 閱讀數:38583 1 基本用法 Object.ass
es6 javascript物件方法Object.assign()
1 基本用法Object.assign方法用於物件的合併,將源物件( source )的所有可列舉屬性,複製到目標物件( target )。var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3
ES6 對象的擴展 Object.assign()
擴展 const eof npr clas object 多個 合並 對象 1.用於對象的合並,將源對象(source)的所有可枚舉屬性,復制到目標對象(target) Object.assign方法的第一個參數是目標對象,後面的參數都是源對象。 const t
真正掌握vuex的使用方法(二)現在有的小夥伴是不是在想,以後如果我要在這裏寫自己的計算屬性怎麽辦?怎麽辦?咱們可以通過對象合並的方法去實現。 通過Object.assign()合並對象:
als js文件 false 目錄 pan md5加密 擴展 對象 pre 從上篇文章當中相信大家已經對vuex有了一些大概了解了,接下來咱們結合實例來繼續敲代碼吧!切記一定要動手實操練習一遍! 接下來咱們來完成一個超級簡單的投票功能!要求很簡單,點擊“投票”按鈕,相應的票
ES6之Object.assign()詳解
symbol 微信小遊戲 圖片 efi google 如果 proto test 多次 譯者按: 這篇博客將介紹ES6新增的Object.assign()方法。 原文: ECMAScript 6: merging objects via Object.assign()
ES6中Object新增方法
1、Object.is() Object.is()它用來比較兩個值是否嚴格相等,與嚴格比較運算子( === )的行為基本一致,是在三等號判斷的基礎上新增了兩個不同之處。 Object.is()不同之處只有兩個:一是+0不等於-0,二是NaN等於自身。 語法: Object.is(
es6 Object的一些方法
Object.is() 比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致。 不同之處只有兩個:一是+0不等於-0,二是NaN等於自身。 Object.assign() Object.assign方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目
es6中 object.assign用法
object.assign的用法用於物件的合併,將源物件(source)的所有可列舉屬性複製到目標物件(target) var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3
從Object.assign()到ES6物件到擴充套件
背景 在上一個專案開發中,看到專案記憶體在很多Object.assign()寫法的程式碼,由於之前沒有接觸過,感覺比較疑惑。通過網上查詢發現,這是ES6對物件進行的擴充套件之一,於是系統的瞭解
ECMAScript6(ES6)標準之物件Object擴充套件方法及新特性
ES6對於Object也擴增了幾個方法 不過最重要的是 ES6擴充套件了一些語法 比如說允許直接寫入變數和函式,作為物件的屬性和方法 使我們的物件更加簡潔 下面我就來詳細說明一下 語法擴充套件 簡寫物件屬性 let name = 'p
Object 物件方法學習之(1)—— 使用 Object.assign 複製物件、合併物件
作用Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。語法Object.assign(target, ...sources)引數target: 目標物件sources: 源物件返回值目標物件描述Object.assign 方法只複製源物件中可列舉的屬性
js 將多個物件合併成一個物件 assign方法。ES6新特性有哪些
1.接下來介紹一下ES6在Object新加的方法 assign() 1.作用:將多個物件{} 合併成一個獨立物件。 2.使用方式: Obejct.assign(合併的物件,傳入合併中的物件....) let user = {name:'無敵人',age:19}