27
Help us understand the problem. What are the problem?

posted at

updated at

ブラウザでディープコピーができるようになった

Chrome98 で structuredCloneが来ました。
すでに Firefox では導入済みで、 Safari もプレビュー版で導入されているので、近い将来にメジャーブラウザでディープコピーが簡単にできるようになりそうです。 Safari 15.4 で実装されました。

structuredClone API | Can I use... Support tables for HTML5, CSS3, etc

const original = {
	x: 0,
	arr: [1, 2],
}

// 共有渡し
const sharing = original
//「浅い」コピー
const shallowCopy = {...original}
// ディープコピー
const deepCopy = structuredClone(original)

original.x = "x"
original.arr[0] = "x"

console.log(original)
// {x:"x", arr:["x",2]}

console.log(sharing)
// {x:"x", arr:["x",2]}

console.log(shallowCopy)
// {x:0, arr:["x",2]}

console.log(deepCopy)
// {x:0, arr:[1,2]}

なお、コピーできるオブジェクト|リテラルは限定されていますので注意が必要です。
構造化複製で動作しないもの | 構造化複製アルゴリズム - Web API | MDN


とはいえ、しばらくは lodash を使いそう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
27
Help us understand the problem. What are the problem?