JavaScript

Symbol.iteratorでユーザクラスを反復可能にする

JavaScriptのユーザクラスをfor of構文でループ可能にする方法。Symbol.iteratorでiteratorプロトコルを実装したオブジェクトを返す関数をセットするか、ジェネレータ関数を実装すれば良い。楽なのは後者 class Hoge { *[Symbol.iterator]() { yield 1; yiel…

async/awaitで配列要素の非同期処理を書く

二年ぶりぐらいにNodeを書いているのだが、寝ている間にコールバック地獄はasync/awaitの導入によって終了していたらしい。ほほーう。 で、配列要素の非同期処理である。コールバック時代はnpmのasyncモジュールを使うのが一般的だったが、async/await時代の…

parseIntを小数点切り捨てに使わない

TwitterのTL上でにわかに話題になっていた。parseIntは引数をstringにしてからint変換するので、小数点以下の切り捨てには使わん方が良いというお話。 > parseInt(0.000001) 0 > parseInt(0.0000001) 1 これは以下のように処理されているのと同じ > (0.00000…

クロージャとbindの引数束縛パフォーマンス

JavaScriptで引数を束縛したい場合、クロージャかbindを使うのだが… function plus(x, y) { return x + y; } function multiply(x, y) { return x * y; } // Function.prototype.bindで束縛 const plus1 = plus.bind(null, 1); plus1(5); // => 6 // closure…

generatorとpromiseで行う非同期処理

2年ぐらい前にgeneratorでコールバック地獄から解放されるぜウェーイと話題になりましたが、今現在、世間ではgeneratorによる非同期処理ってどのくらい使われているんでしょうね? 自分たちのチームでは今更過去のコードを書き直すのも面倒なので使ってませ…

obj && obj.hoge && obj.hoge.fuga ... を少し簡単に書く

Qiitaにも投稿してみた JSerの皆様につきましては、JSON.parseしたデータなど、多段ネストしたオブジェクトのプロパティにアクセスするとき、 const obj = {hoge: {fuga: {piyo: 1}}}; const value = obj && obj.hoge && obj.hoge.fuga && obj.hoge.fuga.piy…

関数の可変長な仮引数を直接コンストラクタに渡す

ある関数が受け取る可変長引数を、コンストラクタに直接渡す方法 要するにコンストラクタが可変長引数を受け取るのでファクトリ関数も可変長引数を使えるようにしたいんですよ。 ES2015ならばこう。 'use strict'; class Hoge { constructor(...args) { cons…

ES2015以前の可変長引数の書き方

LTSのnode 4系ではRest Parametersは使えんのですよね。 'use strict'; function x(a, var_args) { const args = Array.prototype.slice.call(arguments, 1); console.log(a); console.log(args); } x('a'); x('b', 1); x('c', 1, 2); x('d', 1, 2, 3); 可変…

left-padの文字列連結はクソではない

例のleftpad, GCを虐めるためとかコンパイラの最適化を確認するために用意する、「無駄に一時オブジェクト量産するクソコードの典型例」みたいな実装なので、こんな小さい関数のために、信頼できない人のコードを、実装を見るでも無く、依存性追加してたって…

snake_caseなプロパティにcamelCaseでアクセス

とあるAPIのレスポンスJSONのキーがsnake_caseだが、JavaScript的にはcamelCaseでプロパティアクセスしたいんだよなー、みたいな話を某所で見かけた。 ES2015 Proxyを使って解決してみる。 function toSnakeCase(name) { name = name.replace(/([A-Z]+)([A-Z…

do式

do式が実装された - JS.next へえ〜 ES7のfeatureなので、正式に標準化されるのは2017年以降になると思われますが、babelでは--stage=0ですでに動くようです。 // hoge.js let x = 3 let y = do { let a = 1; var b = 2; a + b + x; } // console.log(a); //…

toCamelCase / to_snake_case

JavaScriptでcamelCaseとsnake_caseの変換 function toCamelCase(name) { return name.replace(/_(.)/g, function(_, $1) { return $1.toUpperCase(); }) // 先頭も大文字にするならこっち // return name.replace(/(?:^|_)(.)/g, function($$, $1) { return…

デフォルト引数でフィボナッチ in JavaScript

Rubyのメソッド引数は奥が深い(その2)または別のフィボナッチ ES6にはデフォルト引数があるのでJavaScriptでも書けそう。 Firefoxでは動いた。 function fib(n, m = (n === 0 || n === 1 ? n : fib(n-2) + fib(n-1))){ return m } undefined fib(1) 1 fib(2…

Linked listをJavaScriptで実装

JavaScriptで双方向連結リストを書いてみる。 function List() { this._length = arguments.length; for (var i = 0; i < arguments.length; i++) { this.addLast(arguments[i]); } } Object.defineProperties(List.prototype, { length: { get: function() …

argumentsオブジェクトと仮引数の謎挙動

JavaScriptのargumentsはなかなか不思議なオブジェクトで、配列のようで配列でなかったり、関数スコープで暗黙に作られていたり、きわめつけは… function hoge(a, b) { console.log(a); arguments[0] = 5; console.log(a); } hoge(1, 2); 1 5 !? function …

見てるページのドメインでgoogle site検索するブックマークレット

はてなブログに移行して「ブログ検索がない、使えない、まブログ毎にドメイン違うからGoogleでsite検索ですればいいか」と思ってブックマークレットを作成した。 javascript:(function(w){if(w)location.href='https://www.google.co.jp/search?q='+encodeUR…

Object.values

Object.keysがあるのにObject.valuesがないので ObjectUtils.values = function(obj){ return Object.keys(obj).map(function(key){ return obj[key]; }); }; ついでにkey valueをイテレーション ObjectUtils.forEach = function(obj, callback) { var keys …

createObjectURLとは何か?

createObjectURL、省メモリだとかaudioの再生がスムーズだとか言われてるけど、これが何物なのか日本語の詳しい説明が見当たらないので、自分の理解を書いておく。File APIの仕様書を軽く流し読みして得た理解なので正確さは保証しない。ま、大筋は間違っち…

Object.keys

javascript の オブジェクトが空かどうかを調べる場合 - Node.js日誌βObject.keysはオブジェクトのプロパティ名を配列で返すメソッド。for inの列挙と違って hasOwnProperty が true になるものだけが返る(だからオブジェクトが空かどうか調べられる)ので…

ES 5thなクラスを生成3

前回はFunctionオブジェクトの拡張を試してみたのだけど、ネイティブオブジェクトに独自メソッドぶら下げるの気持ち悪いという意見もあるので、クラスを作るオブジェクトを作成してみる。 var Class = (function(){ var mixin = function(trait) { Object.de…

getterとsetter / Object.create(null)

GetterとSetter ES 5thからsetterとgetterの定義が仕様に入ったわけですが… var Hoge = Object.create({}, { // プロパティ val: { set: function(a){ this._a = a }, get: function(){ return this._a } }, // メソッド add: { value: function(a){ this._a…

ECMAScript 5thなオブジェクト生成の話2

昨日書いた new を使わないインスタンス生成は、実際に使ってみると、たかだかオブジェクトの生成ごときで Object.create(Hoge.prototype).init(); とか長いし、init呼ぶの忘れそうだし、init メソッド定義しないといけないし、return this 忘れるとハマるし…

ECMAScript 5th時代のクラス定義とインスタンス生成

オブジェクトの生成にnew演算子を使わないのが今どきらしい。じゃあ、どうすりゃいいのよ?こんなんで良さげ。 var Hoge = Object.create({}, { // プロパティ val: { set: function(a){ this._a = a }, get: function(){ return this._a }}, // メソッド ad…

ビット演算で小数点切り捨て

ライセンスで話題のモバゲーDeNAのJavaScriptライブラリですけど、プログラマならライセンスよりソース読んでみようぜ。え、おまえもTwitterでライセンスpgrしてただろうって?なんの事すか?コードはかなり奇麗に書かれているので、読みやすいですよ。arcti…

jQuery.ajaxのdeferred

jQuery.ajaxのdeferred版、コールバック設定用のメソッド名が変わるそうで… Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal…

マージソート

次はマージソート。マージソートは要素を半分ずつ分け、半分にしたものをさらに分ける、これを全部ばらばらになるまで繰り返して、結合する。結合する時に互いの先頭を比較して小さいのから取り出していくことでソートするというアルゴリズム。例によって、…

クイックソート

最近、Erlang始めたので、手始めに何か適当なアルゴリズムのコードでも書いてみようかと。まずはソートアルゴリズムの王様クイックソート。小さいのを左に集めて、大きいのを右に集めて、集めたグループ毎にそれぞれ同じよう左右に分けて…これを繰り返してい…

Array.prototype.map

chromeでnative版とjQuery版のベンチを取ってみたら倍ぐらい違ったのでjQueryを使わないで実装。native版とほぼ変わらない実行速度になりました。 if( typeof Array.prototype.map === 'undefined') Array.prototype.map = function($callback){ var len = t…

jQueryのコードフォーマット

関数を引数に取るメソッドをチェインさせると、ダラっダラの長い記述になるんですけど、どの辺で改行するのがベストでしょうか…? $("#hoge").click(function(){ }).mouseover(function() { }).mouseout(function() { }); とか $("#hoge") .click(function()…

HTML5のJavaScriptでバイナリファイルを扱う(その2)

コードの解説。jQueryのイベントオブジェクトからファイルデータにアクセスするためのおまじない。 jQuery.event.props.push('dataTransfer'); PCからファイルがドロップされたときの処理 $("#file").bind("drop", function(event){ // ドロップされたファイ…