どのようにjavascriptを使って深さをコピーしますか?
3335 ワード
二種類のアレイコピータイプがあります。浅いコピーと深いコピーです。浅いコピーは行列の一番目の層だけコピーできます。残りは参照します。ネストされた配列のコピーが必要なら、この配列を深くコピーする必要があります。深くコピーして、JSON方法かLodshライブラリを選択してください。
なぜ二つのタイプのコピーがあるのかを明らかにするために、基礎知識を深く調べて、引用の種類を説明します。
元のタイプ(number、string)とは異なり、配列は参照タイプです。これは配列を変数に割り当てるとき、配列のメモリアドレスを配列自体ではなく変数に割り当てることを意味します。
コピー値の種類
ここはたいしたことはないです。私たちはvalueのコピーを作ります。私たちがvalueCopyの値を変えると、元のvalueの値には影響しません。同じように、元の値を変えると、コピーした値にも影響しません。とてもいいです👍
はい、ここはちょっとおかしいです。私たちは同じ方法で配列をコピーします。
引用タイプをコピーする方法
解決方法は、ポインタではなくコピー値です。
拡張記号を使うときは、配列をコピーします。浅いコピーです。配列がネストされていたり、多次元されていたりすると効果がありません。
const numbers = [1, [2], [3, [4]], 5];
// Using JavaScript
JSON.parse(JSON.stringify(numbers));
// Using Lodash
_.cloneDeep(objects);
配列は参照の種類です。なぜ二つのタイプのコピーがあるのかを明らかにするために、基礎知識を深く調べて、引用の種類を説明します。
元のタイプ(number、string)とは異なり、配列は参照タイプです。これは配列を変数に割り当てるとき、配列のメモリアドレスを配列自体ではなく変数に割り当てることを意味します。
コピー値の種類
ここはたいしたことはないです。私たちはvalueのコピーを作ります。私たちがvalueCopyの値を変えると、元のvalueの値には影響しません。同じように、元の値を変えると、コピーした値にも影響しません。とてもいいです👍
let value = 3;
let valueCopy = value; // create copy
console.log(valueCopy); // 3
// Change valueCopy
valueCopy = 100
console.log(valueCopy); // 100
// ✅ Original NOT affected
console.log(value); // 3
コピー参照の種類はい、ここはちょっとおかしいです。私たちは同じ方法で配列をコピーします。
let array = [1,2,3];
let arrayCopy = array; // create copy
console.log(arrayCopy); // [1,2,3];
// Change 1st element of the array
arrayCopy[0] = '👻';
console.log(arrayCopy); // [ '👻', 2, 3 ]
// ❌Original got affected
console.log(array); // [ '👻', 2, 3 ]
なぜ元の配列も影響を受けたのですか?はい、コピーしたのはあなたがコピーしたのではないからです。人の話を言って、あなたがコピーしたのは配列のメモリ空間の指針だけです。参照タイプには値が含まれていません。メモリの値を指すポインタです。引用タイプをコピーする方法
解決方法は、ポインタではなくコピー値です。
let array = [1,2,3];
let arrayCopy = [...array]; // create TRUE copy
console.log(arrayCopy); // [1,2,3];
// Change 1st element of the array
arrayCopy[0] = '👻';
console.log(arrayCopy); // [ '👻', 2, 3 ]
// ✅ Original NOT affected
console.log(array); // [ 1, 2, 3 ]
浅い&深いコピー拡張記号を使うときは、配列をコピーします。浅いコピーです。配列がネストされていたり、多次元されていたりすると効果がありません。
let nestedArray = [1, [2], 3];
let arrayCopy = [...nestedArray];
// Make some changes
arrayCopy[0] = '👻'; // change shallow element
arrayCopy[1][0] = '💩'; // change nested element
console.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]
// ❌ Nested array got affected
console.log(nestedArray); // [ 1, [ '💩' ], 3 ]
上述のように、浅いコピーの最初の層配列はよく表現されていますが、入れ子配列要素が変更され、元の配列も影響されます。💩。この問題を解決するためには、深くコピーする必要があります。
let nestedArray = [1, [2], 3];
let arrayCopy = JSON.parse(JSON.stringify(nestedArray));
// Make some changes
arrayCopy[0] = '👻'; // change shallow element
arrayCopy[1][0] = '💩'; // change nested element
console.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]
// ✅ Nested array NOT affected
console.log(nestedArray); // 1, [ 2 ], 3 ]
それで、これで終わりですか?手書きで引用タイプを深くコピーする方法はありますか?
const deepClone = obj => {
const isObject = args => (typeof args === 'object' || typeof args === 'function') && typeof args !== null
if (!isObject) throw new Error('Not Reference Types')
let newObj = Array.isArray(obj) ? [...obj] : { ...obj }
Reflect.ownKeys(newObj).map(key => {
newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
})
return newObj
}
実例コードを通して紹介された非常に詳細で、皆さんの学習や仕事に対して一定の参考学習価値を持っています。