jsのオブジェクトコピー方法~分割代入とスプレッド構文~

Copy
//値を設定
let str:string ="hogefuge"
str.substring(0,1)
console.log(str)

// 別の変数へ代入
let strUp = str.substring(4,8)
console.log(strUp)

// ログ
// hogefuge 
// fuge

Copy
// type宣言
type User = {
  id:Number,
  name:string
}

// オブジェクト作成
const userObj:User = {
  id:1,
  name:"tuji"
}

// オブジェクト変更
userObj.id = 2
userObj.name = "yamada"
console.log(userObj)

// 配列作成
let array:number[] = Array(1,2,3,4,5)

// 配列を編集
array.splice(0,1)
console.log(array)

// ログ
// {id: 2, name: "yamada"}
// (4) [2, 3, 4, 5]

Copy
// type宣言
type User = {
  id: Number;
  name: string;
};

// オブジェクト作成
const userObj: User = {
  id: 1,
  name: "tuji"
};

// 単純代入でコピー
const copyObj = userObj;

// コピー元オブジェクト変更
userObj.id = 2;
userObj.name = "yamada";

console.log(`コピー元オブジェクト：${JSON.stringify(userObj, null, 3)}`);
console.log(`コピー先オブジェクト：${JSON.stringify(copyObj, null, 3)}`);

// コピー元オブジェクト：{
//   "id": 2,
//   "name": "yamada"
// } 
// コピー先オブジェクト：{
//   "id": 2,
//   "name": "yamada"
// }

Copy
// オブジェクトを定義
const user = {
  id: 1,
  detail: {
    name: "hoge",
    age: 21
  }
};

// オブジェクトをシャローコピー
const copyUser = Object.assign({}, user);

// コピー元オブジェクトを変更
user.id = 99;
user.detail.name = "yamada";

console.log(`コピー元オブジェクト：${JSON.stringify(user, null, 3)}`);
console.log(`コピー先オブジェクト：${JSON.stringify(copyUser, null, 3)}`);

// コピー元オブジェクト：{
//    "id": 99,
//    "detail": {
//       "name": "yamada",
//       "age": 21
//    }
// } 
// コピー先オブジェクト：{
//    "id": 1,
//    "detail": {
//       "name": "yamada",
//       "age": 21
//    }
// }

Copy
// userタイプを定義
type User = { id: number; detail: { name: string; age: number } };

// オブジェクトを定義
const user: User = { id: 1, detail: { name: "hoge", age: 29 } };
// スプレッド構文でコピー（シャローコピー）
const copyUser = { ...user };

user.id = 9999;
// コピー元のnameを変更
user.detail.name = "xxxxxxxxxx";

console.log(`コピー元オブジェクト：${JSON.stringify(user, null, 3)}`);
console.log(`コピー先オブジェクト：${JSON.stringify(copyUser, null, 3)}`);

// コピー元オブジェクト：{
//   "id": 9999,
//   "detail": {
//      "name": "xxxxxxxxxx",
//      "age": 29
//   }
// } 
// コピー先オブジェクト：{
//   "id": 1,
//   "detail": {
//      "name": "xxxxxxxxxx",
//      "age": 29
//   }
// }

Copy
// オブジェクトを定義
const user = {
  id: 1,
  detail: {
    name: "hoge",
    age: 21
  }
};

// ネストしているdetailを分割代入する
const { detail } = user;

// 分割代入元オブジェクトを変更
user.detail.name = "yamada";

// ログ出力
console.log(`分割代入元オブジェクトのname：${user.detail.name}`);
console.log(`分割代入したname：${detail.name}`);

console.log(`オブジェクト：${JSON.stringify(user, null, 3)}`);
console.log(`分割代入変数：${JSON.stringify(detail, null, 3)}`);

// オブジェクト：{
//   "id": 1,
//   "detail": {
//      "name": "yamada",
//      "age": 21
//   }
// } 
// 分割代入変数：{
//   "name": "yamada",
//   "age": 21
// }

Copy
// オブジェクトを定義
const user = {
  id: 1,
  detail: {
    name: "hoge",
    age: 21
  }
};

// 1階層目と2階層目のname自体を分割代入
const {
  id,
  detail: { name }
} = user;

// 分割代入元オブジェクトを変更
user.id = 99;
user.detail.name = "yamada";

// ログ出力
console.log(`オブジェクト：${JSON.stringify(user, null, 3)}`);
console.log(`分割代入変数_id：${JSON.stringify(id, null, 3)}`);
console.log(`分割代入変数_name：${JSON.stringify(name, null, 3)}`);

// オブジェクト：{
//   "id": 99,
//   "detail": {
//      "name": "yamada",
//      "age": 21
//   }
// } 
// 分割代入変数_id：1 
// 分割代入変数_name："hoge"

Copy
type atrticle = { title: string; tags: string[]; cotent: string };

// オブジェクトリスト
const list: atrticle[] = Array.of(
  { title: "記事1", tags: ["java"], cotent: "aaaaaaaaaa" },
  { title: "記事2", tags: ["javascript"], cotent: "bbbbbbbbbbb" },
  { title: "記事3", tags: ["emotion"], cotent: "cccc" },
  { title: "記事4", tags: ["javascript"], cotent: "ddddddddddddd" },
  { title: "記事5", tags: ["css"], cotent: "eeeeeeeeeeeeeeeeeeeeeeeeee" },
  { title: "記事6", tags: ["gatsby"], cotent: "f" }
);

// オブジェクトリストからfilterで記事を抽出
const newArticleList = list.filter((article) =>
  article.tags.find((tag) => tag === "gatsby")
);
// 抽出元の記事を変更
list[5].title = "変更した";

// 元記事出力
list.forEach((at) => {
  console.log(`取得元記事のtitle：${JSON.stringify(at.title, null, 3)}`);
});

// filter記事出力
newArticleList.forEach((at) => {
  console.log(
    `filterで取得した記事のtitle：${JSON.stringify(at.title, null, 3)}`
  );
});

// 取得元記事のtitle："記事1" 
// 取得元記事のtitle："記事2" 
// 取得元記事のtitle："記事3" 
// 取得元記事のtitle："記事4" 
// 取得元記事のtitle："記事5" 
// 取得元記事のtitle："変更した" 
// filterで取得した記事のtitle："変更した"

Copy
// userタイプを定義
type User = {id:number, detail: {name:string, age:number}};

// オブジェクトを定義
const user:User = {id: 1, detail: {name: 'hoge', age: 29}};
// JSONメソッドでコピー（ディープコピー）
const copyUser = JSON.parse(JSON.stringify(user))
// コピー元のnameを変更
user.detail.name = 'xxxxxxxxxx'
// コピーを出力
console.log(copyUser);  

// ログ
// id: 1
// detail: {
//   name: "hoge"
//   age: 29
// }

Copy
import * as _ from "lodash";

// userタイプを定義
type User = {
  id: number;
  detail: { name: string; age?: number; func: (param: string) => string };
};

// 関数を定義
const func = (val: string) => `関数 : ${val}`;

// オブジェクトを定義
// ネストしたオブジェクトにundefinedと関数を設定する
const user: User = {
  id: 1,
  detail: { name: "hoge", age: undefined, func: func }
};
// lodashメソッドでコピー（ディープコピー）
const copyUser = _.cloneDeep(user);

// コピー元のnameを変更
user.detail.name = "xxxxxxxxxx";
// コピーを出力
console.log(copyUser);

// ログ
// id: 1
// detail: {
//   name: "hoge"
//   age: undefined
//   func: ƒ func() {}
// }

Copy
// userタイプを定義
type User = {
  id: number;
  detail: { name: string; age?: number };
};

// オブジェクトを定義
// ネストしたオブジェクトにundefinedと関数を設定する
const user: User = {
  id: 1,
  detail: { name: "hoge", age: undefined }
};

// structured-cloneメソッドでコピー（ディープコピー）
const user_copy = structuredClone(user);

// コピー元のnameを変更
user.id = 9999;
user.detail.name = "xxxxxxxxxx";

// コピー元を出力
console.log(`コピー元オブジェクト：${JSON.stringify(user, null, 3)}`);
// コピー先を出力
console.log(`コピー先オブジェクト：${JSON.stringify(user_copy, null, 3)}`);

// コピー元オブジェクト：{
//   "id": 9999,
//   "detail": {
//      "name": "xxxxxxxxxx"
//   }
// }
// コピー先オブジェクト：{
//   "id": 1,
//   "detail": {
//      "name": "hoge"
//   }
// }