JavaScript
テンプレートリテラル
1 {
2 let x = 3;
3 let s = `foo ${x}`;
4 console.log(x);
5 }
例外
1 try {
2 throw "hi";
3 } catch(e) {
4 console.log(e);
5 } finally {
6 console.log("bye.");
7 }
ループ
基本的にfor ofを使っておけばよさそうだ。
1 {
2 let a =["foo", "bar", "baz"];
3 a.foo = 3;
4
5 for (const i of a) {
6 console.log(i);
7 }
8 }
分割代入
角かっこはは省略できない。
1 {
2 let a, x, y;
3 a = [1, 2];
4 [x, y] = a;
5
6 console.log(`x = ${x}, y = ${y}`);
7 }
関数
関数名はつけてもつけなくてもいい。関数名をつけた場合は関数内から参照できるようになる。
1 {
2 const f = function foo (x=0) {
3 return x + 2;
4 }
5
6 console.log(f(3));
7 console.log(f());
8 }
アロー関数式
thisを持たないなど、関数とは少し違う。まあ、高階関数用の無名関数として使うにはこれの方が便利だろう。
1 {
2 let f = x => x * 2;
3 f(3);
4
5 let f2 = (x, y) => x * y;
6 f2(2, 4);
7
8 (x => x ** 2)(3);
9 }
オプショナルチェーン
.の代わりに?.を使う。プロパティが存在しない場合にエラーになる代わりにundefinedが返るようになる。
1 {
2 let x = { "foo": 1, "bar": 2 };
3 console.log(typeof x);
4 console.log(`${x?.foo} ${x?.baz}`);
5 }
正規表現
1 {
2 const re = /f.o/;
3 const s = "foo fox";
4 s.match(re);
5 }
map
1 {
2 a = [3, 4, 5, 6];
3 a.map(x => x + 10);
4 }
オブジェクト
1 {
2 const Foo = {
3 name: "foo"
4 };
5 const o = Object.create(Foo);
6 console.log(o?.name);
7 console.log(typeof o);
8 }
プロミス
setTimeout
1 setTimeout(() => console.log('hi'), 1000 * 5);
* * *
1 {
2 const p = new Promise(
3 (resolve, reject) => {
4 setTimeout(() => {
5 resolve("OK!");
6 }, 4000);
7 });
8
9 p.then((resolve) => {
10 console.log(resolve);
11 });
12 }
async function
プロミスの完了を待つ関数。なので、通常の関数と同じように使える。
1 {
2 function f1() {
3 return new Promise(
4 (resolve) => {
5 resolve('ok');
6 });
7 }
8 async function f2() {
9 const r = await f1();
10 console.log(r);
11 }
12
13 f2();
14 }
モジュール
querySelector, querySelectorAll
DomノードをCSSセレクタの構文で選択する。
1 {
2 const a = document.querySelectorAll("a");
3 for (i of a) {
4 console.log(i.title);
5 }
6 }