JavaScript での JSON 処理をマスターする: 解析と文字列化

JavaScript での JSON 処理 (解析と文字列化)

JSON (JavaScript Object Notation) は、人間が読み書きしやすく、マシンが解析して生成しやすい軽量のデータ交換形式です。 JavaScript には、JSON 文字列をオブジェクトに解析し、オブジェクトを JSON 文字列に変換するための組み込みメソッドが用意されています。

---

1. JSON 文字列の解析

JSON.parse() メソッドは、JSON 文字列を JavaScript オブジェクトに変換するために使用されます。

構文

JSON.parse(text[, reviver]);

• text: 解析される JSON 文字列。
• reviver (オプション): 解析されたオブジェクトを返す前に変換する関数。

例

A.単純な解析

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

B.リバイバー機能を使う
reviver 関数を使用して、解析プロセスをカスタマイズできます。

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

エラー処理

無効な JSON を処理するには、常に JSON.parse() を try...catch ブロックでラップします。

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2. JavaScript オブジェクトの文字列化

JSON.stringify() メソッドは、JavaScript オブジェクトを JSON 文字列に変換します。

構文

JSON.stringify(value[, replacer[, space]]);

• value: 文字列化されるオブジェクト。
• replacer (オプション): プロパティをフィルタリングするための関数または配列。
• スペース (オプション): 読みやすくするためにインデントを追加します。

例

A.単純な文字列化

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

B.置換関数の使用
replacer 関数は、オブジェクトのプロパティをフィルターまたは変換します。

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

C.インデントの追加
space パラメーターは、インデントを使用して出力をフォーマットします。

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

エラー処理

オブジェクト内の循環参照により、JSON.stringify() がエラーをスローします。

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3.実際の使用例

A.サーバーへのデータの送信

HTTP リクエストで送信する前に、JavaScript オブジェクトを JSON 文字列に変換します。

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

B.ローカル ストレージにデータを保存する

localStorage を使用して JSON 形式でデータを保存および取得します。

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

C.オブジェクトのディープコピー

JSON メソッドを使用してオブジェクトのディープ コピーを作成します (関数または循環参照では機能しません)。

JSON.parse(text[, reviver]);

---

4. JSON オブジェクトと JavaScript オブジェクトの違い

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5.概要

• JSON.parse() を使用して、JSON 文字列を JavaScript オブジェクトに変換します。
• JSON.stringify() を使用して、JavaScript オブジェクトを JSON 文字列に変換します。
• JSON は、Web アプリケーション、特に API やローカル ストレージでのデータ交換に不可欠です。
• JSON を解析または文字列化するときに常にエラーを処理します。

JSON 処理をマスターすることは、最新のデータ駆動型 Web アプリケーションを構築するために不可欠なスキルです。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript での JSON 処理をマスターする: 解析と文字列化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。