ホームページ > 記事 > ウェブフロントエンド > es6 での assign の使用法は何ですか
es6 では、オブジェクトをマージするために assign が使用されます。ターゲット オブジェクトとソース オブジェクトに同じ名前のプロパティがある場合、または複数のソース オブジェクトがある場合、ソース オブジェクトのすべての列挙可能なプロパティをターゲット オブジェクトにコピーできます。同じ名前のプロパティがある場合、後の属性によって前の属性が上書きされ、構文は "Object.assign(...)"
になります。このチュートリアルの動作環境: Windows10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。
Object.assign メソッドはオブジェクトをマージするために使用され、ソース オブジェクト (ソース) のすべての列挙可能な属性 (キー:値) をターゲット オブジェクト (ターゲット)
例:
const target = { a : 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target,source1,source2) // 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); // target {a:1,b:2,c:3}
パラメータが 1 つしかない場合、Object.assign はパラメータを直接返します。パラメータがオブジェクトでない場合は、オブジェクトが最初に転送されてから返されます。 . 変換できないnullやunknownはオブジェクトなのでパラメータとして使用するとエラーが報告されます。非オブジェクト パラメータがソース オブジェクトの位置に出現する場合 (最初のパラメータではないことを意味します)、処理ルールは異なります。まず、これらのパラメータがオブジェクトに変換されます。null または unknown が表示されても、それが最初のパラメータでない限り、エラーは報告されません。
例:
const obj = {a:1}, Object.assign(obj) === obj // true typeof Object.assign(2) // object Object.assign(undefined) // 报错 Object.assign(null) // 报错 Object.assign(obj,undefined)
他のタイプの値 (数値、文字列、ブール値など) は最初のパラメータに含まれないため、エラーは報告されませんが、文字列は報告されます。配列の形式でターゲットにコピーされます。オブジェクト、その他の値は影響しません。
const v1 = 'abc'; const v2 = true; const v3 = 10; const objCurrent = Object.assign({},v1,v2,v3); // {0:'a',1:'b',2:'c'}; // 上面代码中,v1,v2,v3分别是字符串、布尔值、数值,结果只有字符串符合目标对象(以字符串数组的形式),数值与布尔值都会被忽略。这是因为只有字符串的包装对象,会产生枚举属性。 Object.assign()的深浅拷贝问题 const obj1 = {a: 1}; const obj2 = {b: 2}; const obj3 = {c: 3}; const obj = Object.assign(obj1,obj2,obj3); console.log(obj); // {a:1,b:2,c:3} console.log(obj1); // {a:1,b:2,c:3} 原始对象也被改变啦 const v1 ={a:1}, const currentObj = Object.assign(JSON.parse(JSON.stringify(v1)),{e:2}) console.log(currentObj) // {a:1,e:2} console.log(v1) // {a:1} 并没有发生变化
オブジェクトに第 1 レベルの属性のみがあり、第 2 レベルの属性がない場合、このメソッドはディープ コピーになります。ただし、オブジェクト内にオブジェクトがある場合、このメソッドは第 2 レベルの属性以降のシャロー コピーになります。レベル属性。
再帰を使用してディープ コピーを実装する
// _deep 深度拷贝的方法 function _deep(source){ let target; if (typeof source === 'object'){ // 判断目标值是数组还是对象 target = Array.isArray(source) ? []: {} for (let key in source) { // 指示对象自身属性中是否含有指定的属性 if(source.hasOwnProperty[key]){ // 如果属性不是对象则赋值,负责递归 if(typeof source[key] !== 'object'){ target[key] = source[key] }else { target[key] = _deep(source[key]) } } } } else { target = source } // 返回目标值 return target }
js を使用してディープ コピーを実装する
function _deepJs(_data){ return JSON.parse(JSON.stringify(_data)); }
[関連する推奨事項: JavaScript ビデオ チュートリアル 、webフロントエンド###】###
以上がes6 での assign の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。