この投稿では、JavaScript向けの有用なハックを12点お伝えします。
これらのハックはコードを減らし、あなたが最適なコードを実行する助けとなるでしょう。
1) ブーリーンを使用して変換する
私たちは時々、変数が存在するか、あるいは有効値を持つかをチェックする必要があります。この検証をするためには、二重の否定演算子である「!!」やシンプルな「!!」を使用できますが、いかなるデータであってもブーリーンのために自動的に次のように変換されます：これらの変数が「0」、「null」、「””」、「underfined」、「NaN」を持つ場合のみ「false」が返ってきます。これらを持たない場合は「true」が返されます。実際に理解するために、この単純な例を見てみましょう：
| function Account(cash) { | |
| this.cash = cash; | |
| this.hasMoney = !!cash; | |
| } | |
| var account = new Account(100.50); | |
| console.log(account.cash); // 100.50 | |
| console.log(account.hasMoney); // true | |
| var emptyAccount = new Account(0); | |
| console.log(emptyAccount.cash); // 0 | |
| console.log(emptyAccount.hasMoney); // false |
この場合、「account cash」の変数が「0」より大きければ、「account.hasMoney」は「true」となります。
2) 「+」オペレーターを使用して数字を変換する
この魔法は素晴らしいものです!実行するのは簡単ですが、「string number」を持つ場合のみ実行され、「string number」を持たない場合は「NaN(Not a Number)」が返ってきます。この例を見てみましょう：
| function toNumber(strNumber) { | |
| return +strNumber; | |
| } | |
| console.log(toNumber("1234")); // 1234 | |
| console.log(toNumber("ACB")); // NaN |
この魔法は日付の場合も同様に実行され、タイムスタンプ・ナンバーが返ってきます：
| console.log(+new Date()) // 1461288164385 |
3) 条件文を短縮する
似たようなコードがある場合:
| if (connected) { | |
| login(); | |
| } |
変数と「&&(「And」オペレーター)を組み合わせて使用すれば、短縮することができます。たとえば、コードを一行に短縮することができます。
| connected && login(); |
特質や機能が対象の中に存在するかを調べるために使用することもできます。以下が例です：
| user && user.login(); |
4) 「II(OR)」オペレーターを使用してデフォルトを評価する
現在、ES6にはデフォルト・アーギュメント機能が備わっています。
この機能を古いブラウザ内でシミュレーションするには、第二のパラメーターとしてデフォルト値を含むことによって、「II(ORオペレーター)」を使用できます。最初のパラメーターが「false」を返すならば、第二のパラメーターはデフォルト値として使用されます。この例を見てみましょう：
| function User(name, age) { | |
| this.name = name || "Oliver Queen"; | |
| this.age = age || 27; | |
| } | |
| var user1 = new User(); | |
| console.log(user1.name); // Oliver Queen | |
| console.log(user1.age); // 27 | |
| var user2 = new User("Barry Allen", 25); | |
| console.log(user2.name); // Barry Allen | |
| console.log(user2.age); // 25 |
5) ループ内で「array.length」をキャッシングする(データをキャッシングメモリに保存する)
このヒントはとても単純で、ループ内で大きな「array」を処理する際に巨大なインパクトを起こします。基本的に、ほとんど全ての人が「array」を繰り返すためにこの同期を書きます：
| for (var i = 0; i < array.length; i++) { | |
| console.log(array[i]); | |
| } |
もしもあなたが小さな「array」を実行するのなら、それで良いでしょう。しかし、大きな「array」を処理するのであれば、ループの全ての繰り返しの中で「array」の大きさがこのコードによって再計算されることになり、そのことによってわずかな遅れが生じます。それを回避するためには、ループ内で毎回「array.length」を呼び起こす代わりに以下の通りにすれば、変数の中で「array.length」をキャッシングすることができます：
| var length = array.length; | |
| for (var i = 0; i < length; i++) { | |
| console.log(array[i]); | |
| } |
小さくするためには、単にこのコードを書けばいいのです：
| for (var i = 0, length = array.length; i < length; i++) { | |
| console.log(array[i]); | |
| } |
6) 対象の中で特性を見つける
このトリックは特性が備わっているかを調べる必要がある際にとても有用で、未定義の機能や特性を走らせることを防ぎます。
もしもクロス・ブラウザコードを書くつもりであるならば、おそらくこのテクニックを用いることになるでしょう。
たとえば、旧式のInternet Exolorer6と互換性を持つコードを書く必要がある場合を想像してみましょう。いくつかの要素を入手するためには「document.querySelector(),」を使用したいのですが、ブラウザ内にこの機能が存在しません。したがって、この機能が備わっているかを調べるためには、以下の例のように「in」オペレーターを使用します：
| if ('querySelector' in document) { | |
| document.querySelector("#id"); | |
| } else { | |
| document.getElementById("id"); | |
| } |
この場合ですと、「querySelector」機能の中にドキュメント対象物がなければ、フォールバックとして「document.getElementById()」を使用できます。
7) 「array」内で最新アイテムを入手する
「Array.prototype.slice」(始めと終わり)には、オーギュメントを始める時と終わらせる時に「array」をカットする機能があります。
しかし、エンド・オーギュメントをセットしなければ、この機能は自動的に「array」の最大値にセットされます。この機能が負の値を受け入れることをほとんどの人は知らないと思いますが、オーギュメントを開始する時に負の値をセットするならば、「array」は最新の要素を入手します：
| var array = [1, 2, 3, 4, 5, 6]; | |
| console.log(array.slice(-1)); // [6] | |
| console.log(array.slice(-2)); // [5,6] | |
| console.log(array.slice(-3)); // [4,5,6] |
8) 「Array」の切り捨て
このテクニックによって「array」の大きさを固定できます。
あなたがセットしたい要素数に基づき「array」の要素を消去するためには、これはとても便利です。たとえば、10要素からなる「array」を持っていますが、最初の5要素のみを入手したい時には、「array.length = 5」とセットすることによって「array」をカットし、小さくすることができます。以下が例です：
| var array = [1, 2, 3, 4, 5, 6]; | |
| console.log(array.length); // 6 | |
| array.length = 3; | |
| console.log(array.length); // 3 | |
| console.log(array); // [1,2,3] |
9) 全てを置き換える
「String.replace()」機能によってストリングを置き換えるために「String」と「Regex」の使用が可能になります。
元々この機能は最初に起こったものに置き換わるのみでしたが、「Regex」の最後で「/g」を使うことによって「replaceAll()」機能をシミュレーションすることができます：
| var string = "john john"; | |
| console.log(string.replace(/hn/, "ana")); // "joana john" | |
| console.log(string.replace(/hn/g, "ana")); // "joana joana" |
10) 「array」の結合
２つの「array」を結合する必要がある時は、「Array.concat()」機能を用いることができます。
| var array1 = [1, 2, 3]; | |
| var array2 = [4, 5, 6]; | |
| console.log(array1.concat(array2)); // [1,2,3,4,5,6]; |
しかし、この機能は大きな「array」の結合にはあまり適していません。
新しい「array」をつくることによって多くのメモリーを消費するからです。この場合、新しい「array」をつくる代わりに「Array.push.apply(arr1, arr2)」を使用できます。これによって、メモリー使用を減らした最初の「array」内で二つ目の「array」が結合します：
| var array1 = [1, 2, 3]; | |
| var array2 = [4, 5, 6]; | |
| console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6]; |
11) 「NodeList」を「Array」に変換する
「document.querySelectorAll(“p”)」機能を走らせるのであれば、おそらく「NodeList」の対象であるDOM要素の「array」が返ってくるでしょう。
しかし、この対象は「sort()」、「reduce()」、「map()」、「filter()」のようなあらゆる「array」機能を持っているわけではありません。これらの機能やその他多くのネイティブな「array」機能を可能にするためには、「NodeList」を「Array」に変換する必要があります。このテクニックを走らせるには、単に「[].slice.call(elements)」機能を使えばいいのです。
| var elements = document.querySelectorAll("p"); // NodeList | |
| var arrayElements = [].slice.call(elements); // Now the NodeList is an array | |
| var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array |
12) 「array」要素を混ぜる
「Lodash」のような外部のライブラリーを使用せずに「array」要素を混ぜるためには、単にこの魔法のトリックを使うだけです：
| var list = [1, 2, 3]; | |
| console.log(list.sort(function() { | |
| return Math.random() - 0.5 | |
| })); // [2,1,3] |
※本稿は 「12 Extremely Useful Hacks for JavaScript」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ