TIL 210624

11413 ワード
JavaScript TIL テキストリンク

今日やったこと

  • JS講義中JSONに関する講義
    • 整理
  • バージョン

    • 学習の内容


    JS 10. JSON


    https://youtu.be/FN_D4Ihs3LE
    HTTP (Hypertext Transfer Protocal)
    ブラウザで実行されるクライアントがサーバと通信する方法클라이언트 -request→ 서버 클라이언트 ←response- 서버ブラウザでサーバと通信する場合は、FETCH()APIまたはXHRオブジェクトを使用します.
    AJAX (Asynchronous JavaScript And XML)
  • HTTPを使用してサーバに要求するデータ
    • を受信する方法
  • ページ上で動的にサーバにデータ
    • を送信する.
    XHR (XMLHttpRequest)
  • ブラウザApIが提供するオブジェクトの1つ:
  • 最近追加されたfetch()APIを使用して、簡単にサーバにデータを要求して受信することができる→IEは
    • をサポートしない.
    XML
    HTMLなどの寸法言語やタグを使用してデータを表す
  • XMLを使用し、不要なタグが多すぎてファイルサイズが大きくなり、可読性が悪い→JSONで
    • を解決

    JSON JavaScript Object Notation


    ブラウザやモバイルデバイスを介してサーバとデータを交換したり、サーバと通信したりすることなく、ファイルシステムにオブジェクトを格納するために使用されます.
    最も簡単なファイルフォーマット、
  • データの送受信に使用可能
  • テキストベースの読みやすい
  • キーと値は
    • を構成する.
  • データはサーバとの通信時にシリアル化する、データの伝送時に
    • を用いる.
  • は、任意のプログラミング言語およびプラットフォーム
    • に使用することができる.

    JSONのAPI

    let json = JSON.stringify(true);
console.log(json);
    関数の名前は同じですが、パラメータ→オーバーロードの数に応じて異なる方法で呼び出すことができます.
  • parse JSONに文字列データを挿入すると、オブジェクトに変換されます
    →revierコールバック関数、オブジェクトの作成プロセスを注意深く調整して結果値を変更する
  • stringfyある種類のオブジェクトを受信して文字列に変換する
    →replacerコールバック関数で、文字列を生成するプロセスを細かく調整することで結果値を変更

    • 配列をjsonに変換

    json = JSON.stringify(['apple', 'banana']);
console.log(json);

["apple","banana"]

    objectをjsonに変換


    変換するオブジェクトをstringifyで渡す
    const rabbit = {
  name: 'tori',
  color: 'white', 
  size: null,
  birthDate: new Date(),
	Symbol: Symbol('id'),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-06-24T11:57:15.839Z"}
  • 「jump」関数はjsonに含まれない→objectにないデータ
    JSONは
  • JSのデータ「Symbol」を含まない
    json = JSON.stringify(rabbit, ["name"]);
console.log(json);
// {"name":"tori"}
  • ご希望のPropertyのみを選択して定義した場合、対応するPropertyのみがJSON
    • に変換されます.
    json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'ellie' : value;
});
console.log(json);
// {"name":"ellie","color":"white","size":null,"birthDate":"2021-06-24T12:14:00.729Z"}
  • コールバック関数を使用して値
    • を変換できます.

    JSONを対象に変換


    変換するJSONをparseで渡す
    json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
// {name: "tori", color: "white", size: null, birthDate: "2021-06-24T12:27:36.526Z"}
    rabbit.jump(); // can jump!

obj.jump(); // Uncaught TypeError: obj.jump is not a function at json.js:44
  • 変換後のオブジェクトはシリアル化されたJSONから再作成されているため、シリアル化中に関数
    • は含まれない.
    JSON講座の後です.
  • JS 11. ひどうきコールバックかんすう
  • JS 12. 保証する
  • JS 13. async & await
    • この三つの授業があって、進度を続けるより、今まで学んだことを復習したほうがいいので、途中で降りました.エリーが教えてくれたことは详しくても、私が全部受け入れられなかったことで起こったこと.🥲
    また、モダンJavaScriptチュートリアルという良いサイトを知っていたので、以前にバージョンで整理した概念を補足して修正しています.学んだことを全部整理するには、また一日以上かかります.
    IntelliJ IDEAでIntelliJIdea転送操作
    (Back To The Basicパイソン問題庫)013 for Moon[3]for~else