JavaScript に関する 12 のヒント

ブール値を変換するには !! 演算子を使用します

場合によっては、変数が存在するかどうかを確認したり、値が有効な値を持っているかどうかを確認し、存在する場合は true 値を返す必要があります。このような検証を行うには、非常に便利で簡単な !! 演算子を使用できます。 !!variable を使用して変数を検出できます。変数の値が 0、null、" "、未定義、または 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 です。

文字列を数値に変換するには + を使用します

このトリックは非常に簡単で、文字列データを数値に変換できますが、それ以外の場合は NaN を返します。次の例:

function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

これは Date にも機能します。この場合、タイムスタンプ番号が返されます:

console.log(+new Date()) // 1461288164385

条件付き

次のようなコードがある場合:

if (conected) {
    login();
}

省略することもできますたとえば、上記の例では、次のように省略できます:

conected && login();

オブジェクトにいくつかのプロパティまたは関数が存在する場合、次のようにこれを実行して検出することもできます。コード:

user && user.login();

演算子

を使用するのは、ES6のデフォルトパラメータの機能です。古いブラウザでこの機能をエミュレートするには、|| 演算子を使用し、2 番目のパラメータとしてデフォルト値を渡します。最初のパラメータが false を返した場合、2 番目の値はデフォルト値とみなされます。次の例を見てみましょう:

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

ループ内の array.length をキャッシュする

この手法は非常に簡単ですが、大規模な配列ループを処理する場合、パフォーマンスへの影響は非常に大きくなります。基本的に、誰もが次のように同期的に反復する配列を作成します。

for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

小さい配列の場合はこれで問題ありません。大きい配列を扱う場合、このコードは反復ごとに再初期化されます。これにより、多少の遅延が発生します。この現象を回避するには、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]);
}

オブジェクト内の属性を検出する

いくつかの属性が存在するかどうかを確認する必要がある場合は、この小さなトリックは、関数やプロパティを使用するときに非常に役立ちます。クロスブラウザー コードをカスタマイズする予定がある場合にも、このトリックを使用するとよいでしょう。たとえば、document.querySelector() を使用して ID を選択し、IE6 ブラウザと互換性を持たせたいとします。しかし、この関数は IE6 ブラウザには存在しないため、この関数が存在するかどうかをこの演算子を使用して検出するのは困難です。次の例のように、非常に便利です:

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

この例では、querySelector 関数がドキュメントに存在しない場合、 docuemnt.getElementById("id") が呼び出されます。

配列の最後の要素を取得します

Array.prototype.slice(begin, end) は、begin と end の間の配列要素を取得するために使用されます。終了パラメータを設定しない場合は、配列のデフォルトの長さの値が終了値として使用されます。しかし、この関数がパラメータとして負の値も受け入れることができることを知らない学生もいるかもしれません。 begin の値として負の値を設定すると、配列の最後の要素を取得できます。例:

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]

配列の切り捨て

この小さなトリックは主に配列のサイズをロックするために使用され、配列内の一部の要素を削除するために使用すると非常に便利です。たとえば、配列に 10 個の要素があるが、最初の 5 個の要素だけが必要な場合は、array.length=5 で配列を切り詰めることができます。次の例のように:

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]

Replace all

String.replace() 関数を使用すると、文字列または正規表現を使用して文字列を置換できます。この関数自体は、最初に出現した文字列のみを置換しますが、/ を使用することもできます。 replaceAll() 関数をシミュレートするために正規表現に g を追加します:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

配列を結合する

2 つの配列を結合したい場合は、通常、Array.concat() 関数を使用します:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

ただし、この関数はそうではありません。新しく作成された配列を格納するために大量のメモリを消費するため、2 つの大きな配列をマージするのに適しています。この場合、代わりに Array.pus().apply(arr1, arr2) を使用して新しい配列を作成できます。このメソッドは新しい配列を作成するために使用されるのではなく、メモリ使用量を削減しながら最初と 2 番目の配列をマージするだけです:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

NodeList を Array に変換

document.querySelectorAll ("p") 関数を実行すると、 DOM 要素の配列 (NodeList オブジェクト) を返す場合があります。ただし、このオブジェクトには、sort()、reduce()、map()、filter() などの配列の関数がありません。これらのネイティブ配列関数を使用するには、ノード リストを配列に変換する必要があります。 [].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

配列要素のシャッフル

配列要素をシャッフルするには、Lodash などの外部ライブラリを使用する必要はなく、これを行うだけです。

えー

概要

これで、JavaScript の便利なトリックをいくつか学びました。これらのヒントが職場でのトラブルの解決に役立つこと、またはこの記事がお役に立てば幸いです。 JavaScript に関する優れたヒントがある場合は、コメントで共有してください。