摘要:如果只傳入了一個參數,則該方法會直接返回該參數。如果傳入的參數不是對象,原始類型會被包裝為對象。和無法被轉為對象,所以如果把它們兩個作為目標對象則會報錯。注意首先基本數據類型會被包裝成對象,和會被忽略。后續的內容,敬請期待。
前言
過去的一個多月新接手了一個公司的老項目,在實現新需求的同時還需要對有些地方進行重構,故而導致了沒時間更新文章。最近趁著周末更新一篇關于Object.assign使用的文章。
簡介Object.assign()方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象,它將返回目標對象。這里有兩點需要注意:1、該方法復制的是可枚舉的屬性的值,不可枚舉的屬性不會處理。2、它返回的是一個對象。
語法Object.assign(target,...sources)基本用法 合并對象
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}
注意:如果目標對象與源對象的屬性具有相同的鍵,或者多個源對象的屬性具有相同的鍵,則后面對象的屬性會覆蓋前面對象的屬性。
const target = { a: 1, b: 1 } const source1 = { b: 2, c: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) console.log(target) // {a: 1, b: 2, c: 3}
如果只傳入了一個參數,則該方法會直接返回該參數。
const target = { a: 1 } Object.assign(target) console.log(target) // {a: 1} console.log(Object.assign(target) === target) // true
如果傳入的參數不是對象,原始類型會被包裝為對象。
const target = Object.assign(1) console.log(target) // Number?{1} typeof target // "object"
null和undefined無法被轉為對象,所以如果把它們兩個作為目標對象則會報錯。
const target = Object.assign(null) const tar = Object.assign(undefined) // Cannot convert undefined or null to object
如果null和undefined作為源對象,則不會報錯,因為基本數據類型被包裝,null和undefined會被忽略。
const target = Object.assign({a:1}, null) const tar = Object.assign({a:1}, undefined) // {a:1} const target1 = Object.assign(1, null) // Number?{1}
如果null和undefined作為源對象中的屬性值,則它們不會被忽略
const target = Object.assign({ a: 1 }, { b: null }, { c: undefined }) console.log(target) // {a: 1, b: null, c: undefined}拷貝
復制一個對象
const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1}
拷貝symbol類型的屬性
const target = Object.assign({}, { a: 1 }, { [Symbol("foo")]: 2 }) console.log(target) // {a: 1, Symbol(foo): 2}
拷貝的屬性是有限制的,繼承屬性和不可枚舉屬性無法被拷貝。
const obj = Object.defineProperty({}, "a", { enumerable: false, value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2}
現在把a屬性變成可枚舉的屬性。
const obj = Object.defineProperty({}, "a", { enumerable: true, value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2, a: 1}
接下來再看看基本數據類型的可枚舉性。
注意:首先基本數據類型會被包裝成對象,null和undefined會被忽略。其次只有字符串的包裝對象才可能有自身可枚舉屬性。
const v1 = "abc" const v2 = true const v3 = 10 const v4 = Symbol("foo") const target = Object.assign({}, v1, null, v2, undefined, v3, v4) console.log(target) // {0: "a", 1: "b", 2: "c"}
拷貝一個數組。該方法會把數組視為對象,同時在拷貝的時候通過位置來進行覆蓋。
const target = Object.assign([1,2,3],[4,5]) console.log(target) // [4, 5, 3]深淺拷貝
Object.assgin()實現的是淺拷貝。如果源對象中的某個屬性的值也是對象,那么目標對象拷貝得到的是這個對象的引用,一旦這個對象發生改變,那么拷貝后的目標對象也做相應的改變。
let obj1 = { a: 0 , b: { c: 0}} let obj2 = Object.assign({}, obj1) console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":0}} obj1.a = 1 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":0}} console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":0}} obj2.a = 2 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":0}} console.log(JSON.stringify(obj2)) // {"a":2,"b":{"c":0}} obj1.b.c = 3 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":3}} console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":3}}
至于深淺拷貝的區別以及如何實現的問題,會在之后的文章中詳細說明。
常見用途 為對象添加屬性class Person { constructor(x, y) { Object.assign(this, {x, y}) } }為對象添加方法
Object.assign(someClass.prototype, { foo(x, y){ .... } })合并多個對象
Object.assign(target, ...sources)復制一個對象
const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1}為屬性指定默認值
const DEFAULT_VALUE = { name: "Joe", age: "27" } function foo(options) { return Object.assign({}, DEFAULT_VALUE, options) }瀏覽器兼容性 最后
感謝各位能夠耐心的讀完,如有錯誤歡迎指正,讓我們一起進步。后續的內容,敬請期待。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102912.html
showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用來解決在ES5中 兩種相等運算符的缺點。用來比較兩個值是否嚴格相等,行為和(===)基本一致。 在ES5中判斷兩個值是否相等,只能用(==)相等運算符和(===)嚴格相等運算符,但是這兩貨都有缺點,前者 兩邊的值都會轉換數據類型,...
showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用來解決在ES5中 兩種相等運算符的缺點。用來比較兩個值是否嚴格相等,行為和(===)基本一致。 在ES5中判斷兩個值是否相等,只能用(==)相等運算符和(===)嚴格相等運算符,但是這兩貨都有缺點,前者 兩邊的值都...
摘要:循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組,包含對象自身的所有屬性的鍵名。目前,只有對象方法的簡寫法可以讓引擎確認,定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量和函數,作為對象的屬性和方法,使得代碼的書寫更為簡潔。...
摘要:屬性的簡潔表示法在中允許直接寫入變量和函數,作為對象的屬性和方法,使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組,包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量...
閱讀 1904·2021-11-09 09:46
閱讀 2486·2019-08-30 15:52
閱讀 2445·2019-08-30 15:47
閱讀 1320·2019-08-29 17:11
閱讀 1746·2019-08-29 15:24
閱讀 3501·2019-08-29 14:02
閱讀 2442·2019-08-29 13:27
閱讀 1199·2019-08-29 12:32