#コンソールとは
ブラウザの機能のうち、デバッグ回りでよく使われる機能で、F12キーで起動できる機能のことですね。
Chromeも大分前から(機能名横には Ctrl+Shift+I って書いてあるけれど)使える機能です。
##今回やりたいこと
コーディング中に動作を確認したり、クライアントサイドでのデータを表示したりしたい場合に「ワンライナー」でどうするかといった様な話。
最近(Edge以降)の機能は使わないので、多分、最近のIE11環境なら動くとは思います。
##ワンライナーに使える函数一覧
###$$(selector)
何故こっちの函数を上げるかというと、Firefoxだと $(selector)がdocument.querySelector(selector)の短縮なのに対して、IEだとdocument.getElementById(id)の短縮なのでブラウザの互換が無い為です。
###Array.prototype.forEach(function)
配列の場合に使える内部イテレータ函数です。一応IE9の標準モードがES5対応してるので使える便利函数です。NodeListの時は以下の様に、callを用いて使います。
[].forEach.call($$(selector),function(element){ console.dir(element);});
###Array.prototype.map(function)
配列を詰め直しするときに使います。使い方はreturnに詰め直したい値を入れるだけです。
["id1","id2","id3"].map(function(id){ return document.getElementById(id); });
###Array.prototype.filter(function)
配列を絞り込みするときに使います。
[].filter.call($$(selector),function(element){ return element.textContent.indexOf("hoge") != -1; });
###Array.prototype.reduce(function,initValue)
配列を纏めるときに使います。
reduceTest.js の様にelement を指定の属性リストを元にオブジェクト化するときによく使います。
[].map.call($$(selector),function(element){ return ["attrName1","attrName2"].reduce(function(obj,name){ return obj[name] = element.getAttribute(name),obj; },{}); });
思いついたらまた書き足す。