[TIL] JavaScript: JSON

2917 ワード
TIL json テキストリンク
🔑 Point
🎉 JSONとは?
🎉 stringify (Object to JSON)
🎉 parse (JSON to Object)

1. JSON?


JSONファイルにデータをインポート~!


JavaScript理論を学ぶ過程で、どこからデータを取得するかに興味を持っています.バックエンドなどいろいろな方法を使っていますが、今回はJSONを学びました.サーバとデータをやり取りするときに使う方法の一つです.(Javascript Object Notation)
fetch()APIを使用して通信できます.

JSONとは？

  • JSONは、ファイルの送受信に最も簡単なファイルフォーマットです.
  • テキストベースの軽量レベルのファイルフォーマット.(読みやすい)
  • キーと値で構成されます.Object{key : value}
  • データは、サーバとのシリアル化(シーケンス化)および伝送のために使用される.
  • プログラミング言語またはプラットフォームを使用できます.(C, C++ JAVA., GO... )ほとんどの言語とは関係ありません.

    • クライアントからサーバに送信する場合は配列で送信し、逆にサーバptjクライアントからインポートする場合はコミットで入力します.
    これを実現するJSON APIには2種類あります.

    2. JSON APIs


    1)オブジェクトからJSON:stringfy(*シリアル)


    クライアントからサーバにデータを転送する場合は、データを配列に変換する必要があります.stringfy APIを使用します.
  • はJSON、
    • に並んでいます
    json = JSON.stringify(['apple', 'banana']);
console.log(json);  

// ["apple","banana"] 출력 
// ->배열 type처럼 보이면서 ""로 나옴(json 규격)
  • objectをJSON
    • に変換
    const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};
json = JSON.stringify(rabbit);
console.log(json);

// {"name":"tori","color":"white","size":null,"birthDate":"2021-03-08T04:44:40.392Z"}

// jump 함수는 나오지 않는다. 왜냐하면 함수는 object에 있는 data가 아니기 때문에~!!!
// 또한 그 외에 javascript에만 있는 특별한 data도 JSON에 포함되지 않는다!
  • コールバック関数を使用してより細かい制御を行う場合.
    • json = JSON.stringify(rabbit, (key, value) => { 
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'hyojin' : value;
});
console.log(json); 

// 이름이 hyojin으로 바뀜
// {"name":"hyojin","color":"white","size":null,"birthDate":"2021-02-21T07:23:17.637Z"}

    2）JSON to Object：parse（*分析）

    const obj = JSON.parse(json, (key, value) => { // --> A
  console.log(`key: ${key}, value: ${value}`); 
  return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj); // {name: "hyojin", color: "white", size: null, birthDate: Mon Mar 08 2021 13:44:40 GMT+0900 (대한민국 표준시)}

rabbit.jump(); // can jump!
// Error (rabbit->JSON(함수x)->obj(함수x))

console.log(rabbit.birthDate.getDate()); 
// 8 (오늘 날짜, Date()라는 object)
console.log(obj.birthDate.getDate()); 
// 8 --> A 에서 key와 value를 이용해 Date를 return해 줘서 Error가 안남
    ✅ overloading
    -->関数の名前は同じですが、異なるパラメータと、複数のパラメータが渡され、異なる方法で呼び出すことができます.
    Android5.0キーklファイルロードプロセス分析
    HDU 2222(ACオートマトンの2種類のテンプレート)