Rumah > Artikel > hujung hadapan web > Adakah menetapkan kaedah es6?
tugaskan ialah kaedah es6. assign() ialah kaedah baharu objek es6 Object Kaedah "Object.assign()" digunakan untuk menggabungkan objek parameter ialah objek sasaran, dan parameter seterusnya adalah semua objek sumber.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
tugaskan ialah kaedah es6.
Object.assign() ialah kaedah baharu dalam es6, yang digunakan untuk menggabungkan objek dan menyalin semua sifat terhitung objek sumber (sumber) ke sasaran pada sasaran. Parameter pertama kaedah
const target = { a: 1, b: 2 } const source = { b: 4, c: 5 } const returnedTarget = Object.assign(target, source) target // { a: 1, b: 4, c: 5 } returnedTarget // { a: 1, b: 4, c: 5 }
Object.assign
ialah objek sasaran, dan parameter seterusnya ialah objek sumber.
Nota: Jika objek sasaran dan objek sumber mempunyai atribut dengan nama yang sama, atau objek berbilang sumber mempunyai atribut dengan nama yang sama, atribut kemudian akan menimpa atribut sebelumnya.
const target = { a: 1, b: 1 } const source1 = { b: 2, c: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) target // {a:1, b:2, c:3}
Jika terdapat hanya satu parameter, Object.assign
akan mengembalikan parameter secara langsung.
const obj = {a: 1} Object.assign(obj) // {a: 1} Object.assign(obj) === obj // true
Jika parameter bukan objek, ia akan ditukar menjadi objek dahulu dan kemudian dikembalikan.
typeof Object.assign(2) // "object"
Memandangkan undefined dan null tidak boleh ditukar menjadi objek, jika ia digunakan sebagai parameter, ralat akan dilaporkan.
Object.assign(undefined) // 报错 Object.assign(null) // 报错
Jika parameter bukan objek muncul pada kedudukan objek sumber (iaitu, ia bukan parameter pertama), maka peraturan pemprosesan adalah berbeza. Pertama, parameter ini akan ditukar menjadi objek Jika ia tidak boleh ditukar menjadi objek, ia akan dilangkau. Ini bermakna jika undefined dan null tiada dalam parameter pertama, tiada ralat akan dilaporkan.
let obj = {a: 1} Object.assign(obj, undefined) === obj // true Object.assign(obj, null) === obj // true
Jenis nilai lain (iaitu nilai angka, rentetan dan nilai Boolean) tidak disertakan dalam parameter pertama dan tiada ralat akan dilaporkan. Walau bagaimanapun, kecuali rentetan akan disalin ke dalam objek sasaran dalam bentuk tatasusunan, nilai lain tidak akan memberi kesan.
const v1 = 'abc' const v2 = true const v3 = 10 const obj = Object.assign({}, v1, v2, v3) obj // { "0": "a", "1": "b", "2": "c" }
Dalam kod di atas, v1, v2, dan v3 ialah rentetan, nilai Boolean dan nilai angka masing-masing Akibatnya, hanya rentetan yang digabungkan ke dalam objek sasaran (dalam bentuk tatasusunan aksara), dan nilai angka dan nilai Boolean akan diabaikan. Ini kerana hanya objek pembalut rentetan menghasilkan sifat terhitung.
Object.assign(true) // {[[PrimitiveValue]]: true} Object.assign(10) // {[[PrimitiveValue]]: 10} Object.assign('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
Dalam kod di atas, nilai Boolean, nilai berangka dan rentetan masing-masing ditukar kepada objek pembungkusan yang sepadan Anda boleh melihat bahawa nilai asalnya berada di atas sifat dalaman objek pembungkusan [[PrimitiveValue]]
Harta ini adalah Ia tidak akan disalin oleh Object.assign
. Hanya objek pembalut rentetan akan menghasilkan sifat literal yang terhitung, dan sifat tersebut akan disalin.
Object.assign
Atribut yang disalin adalah terhad Hanya atribut objek sumber sendiri yang disalin (atribut yang diwarisi tidak disalin), dan atribut yang tidak boleh dikira (enumerable: false
) tidak disalin.
Object.assign({b: 'c'}, Object.defineProperty({}, 'invisible', { enumerable: false, value: 'hello' }) ) // { b: 'c' }
Dalam kod di atas, Object.assign
objek yang hendak disalin hanya mempunyai satu atribut tidak boleh dikira invisible
dan atribut ini tidak disalin.
Atribut dengan nama atribut nilai Symbol
juga akan disalin oleh Object.assign
.
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }) // { a: 'b', Symbol(c): 'd' }
Nota
(1) Salinan cetek
Object.assign
kaedah A salinan cetek dilakukan, bukan salinan dalam. Maksudnya, jika nilai atribut tertentu objek sumber adalah objek, maka salinan objek sasaran akan mendapat rujukan kepada objek ini.
const obj1 = {a: {b: 1}} const obj2 = Object.assign({}, obj1) obj1.a.b = 2 obj2.a.b // 2
Dalam kod di atas, nilai atribut obj1
bagi objek sumber a
ialah objek, dan apa yang disalin daripada Object.assign
ialah rujukan kepada objek ini. Sebarang perubahan pada objek ini akan dicerminkan pada objek sasaran.
(2) Penggantian atribut dengan nama yang sama
Untuk objek bersarang tersebut, sebaik sahaja atribut dengan nama yang sama ditemui, kaedah pemprosesan Object.assign
adalah untuk menggantikan, bukan Tambah ke.
const target = { a: { b: 'c', d: 'e' } } const source = { a: { b: 'hello' } } Object.assign(target, source) // { a: { b: 'hello' } }
Dalam kod di atas, atribut target
objek a
digantikan sepenuhnya dengan atribut source
objek a
, tanpa mendapat hasil { a: { b: 'hello', d: 'e' } }
. Ini biasanya bukan yang diingini oleh pembangun dan memerlukan penjagaan khas.
Sesetengah pustaka fungsi menyediakan versi tersuai Object.assign
(seperti kaedah Lodash
_.defaultsDeep
), yang boleh mencapai penggabungan salinan dalam.
(3) Pemprosesan tatasusunan Object.assign
boleh digunakan untuk memproses tatasusunan, tetapi tatasusunan akan dianggap sebagai objek.
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]
Dalam kod di atas, Object.assign
menganggap tatasusunan sebagai objek dengan nama atribut 0、1、2
, jadi atribut nombor 0
tatasusunan sumber 4
menimpa tatasusunan sasaran 0
nombor Atribut 1
.
(4) Pemprosesan fungsi nilai
Object.assign
hanya boleh menyalin nilai Jika nilai yang akan disalin adalah fungsi nilai, maka ia akan menjadi nilai dan kemudian salin.
const source = { get foo() { return 1 } } const target = {} Object.assign(target, source) // { foo: 1 }
Dalam kod di atas, atribut source
objek foo
ialah fungsi nilai Object.assign
Ia hanya akan menyalin nilai selepas mendapatkannya. lalu.
Penggunaan Object.assign Kaedah
Object.assign
mempunyai banyak kegunaan.
(1)为对象添加属性
class Point { 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) { return Object.assign({}, origin) }
上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。
function clone(origin) { let originProto = Object.getPrototypeOf(origin) return Object.assign(Object.create(originProto), origin) }
(4)合并多个对象
将多个对象合并到某个对象。
const merge = (target, ...sources) => Object.assign(target, ...sources)
如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。
const merge = (...sources) => Object.assign({}, ...sources)
(5)为属性指定默认值
const DEFAULTS = { logLevel: 0, outputFormat: 'html' } function processContent(options) { options = Object.assign({}, DEFAULTS, options) console.log(options) // ... }
上面代码中,DEFAULTS
对象是默认值,options
对象是用户提供的参数。Object.assign
方法将DEFAULTS
和options
合并成一个新对象,如果两者有同名属性,则option
的属性值会覆盖DEFAULTS
的属性值。
注意:由于存在浅拷贝的问题,DEFAULTS
对象和options
对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,DEFAULTS
对象的该属性很可能不起作用。
const DEFAULTS = { url: { host: 'example.com', port: 7070 }, } processContent({ url: {port: 8000} }) // { // url: {port: 8000} // }
上面代码的原意是将 url.port
改成 8000
,url.host
不变。实际结果却是options.url
覆盖掉DEFAULTS.url
,所以url.host
就不存在了。
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Adakah menetapkan kaedah es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!