【2】JavaScriptのTips、ベストプラクティスをご存知でない?

4 min read読了の目安(約4300字

はじめに

JavaScriptの初級者が実務で学んだ事や、公式ドキュメントや技術書でインプットした内容を記事としてアウトプットさせていただいてます。もし、不適切な箇所があればご指摘よろしくお願いします。

1.文字列 trim ()

trim()は、やや新しいJavaScriptエンジンでは使用可能ではありますが、古いヴァージョンには採用されてないですね。その際、こちらのコードを利用させていただきました。

script.js
String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};  

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim

2. 2つの配列をマージする

script.js
let vegetables = ['parsnip', 'potato']
let moreVegs = ['celery', 'beetroot']

// 1 つ目の配列に 2 つ目の配列をマージさせます
// vegetables.push('celery', 'beetroot'); と同じ結果になります
Array.prototype.push.apply(vegetables, moreVegs)

console.log(vegetables)  // ['parsnip', 'potato', 'celery', 'beetroot']

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push

3.引数(配列風obeject)を配列にする

script.js
let args = Array.prototype.slice.call(arguments);

4. 数値かどうかを確認する関数

script.js
function isNumber(n){
  return !isNaN(parseFloat(n)) && isFinite(n);
}

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isFinite

5. 配列かどうかを確認する関数

script.js
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

toString()メソッドは上書きします。toString()メソッドを作成した場合は好きな文字列を返すことができますが、オブジェクトに関する情報を伝えるのが適切な使い方になるのでしょうか?

またこちらの関数も利用できますね

script.js
Array.isArray(obj); /

Array のインスタンスをチェックする際、Array.isArray は iframes で動作するので、instanceof よりも正しく動作しますね

script.js
let myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);

let myArray = window.frames[window.frames.length-1].Array;
let arr = new myArray(a,b,10); // [a,b,10]  

arr instanceof Array; // false

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

6. 最大,最小数値を返す関数

script.js
let numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
let maxInNumbers = Math.max.apply(Math, numbers); // 122205
let minInNumbers = Math.min.apply(Math, numbers); // -85411

参考記事

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min

7.空の配列

script.js
let myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray は []

8. 配列の項目を削除するのに delete を使うな!

spliceをなるべく使いましょう。

まずは,deleteを使用した場合

script.js
let items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items は [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]  となる */

spliceを使用した場合

script.js
let items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

deleteで削除した項目は undefined という結果になりました。もしdeleteメソッドを使用したい場合は オブジェクトプロパティに使用するといいかもですね。

参考記事

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

9.lengthを上手に使って配列の項目を切り捨てる!

script.js
let myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Array.length に 数値 を挿入すると 項目の数が 増減するようになります。追加された値は undefined を戻すようですね

script.js
myArray.length = 10; // Array の length は 10 
myArray[myArray.length - 1] ; // undefined

参考記事

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

10. map関数でループを

任意の配列から各要素に処理を加えて新たな配列を作成したい時やコードを単純に分かりやすくしたい時に積極的に使いたいですね。

script.js
let squares = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// squares は [1, 4, 9, 16] 

シリーズ

https://zenn.dev/ignorant_kenji/articles/d238a7e99ab42ca8828d