🙄

全然知らなかったjavascript,typescript豆知識

2022/12/11に公開

mapやforEachはarray以外でも使える

const { map } = Array.prototype;

function c(a, b) {
  map.call(arguments, (v) => {
    console.log('v', v);
  });
};

c(1, 2, 3);

イテレータブルなものなら何でもよさげ。例えばargumentsなどは

interface IArguments {
    /** Iterator */
    [Symbol.iterator](): IterableIterator<any>;
}

という型で、上記の方法ならループできる。

splitでセパレータを含んだ結果を返す

const result = "aa_test_bb_test_cc".split(/(test)/)
console.log(result);
// => result [ 'aa_', 'test', '_bb_', 'test', '_cc' ]

MDNの説明によると実際にはSymbol.splitを使用しているらしいです。

cssのメディアクエリはwebAPI経由でjavascriptでも使える

以下はmin-widthが599pxかどうかでbooleanを返す。これだけでいい。

const list = window.matchMedia("(min-width: 599px)");
console.log(list.matches); // true or false

変更を検知することもできる

list.addEventListener("change", () => {
  console.log(list.matches);
});

typescriptでstringの数字を型に指定できる

const stringNum: `${number}` = '1'
const stringNum: `${number}` = 1　// => 「型 '1' を型 '`${number}`' に割り当てることはできません。」というエラーが起こる。

booleanも行ける

const stringBool: `${boolean}` = 'true'

数字に関しては中々使い所があるかも

filterでタイプも含めてnullとundefinedを排除する

❌
const a: (number | null)[] = [1, 2, 3];
const b = a.filter((v) => v !== null);
const c: number[] = b; // => 型 '(number | null)[]' を型 'number[]' に割り当てることはできません。

✅
const a: (number | null)[] = [1, 2, 3];
const b = a.filter((v): v is NonNullable<typeof v> => v !== null);
const c: number[] = b; // => ok

2桁にするように0埋めするのはsliceよりもシンプルな方法がある

時刻で3:13を03:13にしたいときがあるが、よくある方法は以下。

const hour2digit = ("0"+date.getHours()).slice(-2)

より分かりやすい書き方は以下

const hour2digit = date.getHours().padStart(2, "0")

ぶっちゃけsliceの方が早いので計算量が多いならsliceの方がいい。が、普通は読みやすさ重視でpadStartを使えばいいと思う。名前もpadding startってことで、最初を穴埋めするって意味だから、まさしくこのためにあるメソッド。

MDNでは以下の例が挙げられていて便利そう

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// Expected output: "************5581"