🙄

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

2022/12/10に公開約1,200字

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を使用しているらしいです。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/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'

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

Discussion

ログインするとコメントできます