この記事では、JavaScriptでよく出る組み込み関数やメソッドの一部をまとめています。
忘れた時用のチートシートとしてぜひご活用ください。
管理人
一部なのでこれを元に足しても良いかも！
JavaScriptの組み込み関数・メソッド
1. 数値操作
// --------------- 変換 --------------- //
// 文字列から数値への変換
parseFloat('123.45') // 123.45
parseInt('123') // 123
// --------------- 数値判定 --------------- //
// NaNかどうか
isNaN(123) // false
isNaN('abc') // true
// 数値かどうか（整数・少数など問わず。Number.isFinite()でワンセット）
Number.isFinite(123) // true
// --------------- 丸め・桁数指定 --------------- //
// 小数点以下2桁に丸めてStringで返す
(123.456).toFixed(2) // "123.46"
// 表示させる桁数を指定してStringで返す
(123.456).toPrecision(4) // "123.4"
2. 配列操作
const arr1 = [1, 2, 3];
// 配列生成
Array(5).fill(0) // [0, 0, 0, 0, 0]
// 条件に一致する要素を抽出： filter
arr1.filter(x => x > 1); // [2, 3]
// 配列内の全要素に順次処理を行い、累積した単一の値を生成： reduce
arr1.reduce((sum, current) => sum + current, 0) // 6 // 0は初期値
// 追加と削除(末尾): push, pop
arr1.push(4); // [1, 2, 3, 4]
arr1.pop(); // [1, 2]
// 追加と削除(先頭): shift, unshift
arr1.unshift(0); // [0, 1, 2, 3]
arr1.shift(); // [2, 3]
// 部分抽出と置換: slice, splice
// slice(開始位置, 終了位置) // 非破壊
// splice(開始位置[, 削除カウント[, 追加要素1[, 追加要素2, ...]]]) // 破壊
arr1.slice(1, 3); // [2, 3]
arr1.splice(1, 2, 'a', 'b'); // [1, 'a', 'b']
arr1.splice(1, 2); // [1]
// 各要素の処理: forEach, map
arr1.forEach(num => console.log(num)); // 1 2 3
arr1.map(num => num * 2); // [2, 4, 6]
// 条件で絞り込む: filter, find
arr1.filter(num => num % 2 === 1); // [1, 3]
arr1.find(num => num % 2 === 0); // 2
// 条件に一致する最初のインデックスを取得: findIndex
arr1.findIndex(num => num === 3); // 2
// 存在確認: indexOf, includes
arr1.indexOf(2); // 1
arr1.includes(2); // true
// ソート: sort
const arr2 = [3, 1, 4, 2];
arr2.sort((a, b) => a - b); // [1, 2, 3, 4]
arr2.sort((a, b) => b - a); // [4, 3, 2, 1]
// 結合: concat, join
const arr3 = [1, 2];
const arr4 = [3, 4];
arr3.concat(arr4); // [1, 2, 3, 4]
arr3.join('-'); // "1-2"
3. 文字列操作
const str1 = 'Hello World'
// 置換： replace, replaceAll
// replace：最初に該当した文字列のみ置換。
// replaceAll：該当したすべての文字列を置換。
str1.replace('World', 'JS') // "Hello JS"
str1.replace(/world/i, 'JS') // "Hello JS" - iは大文字・小文字区別なし
str1.replace(/l/g, '1') // "He11o Wor1d" - gはグローバルオプション
str1.replaceAll('l', '1') // "He11o Wor1d"
// トリミング： trim
const str2 = ' Hello World '
str2.trim() // "Hello World"
// 文字列の連結と分割: split
const arr = str.split(' ') // ["Hello", "World"]
// 部分取得: substr, substring - substrは現在非推奨。代わりにsubstringかsliceを利用
const part1 = str.substr(6, 5); // "World" - 指定位置から部分文字列を取得
const part2 = str.substring(0, 5); // "Hello" - 指定位置間の部分文字列を取得
4. オブジェクト操作
// キーや値を配列で取得: Object.keys, Object.values
const obj = {a: 1, b: 2, c: 3}
const keys = Object.keys(obj) // ["a", "b", "c"]
const values = Object.values(obj) // [1, 2, 3]
// プロパティの有無を確認: hasOwnProperty, in
const obj = {a: 1};
console.log(obj.hasOwnProperty('a')) // true
console.log('a' in obj) // true
// 型・インスタンス確認: typeof, instanceof
const num = 42;
console.log(typeof num) // "number" - データ型を返す
class Person {}
const person = new Person();
console.log(person instanceof Person) // true - インスタンスが特定のクラスか確認
// 数値操作: Math
Math.random() // 0から1の間のランダムな浮動少数を生成
Math.round(4.6) // 5 - 数値を四捨五入
Math.max(1, 5, 3) // 5 - 最大値を取得
// 日付操作: Date
// 現在日時
const now = new Date(); // 2024-12-07T12:34:56.789Z - 現在の日付と時刻
const year = now.getFullYear(); // 2024 - 現在の年
const month = now.getMonth(); // 11 - 現在の月 (0が1月、11が12月)
const date = now.getDate(); // 7 - 現在の日 (月内の日付)
const day = now.getDay(); // 6 - 現在の曜日 (0が日曜日、6が土曜日)
const hours = now.getHours(); // 12 - 現在の時間 (24時間制)
const minutes = now.getMinutes(); // 34 - 現在の分
const seconds = now.getSeconds(); // 56 - 現在の秒
const milliseconds = now.getMilliseconds(); // 789 - 現在のミリ秒
const timestamp = now.getTime(); // 1733596496789 - 1970年1月1日からの経過ミリ秒数
const isoString = now.toISOString(); // '2024-12-07T12:34:56.789Z' - ISO 8601 形式の文字列
const localeString = now.toLocaleString(); // '12/7/2024, 12:34:56 PM' - 現地時間形式の文字列
// 日付／時刻を指定
const specificDate = new Date('2023-08-16T10:20:30Z') // ISO 8601形式
const anotherDate = new Date(2023, 7, 16, 10, 20, 30) // 年、月(0-11)、日、時、分、秒
const dateFromMillis = new Date(1692182430000) // UNIXタイムスタンプ（ミリ秒）
const utcDate = new Date(Date.UTC(2023, 7, 16, 10, 20, 30))
5. 非同期処理
// ---------- Promiseを返さない非同期関数 ---------- //
// 一定時間後に処理を実行： setTimeout
setTimeout(() => {
console.log("1秒後に実行されます");
}, 1000); // 1000ミリ秒後
// 一定間隔で処理を実行： setInterval
const intervalId = setInterval(() => {
console.log("1秒ごとに実行されます");
}, 1000); // 1000ミリ秒ごと
// 一定時間後に処理を停止： clearInterval
setTimeout(() => {
clearInterval(intervalId);
console.log("インターバルをクリアしました");
}, 5000); // 5000ミリ秒後にインターバルを停止
// 一定時間後に処理を停止： clearTimeout
setTimeout(() => {
clearTimeout(timeoutId);
console.log("タイマーをクリアしました");
}, 500); // 500ミリ秒後にタイマーを停止
// ---------- Promiseを返す非同期関数 ---------- //
// データをget, post： fetch
fetch('<https://jsonplaceholder.typicode.com/posts>')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));
fetch('<https://jsonplaceholder.typicode.com/posts>', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));
// 非同期関数の使用： async/await
async function fetchData() {
try {
const response = await fetch('<https://jsonplaceholder.typicode.com/posts>');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('エラー:', error);
}
}
fetchData();
// ---------- Promiseを返さない非同期関数をnew Promise()でラップ ---------- //
const sampleFunc1 = () => {
return new Promise((resolve, reject) => {後者の非同期関数})
}
const sampleFunc2 = async () => {
.....
await sampleFunc1()
.....
}
sampleFunc2()
まとめ
以上、JavaScriptの組み込み関数・メソッド集でした。
忘れても良いようにぜひチートシートをフル活用してみてください。
※万が一、不備や誤り等ございましたらご指摘頂けますと幸いです。
コメント