Object.assign()用法講解

// 將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

? ? ? const target = {a: 1, b: 2}

? ? ? const source = {b: 4, c: 5}

? ? ? const returnedTarget = Object.assign(target, source)

? ? ? // output: Object { a: 1, b: 4, c: 5 }

? ? ? console.log(target)

? ? ? // output: Object { a: 1, b: 4, c: 5 }

? ? ? console.log(returnedTarget)

? ? ? // 淺拷貝復(fù)制對(duì)象 Object.assign()拷貝的是屬性值。假如源對(duì)象的屬性值是一個(gè)對(duì)象的引用,那么它也只指向那個(gè)引用

? ? ? const obj = {a: 1}

? ? ? const copy = Object.assign({}, obj)

? ? ? // { a: 1 }

? ? ? console.log(copy)

? ? ? // 合并對(duì)象

? ? ? const o1 = {a: 1}

? ? ? const o2 = {b: 2}

? ? ? const o3 = {c: 3}

? ? ? const obj1 = Object.assign(o1, o2, o3)

? ? ? console.log(obj1) // { a: 1, b: 2, c: 3 }

? ? ? console.log(o1)? // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。

? ? ? // 合并具有相同屬性的對(duì)象

? ? ? const o11 = {a: 1, b: 1, c: 1}

? ? ? const o22 = {b: 2, c: 2}

? ? ? const o33 = {c: 3}

? ? ? const obj2 = Object.assign({}, o11, o22, o33)

? ? ? console.log(obj2) // { a: 1, b: 2, c: 3 }

? ? ? // 創(chuàng)建一個(gè)新對(duì)象

? ? ? const person = {

? ? ? ? isHuman: false,

? ? ? ? printIntroduction: function () {

? ? ? ? ? console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`)

? ? ? ? }

? ? ? }

? ? ? const me = Object.create(person)

? ? ? me.name = 'Matthew' // "name" is a property set on "me", but not on "person"

? ? ? me.isHuman = true // inherited properties can be overwritten

? ? ? me.printIntroduction()

? ? ? // entries返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組

? ? ? const obj = {

? ? ? ? a: 'somestring',

? ? ? ? b: 42

? ? ? }

? ? ? for (let [key, value] of Object.entries(obj)) {

? ? ? ? console.log(`${key}: ${value}`)

? ? ? }

? ? ? console.log(obj)

? ? ? // 可以將 Map 轉(zhuǎn)化為 Object

? ? ? const map = new Map([['foo', 'bar'], ['baz', 42]])

? ? ? const obj = Object.fromEntries(map)

? ? ? // { foo: "bar", baz: 42 }

? ? ? console.log(obj)

? ? ? // 可以將 Array 轉(zhuǎn)化為 Object

? ? ? const arr = [['0', 'a'], ['1', 'b'], ['2', 'c']]

? ? ? const obj2 = Object.fromEntries(arr)

? ? ? // { 0: "a", 1: "b", 2: "c" }

? ? ? console.log(obj2)

? ? ? const obj = {

? ? ? ? prop: 42

? ? ? }

? ? ? // 被凍結(jié)的對(duì)象再也不能被修改 不能向這個(gè)對(duì)象添加新的屬性,不能刪除已有屬性,

? ? ? // 不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫(xiě)性,以及不能修改已有屬性的值。

? ? ? // 此外,凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改 freeze() 返回和傳入的參數(shù)相同的對(duì)象

? ? ? Object.freeze(obj)

? ? ? obj.prop = 33

? ? ? console.log(obj.prop)

? ? ? // 判斷兩個(gè)值是否是相同的值

? ? ? let l = Object.is('foo', 'foo')

? ? ? console.log(l)

? ? ? // simple array

? ? ? var arr = ['a', 'b', 'c']

? ? ? console.log(Object.keys(arr)) // console: ['0', '1', '2']

? ? ? // array like object

? ? ? var obj = {0: 'a', 1: 'b', 2: 'c'}

? ? ? console.log(Object.keys(obj)) // console: ['0', '1', '2']

? ? ? // array like object with random key ordering

? ? ? var anObj = {100: 'a', 2: 'b', 7: 'c'}

? ? ? console.log(Object.keys(anObj)) // console: ['2', '7', '100']

? ? ? var obj = {foo: 'bar', baz: 42}

? ? ? console.log(Object.values(obj)) // ['bar', 42]

? ? ? // array like object

? ? ? var obj = {0: 'a', 1: 'b', 2: 'c'}

? ? ? console.log(Object.values(obj)) // ['a', 'b', 'c']

? ? ? // array like object with random key ordering

? ? ? // when we use numeric keys, the value returned in a numerical order according to the keys

? ? ? var an_obj = {100: 'a', 2: 'b', 7: 'c'}

? ? ? console.log(Object.values(an_obj)) // ['b', 'c', 'a']

? ? ? // valueOf() 方法返回指定對(duì)象的原始值

? ? ? // Array:返回?cái)?shù)組對(duì)象本身

? ? ? let array = ['ABC', true, 12, -5]

? ? ? // true

? ? ? console.log(array.valueOf() === array)

? ? ? // Date:當(dāng)前時(shí)間距1970年1月1日午夜的毫秒數(shù)

? ? ? let date = new Date(2013, 7, 18, 23, 11, 59, 230)

? ? ? // 1376838719230

? ? ? console.log(date.valueOf())

? ? ? // Number:返回?cái)?shù)字值

? ? ? let num = 15.26540

? ? ? // 15.2654

? ? ? console.log(num.valueOf())

? ? ? // 布爾:返回布爾值true或false

? ? ? let bool = true

? ? ? // true

? ? ? console.log(bool.valueOf() === bool)

? ? ? // new一個(gè)Boolean對(duì)象

? ? ? let newBool = new Boolean(true)

? ? ? // valueOf()返回的是true,兩者的值相等

? ? ? // true

? ? ? console.log(newBool.valueOf() == newBool)

? ? ? // 但是不全等,兩者類型不相等,前者是boolean類型,后者是object類型

? ? ? // false

? ? ? console.log(newBool.valueOf() === newBool)

? ? ? /**

? ? ? * apply() 方法調(diào)用一個(gè)具有給定this值的函數(shù),以及作為一個(gè)數(shù)組(或類似數(shù)組對(duì)象)提供的參數(shù)。

? ? ? * call()方法的作用和 apply() 方法類似,區(qū)別就是call()方法接受的是參數(shù)列表,而apply()方法接受的是一個(gè)參數(shù)數(shù)組

? ? ? **/

? ? ? var numbers = [5, 6, 2, 3, 7]

? ? ? var max = Math.max.apply(null, numbers)

? ? ? console.log(max)

? ? ? var min = Math.min.apply(null, numbers)

? ? ? console.log(min)

? ? ? // 用 apply 將數(shù)組添加到另一個(gè)數(shù)組

? ? ? var array = ['a', 'b']

? ? ? var elements = [0, 1, 2]

? ? ? array.push.apply(array, elements)

? ? ? console.info(array) // ["a", "b", 0, 1, 2]

? ? ? /**

? ? ? * 使用 call 方法調(diào)用父構(gòu)造函數(shù)

? ? ? * */

? ? ? function Product(name, price) {

? ? ? ? this.name = name

? ? ? ? this.price = price

? ? ? }

? ? ? function Food(name, price) {

? ? ? ? Product.call(this, name, price)

? ? ? ? this.category = 'food'

? ? ? }

? ? ? function Toy(name, price) {

? ? ? ? Product.call(this, name, price)

? ? ? ? this.category = 'toy'

? ? ? }

? ? ? var cheese = new Food('feta', 5)

? ? ? var fun = new Toy('robot', 40)

? ? ? console.log(cheese)

? ? ? console.log(fun)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容