Objectへの分割代入

Objectへの分割代入を使うと、一部の引数を省略できる関数が書きやすくなる。

分割代入というのは、下のようにいっぺんに必要なプロパティだけを変数に入れるための構文。

var { offsetWidth: x, offsetHeight: y } = document.body;
console.log("bodyのoffsetWidthは%dpx、offsetHeightは%dpxです", x, y);

さらに、プロパティ名と中身の名前が同じ場合、省略して

var { offsetWidth, offsetHeight } = document.body;
console.log("bodyのoffsetWidthは%dpx、offsetHeightは%dpxです", offsetWidth, offsetHeight);

と書くこともできる。

下のエレメントを作るための関数は、name以外が全部省略できるし、引数の順番も気にする必要がない。

function $n({name, attrs, text, styles, childs}) {
  var elem = document.createElement(name);
  if (typeof attrs === "object") {
    for (var prop in attrs) {
      if (attrs.hasOwnProperty(prop)) {
        elem.setAttribute(prop, attrs[prop]);
      }
    }
  }
  if (typeof text === "string") {
    elem.textContent = text;
  }
  if (typeof styles === "object") {
    for (var prop in styles) {
      if (styles.hasOwnProperty(prop)) {
        elem.style[prop] = styles[prop];
      }
    }
  } else if (typeof styles === "string") {
    elem.setAttribute("style", styles);
  }
  if (typeof childs === "object") {
    if (childs instanceof Array) {
      Array.forEach(childs,
      function(i) {
        if (i instanceof HTMLElement) {
          elem.appendChild(i);
        } else {
          elem.appendChild($n(i));
        }
      });
    }
  }
  return elem;
}
var elem = $n({
  name: "div",
  styles: {
    color: "white",
    backgroundColor: "black"
  },
  attrs: {
    id: "testDiv"
  },
  text: "It's a test.",
  childs: [
    document.links[0].cloneNode(true),
    {
      name: "span",
      text: "child element."
    }]
});
document.body.appendChild(elem);