この記事は何？
最近、コーディングテスト対策に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