Object.assign 活用

Object のマージ

const ab = { a: 1, b: 2 }
const cd = { c: 3, d: 4 }
Object.assign(ab, cd) // {a:1,b:2,c:3,d:4}
ab // {a:1,b:2,c:3,d:4}
  • 第一引数にあたえた変数に、後続の引数の内容がマージされるミュータブルな処理
    • 変更を避けるには空のオブジェクトを与えてやるといい Object.assign({},ab,cd)

💬 スプレッド構文 {...ab,...cd} のほうが直感的なので普段この用途ではあまり使わないけど、マージしたいオブジェクトがたくさん入った配列などある場合は一括指定しやすいかもしれない
Object.assign({},...objArray) とかで

クラスのメンバを一括設定

const obj = { a: 1, b: 2, c: 3, d: 4 }
class Test {
  a = 0
  b = 0
  c = 0
  d = 0
  constructor(obj: { [k: string]: number }) {
    Object.assign(this, obj)
  }
}
console.log(new Test(obj)) //Test {a: 1, b: 2, c: 3, d: 4}

💬 かなり楽

DOM 生成

const $div1 = Object.assign(document.createElement('div'), {
  className: 'class-name1 class-name2',
  innerHTML: `テキストが入ります。`,
})

// こうすればinnerHTMLの内容で要素が生成できる
// 生成した要素内のひとつめを取り出して型アサーションで型指定
const $div2 = Object.assign(document.createElement('div'), {
  innerHTML: `<div class="class-name1 class-name2">テキストが入ります。</div>`,
}).firstChild as HTMLElement

console.log($div1, $div2)
//<div class="class-name1 class-name2">テキストが入ります。</div>
//<div class="class-name1 class-name2">テキストが入ります。</div>
  • React の記法と同じように class 名の指定はclassNameな点に注意。

💬 最近知ってうれしかったもの よく使ってる
(記述量は若干多いものの) PureJS だけで jQuery 感覚で新要素生成できるのがよい 要素作ってプロパティを逐一指定すればいいのだが、式の方が使い勝手良くて好き