Zenn
👌

JavaScript 学習実施メモ 6

2021/02/12に公開
JavaScript
初心者
フロントエンド
frontend
#
memo
tech

6回目です。
とりあえずこれでラスト！

前回： https://zenn.dev/yuki_kanayama/articles/47a7d5738e468d

初回： https://zenn.dev/yuki_kanayama/articles/37022f0373e38d

Reflect

JSエンジンの内部の汎用的な関数を呼び出すメソッドが格納されているオブジェクト。

  1. 内部メソッドを呼び出す関数の格納場所
  2. Proxyと合わせて使用するため
    例：get, set, deleteProperty, construct など
1. const obj1 = new C(2, 5);
2. console.log(obj1);
3. const obj2 = Reflect.construct(C, [4, 8]); // => new === Reflect.construct
4. console.log(obj2); 
5.  
6. console.log('c' in obj1);
7. console.log(Reflect.has(obj1, 'b')); // => in === Reflect.has

1. const bob = {
2.   name: 'Bob',
3.   _hello: function () {
4.     console.log(`hello ${this.name}`);
5.   }
6. }
7.  
8. const tom = {
9.   name: 'Tom',
10.   _hello: function () {
11.     console.log(`hello ${this.name}`);
12.   },
13.   get hello() {
14.     return this._hello();
15.   },
16. }
17. tom.hello;
18. Reflect.get(tom, 'hello', bob); // 第三引数はbindの意味と同じ。

Proxy

プロパティの操作に独自の処理を追加するためのオブジェクト。

1. new Proxy(target, handler);

第一引数にターゲットとなるオブジェクト、第二引数に、このオブジェクトを操作した際に実行されるメソッドが格納されているオブジェクトを引数に渡す。

1. const targetObj = {
2.   a: 0,
3.   b: 2,
4. };
5.  
6. const handler = {
7.   set: function(target, prop, value, receiver) {
8.     console.log(`[set]: ${prop}`);
9.     target[prop] = value;
10.     // throw new Error('cannot add prop.');
11.   },
12.   get: function(target, prop, receiver) {
13.     console.log(`[get]: ${prop}`);
14.     if(target.hasOwnProperty(prop)) {
15.       return target[prop];
16.     } else {
17.       return -1;
18.     }
19.   },
20.   deleteProperty: function(target, prop) {
21.     console.log(`[delete]: ${prop}`);
22.     delete target[prop];
23.   },
24. }
25. const pxy = new Proxy(targetObj, handler);
26. pxy.b = 3;
27. console.log(pxy.a);
28. delete pxy.a;

1. 実行結果
2. [set]: b
3. [get]: a
4. 0
5. [delete]: a

Proxy と Reflect の組み合わせ

const targetObj = {
  a: 0,
  get value() {
    return this.a;
  }
};
 
const handler = {
  get: function (target, prop, receiver) {
    console.log(target);  // 確認
    console.log(prop); // 確認
    console.log(receiver); // 確認
    console.log(`[get]: ${prop}`);
    if(target.hasOwnProperty(prop)) {
      return Reflect.get(target, prop, receiver);
    } else {
      return -1;
    }
  }
}
const pxy = new Proxy(targetObj, handler);
console.log(pxy.value);

実行結果

{a: 0} // taeget
value　// prop
Proxy {a: 0} // receiver
[get]: value　// 2週目
{a: 0}
a
Proxy {a: 0}
[get]: a // 3週目
0

Proxy（pxy.value) によってまずhandlerのgetメソッドが実行される。
そして、

console.log([get]: ${prop});

が実行され、

if(target.hasOwnProperty(prop)) {
return Reflect.get(target, prop, receiver);

の部分で、true となり、返り値が

{
  a: 0,
  get value() {
    return this.a;
  }
};

の value() （＝そのまま実行）部分に適用される。receiverにより、this を束縛し(this = pxy.a) a を参照できる。

a を参照したことで再び get が実行されて、

if(target.hasOwnProperty(prop)) {
return Reflect.get(target, prop, receiver);

で、trueとなり、pxy.a が返り値になって console.log で a の値が表示される。

WeakMap

弱い参照でオブジェクトを保持するコレクション。キーは必ずオブジェクト。

ガべージコレクションとも言う。通常のMapとは違い、キーに使用しているオブジェクトの参照が削除されたとき、キーとバリューが削除される。（Mapの場合はメモリ空間に保持されている。）

JSON

JSONは見た目はオブジェクトだがStringである。

1. JSON.parse
2. JSON => Object
3.  
4. JSON.stringify
5. Object => JSON

stringify は第二引数に関数または、配列を持つことでその条件に該当するものだけをJSONに変換することができる。

1. const obj = { a: 0, b: 1, c: 2 };
2.  
3. function replacer(prop, value) { 
4.   if (value < 1) {
5.     return;
6.   }
7.   return value;
8. }
9.  
10. const fnJson = JSON.stringify(obj, replacer);
11. const aryJson = JSON.stringify(obj, ["a", "c"]);
12. // const json = JSON.stringify(obj);
13. console.log(typeof fnJson);
14. console.log(fnJson);
15. console.log(aryJson);
16.  
17. const obj2 = JSON.parse(fnJson);
18. console.log(obj2)

1. 実行結果
2. string
3. {"a":0,"c":2} // 文字列
4. {"b":1,"c":2} // 文字列
5. {b: 1, c: 2} // オブジェクト

Storage

Storage

ブラウザの保存領域にデータを格納するためのオブジェクト。このStorageコンストラクタから生成された、localStorage というオブジェクトを操作することでデータを保存することができる。

Chromeなら、検証のapplicationのLocal Storageで確認できる。

1. localStorage.setItem('key', '1'); // setItem で登録できる。第一引数に key、 第二引数に値を指定する。
2. localStorage.setItem('key2', '2');
3.  
4. const result = localStorage.getItem('key'); // getItem でストレージ内のデータを取得できる。
5. console.log(result);

JSONを用いた場合

1. const obj = { a: 0 };
2. const json = JSON.stringify(obj); // オブジェクトをJSONに変換
3. localStorage.setItem('keyObj', json);
4. const result = localStorage.getItem('keyObj');
5. const obj2 = JSON.parse(result); // JSONをオブジェクトに変換
6. console.log(obj2);

配列の主なメソッド

配列で使われるメソッドたち。

1. const arry = [0, 1, 2, 3, 4, 5, 6, 7];
2. arry.push(6); // 値を追加する。
3. const pop = arry.pop(); // 配列の最後を削除する。返り値は削除した値。
4. const shift = arry.shift(); // 配列の先頭を削除する。返り値は削除した値。
5. const unshit = arry.unshift(0); // 先頭に値を追加する。返り値は配列の長さ。
6. const splice = arry.splice(3); // 引数に指定した長さ分切り取る。第一引数がスタート地点、第二引数があればゴール地点となる。
7. const arry2 = [0, 1, ...arry, 10, 11]; // スプレッド演算子による配列の結合
8.  
9. console.log(arry);
10. console.log(pop);
11. console.log(shift);
12. console.log(unshit);
13. console.log(splice);
14. console.log(arry2);

1. 実行結果
2.  
3. (3) [0, 1, 2]
4. 6
5. 0
6. 8
7. (5) [3, 4, 5, 6, 7]
8. (7) [0, 1, 0, 1, 2, 10, 11]

Discussion