🕌
自分のためだけの無作為アウトプット
自分のためだけのアウトプット備忘録
非同期
Promiseに関するメモ
-
new Promiseをすると、Promiseの中の処理が開始する - Promiseの実行結果を知りたいなら
then()やcatch()が必要。(async関数なら別) - ただ
then()やcatch()を書かないからといって、Promiseの中の処理自体は変わらない。(ただ人知れず処理するだけ)
setTimeoutを同期的に使う
setTimeoutは非同期のコールバックを登録するだけなので、promiseは返さない。setTimeoutを同期的に使いたいなら、指定した時間待機する処理をpromiseで作ればよい
const delay = (ms: number) => {
// Promise<void>にすることで、戻り値なしのPromiseにする
return new Promise<void>((resolve) => setTimeout(resolve, ms));
};
const someAction = async() => {
// 5秒待機
await delay(5000);
console.log("おわり");
}
async関数はPromiseを返すが、awaitする処理がPromise出ない場合すぐに次の処理に進む
次の2つの処理って同じだと思っていたけど、ちゃんと指定時間待機して後続に進むのは一つ目の処理だけ。
// 指定した時間待機する
const delay = (ms: number) => {
return new Promise<void>((resolve) => setTimeout(resolve, ms));
};
// 待機しない(すぐに次の処理に進む)
const asyncDelay = async (ms: number) => {
await setTimeout(() => {}, ms);
};
asyncDelay関数の型が(ms: number) => Promise<void>となっており、Promiseを返すなら待機してくれるんじゃないの???
大事なのはasync関数の中のawaitがPromiseを返すかどうか
async関数の中で行う処理(今回の場合はsetTimeout)がPromiseを返さないと、すぐに後続の処理に進んでしまう。つまり、async関数自体が返すPromiseはどうでもよい
async関数を修正すると次のようになる
const asyncDelay = async (ms: number) => {
await new Promise<void>((resolve) => setTimeout(resolve, ms));
};
async関数を使えば、new Promiseを書かなくてもよい的なことを想像していたので備忘としてメモ
Object
Object.fromEntries
配列やMapをObjectへ変換するメソッド。
Map→Object
const map = new Map([
["foo", "bar"],
["baz", 42],
]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
Array→Object
const arr = [
["0", "a"],
["1", "b"],
["2", "c"],
];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
Map
ObjectとMapの違い一覧
| 特性 | Object | Map |
|---|---|---|
| キーの型 | string または symbol のみ | あらゆる型 (数値・オブジェクト・関数 など) |
| キーの順序 | 順序保証なし | 挿入順が保証される |
| パフォーマンス | 大量のデータ操作に向かない | 高速なデータアクセス・削除が可能 |
| サイズの取得 | Object.keys(obj).length を使う | .size で即時取得 |
| キーの存在確認 | key in obj | .has(key) |
| ループ処理 | for...in / Object.entries() | forEach() / for...of |
| シリアライズ (JSON化) | JSON.stringify() 可能 | JSON.stringify() できない |
ObjectとMapの使い分け
| 使いたい機能 | Object を使う | Map を使う |
|---|---|---|
| キーが文字列 (string) のみ | ✅ | ✅ |
| キーに数値・オブジェクト・関数を使いたい | ❌ | ✅ |
| キーの順序を保証したい | ❌ | ✅ |
| データを頻繁に追加・削除する | ❌ | ✅ |
| JSON.stringify() したい | ✅ | ❌ |
| パフォーマンスを重視 | ❌ | ✅ |
Json.stringify()をしたいなら
Object.fromEntries()を使ってObjectにしてから実行する
const map = new Map([
["name", "Alice"],
["age", 25],
["isAdmin", true],
]);
const json = JSON.stringify(Object.fromEntries(map));
console.log(json); // '{"name":"Alice","age":25,"isAdmin":true}'
Discussion