Edited at

【翻訳】より簡潔で高性能なJavascriptを書くための7つの便利なコツ


はじめに

読んでいてストックしておきたいなと思ったので、初めて翻訳記事を書きます。

私(@shimonosatoru)が加えたものに関しては斜体で記載しています。

以下、翻訳です。


本文

私たちがJavaScriptを書くとき、私たちは他人のコード、ウェブサイト、そして私たちが使ったチュートリアル以外の場所で見つけたコーディングを効率化するトリックリストを作成しました。

それ以来、私たちはこのリストにトリックを追加してきました。この記事は初心者にも役立つように書かれていますが、JavaScriptを扱えるデザイナーでさえこのリストの中から何か新しいものがないか見つけようとしています。

これらのコードの多くはどのような状況でも役に立ちますが、簡潔さよりも一貫性が重要であることが多いプロダクションレベルのコードにはふさわしくない場合があります。 みなさんにはそれを判断して欲しいと思っています。

簡潔さを重要視したコードのトリックリストなので読みやすさなどは考慮しておりません。中にはアンチパターンと思われるものもあったりするかもしれないので、このコードが絶対正しいと思わず参考程度に読んでもらえればいいと思います。


1. JSON.stringifyを使用してJSONコードをフォーマットする

あなたは以前にJSON.stringifyを使用したことがあるかもしれませんが、それはJSONをインデントするのにも役立てることができると知っていましたか?

stringify()メソッドは、文字列化の手順の挙動を変更する関数と出力するJSON文字列に可読性を目的に空白を挿入するために使うスペース値の2つのオプションパラメータを取ります。

スペース値は、必要なスペース数を表す整数または文字列(タブを挿入するための't'など)を取るので、取得したJSONデータを読みやすくすることができます。

console.log(JSON.stringify({ fruit: 'apple', vegetable: 'broccoli' }, null, 't'));

// Result:
// '{
// "fruit": apple,
// "vegetable": broccoli
// }'


2.配列の最後の項目を取得する方法

slice()配列メソッドは負の整数を取ることができ、その場合配列の先頭からではなく末尾から値を取ります。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]


3.配列を切り捨てる方法

配列の末尾から値を削除したい場合は、 splice()を使用するより速い選択肢があります。 たとえば、元の配列のサイズがわかっている場合は、その長さプロパティを次のように再定義できます。

let array = [a, b, c, d, e, f, g, h, i, l];

array.length = 4;
console.log(array); // Result: [a, b, c, d]


4.固有値をフィルタリングする方法

ES6でspread演算子とともに導入されたsetオブジェクト型を使用して、一意の値のみを持つ新しい配列を作成できます。

const array = [1, 1, 2, 3, 5, 5, 1]

const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

ES6のおかげで、一意の値を分離するのに多くのコードが必要なくなりました。

このトリックは、undefined、null、boolean、string、numberの配列のプリミティブ型に対して機能します。 アイテム、機能、または追加の配列を含む配列がある場合は、異なる方法が必要になります。


5.Bool値に変換

通常のtrueおよびfalseのBool値とは別に、JavaScriptは他のすべての値も"true"または"false"として扱います。

'false'である 0, "", null, undefined, NaNと明らかなfalseを除けば、特に他に定義されていない限りJavaScriptのすべての値は'true'です。

否定演算子!を使うことで、trueとfalseを素早く切り替えることができます。これも型を "boolean"に変換します。

const isTrue  = !0;

const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

条件付きステートメントでは、この種の変換は有用ですが、前述したように、プロダクションでは逆効果になる可能性があります。


6.文字列に変換する

数値を素早く文字列に変換するには、連結演算子+とそれに続く空の引用符 ""を使用します。

const val = 23 + "";

console.log(val); // Result: "23"
console.log(typeof val); // Result: "string"


7.文字列を数値に変換する方法

+ (加算演算子)を使用すると、逆の操作を迅速に実行できます。

let int = "23";

int = +int;
console.log(int); // Result: 23
console.log(typeof int); // Result: "number"

これは、以下に示すように、Bool値を数値に変換するためにも使用できます。

console.log(+true);  // Return: 1

console.log(+false); // Return: 0

ところで、文字列を数値に変換する方法はたくさんあります。 文字列を数値に変換するための少なくとも5つの方法があると、すでに知っている方法を含めて考えられます。

parseInt(num); // default way (no radix)

parseInt(num, 10); // parseInt with radix (decimal)
parseFloat(num) // floating point
Number(num); // Number constructor
~~num //bitwise not
num / 1 // diving by one
num * 1 // multiplying by one
num - 0 // minus 0
+num // unary operator "+"

私たちの考えでは、コンストラクタ以外のコンテキストで(newキーワードなしで)Numberオブジェクトを使用するのが最も良い方法です。

const count = Number('1234') //1234

小数点を含む文字列を解析する必要がある場合は、代わりにIntl.NumberFormatを使用します。

整数に代わるもう1つの良い方法は、 parseInt()関数を使用することです。

const count = parseInt('1234', 10) //1234

2番目のパラメータ、つまり10進数の場合は常に10を忘れないようにしてください。そうしないと、変換によって基数が推測され、予期せぬ結果が生じる可能性があります。

parseInt()は、数字以外を含む文字列から数字を取得しようとします。

parseInt('10 cats', 10) //10

※ 文字列が数字で始まっていない場合は、NaN(Not a Number)が返されます。

parseInt("mouse 10", 10) //NaN

さらに、Numberのように数字の間の区切り文字については信頼できません。

parseInt('10,000', 10) //10     ❌

parseInt('10.00', 10) //10 ✅ (considered decimals, cut)
parseInt('10.000', 10) //10 ✅ (considered decimals, cut)
parseInt('10.20', 10) //10 ✅ (considered decimals, cut)
parseInt('10.81', 10) //10 ✅ (considered decimals, cut)
parseInt('10000', 10) //10000 ✅

小数を使いたい場合は、 parseFloat()使用してください。

parseFloat('10,000') //10     ❌

parseFloat('10.00') //10 ✅ (considered decimals, cut)
parseFloat('10.000') //10 ✅ (considered decimals, cut)
parseFloat('10.20') //10.2 ✅ (considered decimals)
parseFloat('10.81') //10.81 ✅ (considered decimals)
parseFloat('10000') //10000 ✅

元記事ではparseFloatに第2引数を指定していますが実際は存在しません。上記のコードは修正を加えたものになります。(参考

+と似ていますが、整数部分を返すのはMath.floor()です。

Math.floor('10,000') //NaN ✅

Math.floor('10.000') //10 ✅
Math.floor('10.00') //10 ✅
Math.floor('10.20') //10 ✅
Math.floor('10.81') //10 ✅
Math.floor('10000') //10000 ✅

以下は最も速いオプションの1つで、演算子+単項演算子のように動作するため、数値がfloatの場合は整数への変換は実行されません。

'10,000' * 1 //NaN ✅

'10.000' * 1 //10 ✅
'10.00' * 1 //10 ✅
'10.20' * 1 //10.2 ✅
'10.81' * 1 //10.81 ✅
'10000' * 1 //10000 ✅


最後に

訳すだけでもちゃんと全部読もうとするので理解が進みます。結構おすすめです

オリジナル:

https://www.ma-no.org/en/useful-tricks-for-writing-more-concise-and-performant-javascript