この記事は何？

最近、コーディングテスト対策にJavaScriptの練習をしています。
問題を解く時によく使う処理をまとめました。

繰り返し

for文

const arr = ["abc", "def", "ghi", "jkl"];

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

// 出力結果
>> abc
>> def
>> ghi
>> jkl

ES2015(ES6)以降のJavaScriptなら以下でも可能（for ~ of文）

const arr = ["abc", "def", "ghi", "jkl"];

for (const elem of arr) {
  console.log(elem);
}

// 出力結果
>> abc
>> def
>> ghi
>> jkl

while文

let i = 0;

while (i <= 3) {
  console.log(i);
  i++;
}

// 出力結果
>> 0
>> 1
>> 2
>> 3

条件分岐

if 〜 else文

const num = 95;

if (num === 100) {
  console.log("満点です");
} else if (num >= 60) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

// 出力結果
>> 合格です

switch文

const subject = "Math";

switch (subject) {
  case "English":
    console.log("英語");
    break;
  case "Math":
    console.log("数学");
    break;
  case "Science":
    console.log("理科");
    break;
  default:
    console.log("国語");
}

// 出力結果
>> 数学

算術演算

加減乗除

// 足し算
console.log(2 + 2);
>> 4

// 引き算
console.log(6 - 1);
>> 5

// 割り算
console.log(8 / 2);
>> 4

// 余り
console.log(10 % 3);
>> 1

べき乗

console.log(2 ** 3);
>> 8

小数点以下の切り上げ・切り捨て・四捨五入 ( ceil / floor / round )

// 切り上げ
var num = Math.ceil( 2.3 );
console.log(num);
>> 3

// 切り捨て
var num = Math.floor( 1.8 );
console.log(num);
>> 1

// 四捨五入
var num = Math.round( 1.5 );
console.log(num);
>> 2

var num = Math.round( 1.4 );
console.log(num);
>> 1

整数の桁数

// 文字列にしてから長さを求める
var num = 12345;
var numLength = num.toString().length;

配列

要素数を求める (length)

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.length);

>> 5

要素数と初期値を指定して配列を作成 (fill)

let arr = Array(5).fill(0);
console.log(arr);

>> [0, 0, 0, 0, 0]

末尾に要素を追加 (push)

var arr = [ 'a', 'b', 'c', 'd', 'e' ];
arr.push('f');
console.log(arr);

>> [ 'a', 'b', 'c', 'd', 'e', 'f' ]

末尾の要素を削除 (pop)

var arr = ['a', 'b', 'c', 'd', 'e'];
var popped = arr.pop();
console.log(arr);
console.log(popped);

>> [ 'a', 'b', 'c', 'd' ]
>> e

指定したindexに対して要素の追加・置換・削除を行う (splice)

// 追加 ---------------------------------------
let fluit = [ 'りんご', 'みかん', 'ぶどう' ];

// indexの2番目に養素を追加
fluit.splice(2, 0, 'もも');
console.log(fluit);

>> [ 'りんご', 'みかん', 'もも',  'ぶどう']

// 置換 ---------------------------------------
let fluit = [ 'りんご', 'みかん', 'ぶどう' ];

// indexの0番目の養素を置換する
fluit.splice(0, 1, 'すいか');
console.log(fluit);

>> [ 'すいか', 'みかん', 'ぶどう' ]

// 削除 ---------------------------------------
let fluit = [ 'りんご', 'みかん', 'ぶどう' ];

// indexの0番目の養素を削除する
fluit.splice(0, 1);
console.log(fluit);

>> [ 'みかん', 'ぶどう' ]

最大値・最小値を求める (Math.max / Math.min)

// 最大値
var arr = [ 1, 5, 3, 8, 10 ];
const maxNum = Math.max(...arr);
console.log(maxNum);

>> 10

// 最小値
var arr = [ 1, 5, 3, 8, 10 ];
const minNum = Math.min(...arr);
console.log(minNum);

>> 1

検索する (find)

// indexの小さい方から順に要素を検索。条件に該当する要素があれば返す
// 最初に条件に該当した要素のみを返すので、この例では9が返され、8は返されないことに注意
const arr = [1, 9, 5, 2, 8];
const target = arr.find(t => t > 7);
console.log(target);
>> 9

// 条件に該当する要素が存在しない場合
const arr = [1, 3, 5, 2, 6];
const target = arr.find(t => t > 7);
console.log(target);
>> undefined

配列から条件を満たす要素のみを抽出し、新しく配列を作成 (filter)

const arr = ['apple', 'dog', 'pen', 'cat', 'dictionary', 'chair'];
const newArr = arr.filter(str => str.length < 5);
console.log(newArr);
>> [ 'dog', 'pen', 'cat' ]

const arr = ['apple', 'kitchen', 'flower', 'bicycle', 'dictionary', 'chair'];
const newArr = arr.filter(str => str.length < 5);
console.log(newArr);
>> []

###ソート

文字列のソート

// アルファベット
var arr = [ 'dog', 'apple', 'bottle', 'cat' ]
var sortedArr = arr.sort();
console.log(sortedArr);
>> [ 'apple', 'bottle', 'cat', 'dog' ]

// ひらがな
var arr = [ 'おもち', 'えほん', 'いぬ', 'あめ' ]
var sortedArr = arr.sort();
console.log(sortedArr);
>> [ 'あめ', 'いぬ', 'えほん', 'おもち' ]

数値のソート

// 昇順 ---------------------------------------
var arr = [ 5, 2, 1, 3, 4 ]

var sortedArr = arr.sort(function (a, b) {
  return a - b;
})

// アロー関数を用いた書き方も可能
var sortedArr = arr.sort((a, b) => a - b);

console.log(sortedArr);
>> [ 1, 2, 3, 4, 5 ]

// 降順 ---------------------------------------
var arr = [ 5, 2, 1, 3, 4 ]

var sortedArr = arr.sort(function (a, b) {
  return b - a;
})

// アロー関数を用いた書き方も可能
var sortedArr = arr.sort((a, b) => b - a);

console.log(sortedArr);
>> [ 5, 4, 3, 2, 1 ]

値が配列に含まれるか調べる

値が配列に含まれる場合はそのindexを返し、含まれなければ-1を返す (indexOf)

// 含まれる
var arr = ['a', 'b', 'c', 'd']
var result = arr.indexOf('c')
console.log(result)
>> 2

// 含まれない
var arr = ['a', 'b', 'c', 'd']
var result = arr.indexOf('e')
console.log(result)
>> -1

値が配列に含まれる場合はtrueを返し、含まれなければfalseを返す (includes)

// 含まれる
var arr = ['a', 'b', 'c', 'd']
var result = arr.includes('c')
console.log(result)
>> true

// 含まれない
var arr = ['a', 'b', 'c', 'd']
var result = arr.includes('e')
console.log(result)
>> false

配列内の要素を結合して文字列にする

// スペースを開けずに結合したい時
var arr = ['a', 'b', 'c', 'd', 'e'];
var newArr = arr.join("");
console.log(newArr);
>> abcde

// １スペース開けて結合したい時
var arr = ['a', 'b', 'c', 'd', 'e'];
var newArr = arr.join(" ");
console.log(newArr);
>> a b c d e

// '+'記号で結合したい時
var arr = [1, 2, 3, 4, 5];
var newArr = arr.join("+");
console.log(newArr);
>> 1+2+3+4+5

文字列

文字列を反転する (reverse)

var str = "abcde";
var newStr = str.split("").reverse().join("");  // 文字列を配列に分解し、反転した後、結合し直す
console.log(newStr);
>> edcba

ある文字列が含まれるか調べる (match)

// 含まれる場合
var text = 'Imagine all the people living for today';
var target = /people/g;
var result = text.match(target);
console.log(result);
>> [ 'peole' ]

// 含まれない場合
var text = 'Imagine all the people living for today';
var target = /dreamer/g;
var result = text.match(target);
console.log(result);
>> null

大文字・小文字の変換 (toUpperCase / toLowerCase)

// 大文字に変換
var str = "abc";
var strUpper = str.toUpperCase();
console.log(strUpper);
>> ABC

// 小文字に変換
var str = "ABC";
var strLower = str.toLowerCase();
console.log(strLower);
>> abc

// 最初の1文字だけ大文字に変換
var str = "abc";
var newStr = str.slice( 0, 1 ).toUpperCase() + str.slice( 1 );
console.log(newStr);
>> Abc

指定した文字列を置換・削除 (replace)

// ”みかん”を”もも”に置換
var str = "りんごみかんぶどう";
var strNew = str.replace( /みかん/g , "もも" );
console.log(strNew);
>> りんごももぶどう

// ”みかん”を削除
var str = "りんごみかんぶどう" ;
var strNew = str.replace( /みかん/g , "" ) ;
console.log(strNew);
>> りんごぶどう

indexで指定した範囲の文字列を取得 (slice)

var str = "あいうえおかきくけこ";

// indexの0番目から2番目までの文字を取得　
// indexの開始位置(0)と終了位置(3)を指定している
// 実際に取得されるのは終了位置の手前まで(0〜2)であることに注意
var a = str.slice( 0, 3 );
console.log(a);
>> あいう

// indexの3番目から5番目までの文字を取得　
// indexの開始位置(3)と終了位置(6)を指定している
// 実際に取得されるのは終了位置の手前まで(3〜5)であることに注意
var b = str.slice( 3, 6 );
console.log(b);
>> えおか

// index6番目以降の文字を取得
// indexの終了位置を省略すると末尾までの値を取得する
var c = str.slice( 6 );
console.log(c);
>> きくけこ

// 末尾から3文字を取得
// 文字列末尾からindexをカウントする場合、
// 最後尾を-1として、先頭に近づくにつれて-2,-3・・・とカウントしていく
var d = str.slice( -3 );
console.log(d);
>> くけこ

文字の登場回数をカウントする

// text内での"ab"の登場回数を調べる
var text = "abc-acb-bac-bca-cab-cba";
var target = /ab/g;
var count = ( text.match(target) || [] ).length;
console.log(count);
>> 2

// 調べたい文字が特殊文字の場合は\をつけると表現できる
// 例えば "/"を調べるときは"\/"
// 例えば "<"を調べるときは"\<"

処理内容の簡単な説明

text.match( /ab/g ) は文字列textのうち"ab"に一致した箇所全てを配列として返すため、 [ 'ab', 'ab' ] となります。そのため、 text.match( /ab/g ).length として配列の要素数を取得することで、"ab"の登場回数をカウントできます。ただし、textに"ab"が存在しなかった場合、 text.match( /ab/g ) はnullを返すため、 text.match( /ab/g ).length は処理できずエラーになってしまいます。エラーを回避するため、 ( text.match( /ab/g ) || [] ).length として、"ab"が存在しなかった場合には0が返るようにしています。

文字列を計算式として使う

var str = "1*2*3*4*5";
result = Function('return ('+str+');')();

console.log(result);
>> 120

文字列を分割して配列にする (split)

// カンマで分割する
var str = "abc,def,ghi,jkl"
var arr = str.split(",");
console.log(arr);
>> [ 'abc', 'def', 'ghi', 'jkl' ]

// スペースで分割する
var str = "abc def ghi jkl"
var arr = str.split(" ");
console.log(arr);
>> [ 'abc', 'def', 'ghi', 'jkl' ]

// １文字ずつ分割する
var str = "abcdefghijkl"
var arr = str.split("");
console.log(arr);
>> [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l' ]

型変換

// 数値→文字列
var num = 123;
var numToStr = String(num);

console.log(typeof(num));       // 変換前の型
console.log(typeof(numToStr));  // 変換後の型
>> number
>> string

// 文字列→数値
var str = '123';
var strToNum = Number(str);

console.log(typeof(str));       // 変換前の型
console.log(typeof(strToNum));  // 変換後の型
>> string
>> number

参考にさせていただいた記事

https://qiita.com/may88seiji/items/54cd61f8842bdffd5867
https://lab.syncer.jp/Web/JavaScript/Snippet/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference