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.assignAtribut 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!