assign は es6 メソッドですか?

assign は es6 メソッドです。 assign() は、es6 Object オブジェクトの新しいメソッドです。「Object.assign()」メソッドは、オブジェクトをマージするために使用されます。ソース オブジェクトのすべての列挙可能なプロパティをターゲット オブジェクトにコピーできます。このメソッドの最初のメソッドは、パラメータはターゲット オブジェクトであり、後続のパラメータはすべてソース オブジェクトです。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

assign は es6 メソッドです。

Object.assign() は es6 の新しいメソッドで、オブジェクトをマージし、ソース オブジェクト (ソース) のすべての列挙可能なプロパティをターゲット上のターゲットにコピーするために使用されます。

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メソッドの最初のパラメータはターゲット オブジェクトで、後続のパラメータはすべてソース オブジェクトです。

注: ターゲット オブジェクトとソース オブジェクトに同じ名前の属性がある場合、または複数のソース オブジェクトに同じ名前の属性がある場合、後の属性で前の属性が上書きされます。

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}

パラメータが 1 つだけの場合、Object.assign はパラメータを直接返します。

const obj = {a: 1}

Object.assign(obj) // {a: 1}
Object.assign(obj) === obj // true

パラメータがオブジェクトでない場合は、まずオブジェクトに変換されてから返されます。

typeof Object.assign(2) // "object"

unknown と null はオブジェクトに変換できないため、パラメータとして使用するとエラーが報告されます。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

非オブジェクト パラメータがソース オブジェクトの位置にある (つまり、最初のパラメータではない) 場合、処理規則は異なります。まずこれらのパラメータはオブジェクト化されますが、オブジェクト化できない場合はスキップされます。これは、最初のパラメータに未定義と 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)
obj // { "0": "a", "1": "b", "2": "c" }

上記のコードでは、v1、v2、v3 がそれぞれ文字列、ブール値、数値となっているため、結果として文字列のみが対象オブジェクト（文字の形）に結合されます。配列）、数値およびブール値は無視されます。これは、文字列ラッパー オブジェクトのみが列挙可能なプロパティを生成するためです。

Object.assign(true) // {[[PrimitiveValue]]: true}
Object.assign(10)  //  {[[PrimitiveValue]]: 10}
Object.assign('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上記のコードでは、ブール値、数値、文字列がそれぞれ対応するパッケージング オブジェクトに変換されており、元の値がパッケージング オブジェクトの内部プロパティにあることがわかります[ [PrimitiveValue]]上記のように、この属性は Object.assign によってコピーされません。文字列ラッパー オブジェクトのみが列挙可能なリテラル プロパティを生成し、それらのプロパティはコピーされます。

Object.assignコピーされる属性は制限されています。ソース オブジェクト自身の属性のみがコピーされ (継承された属性はコピーされません)、列挙不可能な属性はコピーされません (列挙可能: false)。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

上記のコードでは、Object.assignコピーされるオブジェクトには列挙不可能なプロパティ invisible が 1 つだけあり、このプロパティはコピーされていません。

Symbol という名前の属性の値も、Object.assign によってコピーされます。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

Notes

(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() { return 1 }
}
const target = {}

Object.assign(target, source)
// { foo: 1 }

上記のコードでは、

source オブジェクトの foo 属性は値関数であり、Object.assign はこの値をコピーしませんfunction では、値を取得した後にのみコピーされます。

Object.assign の使用法

Object.assign メソッドには多くの用途があります。

（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前端】

以上がassign は es6 メソッドですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。