JavaScript JSON.stringify() の使用法の概要

1. 使用方法

1. 基本的な使い方

JSON.stringify() は、JavaScript オブジェクトを JSON 文字列にシリアル化できます。

json1 = {
  タイトル: "Json.stringify",
  著者：
    「波の上のボート」
  ]、
  年: 2021
};
jsonText を JSON.stringify(json1) にします。

デフォルトでは、JSON.stringify() はスペースやインデントのない JSON 文字列を出力するため、jsonText の値は次のようになります。

"{"title":"Json.stringify","author":["浪里行舟"],"year":2021}"

JavaScript オブジェクトをシリアル化する場合、すべての関数とプロトタイプのメンバーは結果から意図的に省略されます。さらに、値が未定義のプロパティはスキップされます。最終結果は、すべてのインスタンス属性が有効な JSON データ型である表現になります。

JSON.stringify() メソッドは合計 3 つのパラメータを受け入れることができ、そのうち 2 つはオプションです (2 番目と 3 番目のパラメータ)。これら 2 つのオプションパラメータを使用して、JavaScript オブジェクトをシリアル化する他の方法を指定できます。 2 番目の引数はフィルターであり、配列または関数にすることができます。3 番目の引数は、結果の JSON 文字列をインデントするためのオプションです。これらのパラメータを単独または組み合わせて使用することで、JSON シリアル化をより細かく制御できます。

2. 2番目のパラメータ - フィルター

2 番目の引数が配列の場合、JSON.stringify() によって返される結果には、配列にリストされているオブジェクトプロパティのみが含まれます。たとえば、次の例をご覧ください。

json1 = {
  タイトル: "Json.stringify",
  著者：
    「波の上のボート」
  ]、
  年: 2021,
  たとえば、「フロントエンド」、
  ウェイシン: 'frontJS'
};
jsonText を JSON.stringify(json1, ['weixin']);

この例では、JSON.stringify() メソッドの 2 番目のパラメーターは、単一の文字列「weixin」を含む配列です。これはシリアル化されるオブジェクト内のプロパティに対応するため、結果の JSON 文字列にはこのプロパティのみが含まれます。

「{"weixin":"frontJS"}」

2 番目の引数が関数の場合、動作はまた異なります。提供された関数は、属性名 (キー) と属性値 (値) の 2 つのパラメータを受け取ります。このキーに基づいて、対応する属性に対して実行する操作を決定できます。キーは常に文字列ですが、値がキー/値のペアに属していない場合は空の文字列になります。

定数学生 = [
  {
    名前: 'ジェームズ',
    スコア: 100,
  }, {
    名前: 'ジョーダン',
    スコア: 60,
  }, {
    名前: 'kobe',
    スコア: 90,
  }
];

関数置き換え(キー, 値) {
  if (キー === 'スコア') {
    （値 === 100）の場合{
      'S' を返します。
    } それ以外の場合 (値 >= 90) {
      'A' を返します。
    } それ以外の場合 (値 >= 70) {
      'B' を返します。
    } それ以外の場合 (値 >= 50) {
      'C' を返します。
    } それ以外 {
      'E' を返します。
    }
  }
  戻り値;
}
console.log(JSON.stringify(生徒、置き換え用文字列、4))

上記のコードでは、replacer を使用してスコアをパーセンテージからグレードに置き換えます。

注意すべき点は、stringify の 2 番目のパラメータが関数であり、その戻り値が未定義の場合、対応するプロパティはシリアル化されないことです。他の値が返された場合、元の値の代わりに戻り値がシリアル化に使用されます。

3. 3番目のパラメータ - 文字列のインデント

JSON.stringify() メソッドの 3 番目のパラメータは、インデントおよびスペースを制御します。このパラメータが数値の場合、インデントの各レベルのスペース数を示します。たとえば、レベルごとに 4 つのスペースをインデントするには、次のようにします。

json1 = {
  タイトル: "Json.stringify",
  著者：
    「波の上のボート」
  ]、
  年: 2021
};
jsonText を JSON.stringify(json1, null, 4); とします。

結果の jsonText 形式は次のようになります。

{
    "タイトル": "Json.stringify",
    "著者"： [
        「波の上のボート」
    ]、
    「年」: 2021
}

JSON.stringify() は、データを処理する際に、データ変換と読みやすさの両方を考慮します。しかし、読みやすさは見落とされがちです。

4. toJSON() メソッド - カスタム JSON シリアル化

場合によっては、オブジェクトに JSON.stringify() に基づくカスタム JSON シリアル化が必要になることがあります。この時点で、シリアル化するオブジェクトに toJSON() メソッドを追加できます。シリアル化では、このメソッドに基づいて適切な JSON 表現が返されます。

次のオブジェクトは、カスタムシリアル化用の toJSON() メソッドを追加します。

json1 = {
  タイトル: "Json.stringify",
  著者：
    「波の上のボート」
  ]、
  年: 2021,
  たとえば、「フロントエンド」、
  ウェイシン: 'frontJS',
  toJSON: 関数() {
    this.author を返す
  }
};
console.log(JSON.stringify(json1)); // ["波間に浮かぶボート"]

矢印関数は toJSON() メソッドの定義に使用できないことに注意してください。主な理由は、矢印関数がグローバルスコープにレキシカルスコープされているため、この場合は適切ではないことです。

2. 使用シナリオ

1. 配列にオブジェクトが含まれているかどうか、またはオブジェクトが等しいかどうかを判断します。

//配列にオブジェクトが含まれているかどうかを判断します。let data = [
    {name:'波間のボート'},
    {name:'フロントエンド職人'},
    {name:'フロントエンド開発'},
    ]、
    val = {name:'波間のボート'};
console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1); //true

JSON.stringify() メソッドを使用して、2 つのオブジェクトが等しいかどうかを判断することもできます。

// オブジェクトが等しいかどうかをチェックする let obj1 = {
    a: 1、
    2 倍
  }
  obj2 = {
    a: 1、
    b: 2,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // 真

しかし、この方法には大きな制限があります。オブジェクトがキーの順序を調整すると、誤って判断されてしまいます。

// オブジェクトキーの位置を調整した後 let obj1 = {
    a: 1、
    2 倍
  }
  obj2 = {
    b: 2,
    a: 1、
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // false

2. localStorage/sessionStorageを使用する場合

デフォルトでは、localStorage/sessionStorage は文字列しか保存できません。実際の開発では、オブジェクト型を保存する必要がある場合がよくあります。この場合、保存時に json.stringify() を使用してオブジェクトを文字列に変換し、ローカルキャッシュを取得するときに json.parse() を使用してオブジェクトに戻す必要があります。

//データを保存する関数setLocalStorage(key,val) {
    window.localStorage.setItem(キー、JSON.stringify(val));
};
// データを取得する function getLocalStorage(key) {
    val = JSON.parse(window.localStorage.getItem(key)); とします。
    戻り値:
};
// テスト setLocalStorage('Test',['フロントエンド職人','波の中のボート']);
console.log(getLocalStorage('テスト'));

3. オブジェクトのディープコピーを実装する

開発中は、元のデータに影響を与えることを恐れて、任意の操作を実行するためにデータのディープコピーを作成することがよくあります。ディープコピーを実現するには、JSON.stringify() と JSON.parse() を使用するのがよい選択です。

arr1 = [1, 3, {
    ユーザー名: 'kobe'
}];
arr2 = JSON.parse(JSON.stringify(arr1)) とします。
arr2[2].ユーザー名 = 'ダンカン';
 コンソールログ(arr1, arr2)

これは、JSON.stringify を使用してオブジェクトを JSON 文字列に変換し、JSON.parse を使用して文字列をオブジェクトに解析することです。このようにして、新しいオブジェクトが生成され、新しいオブジェクトは新しいスタックを開いてディープコピーを実現します。

この方法では、配列やオブジェクトのディープコピーを実現できますが、関数と正規表現は処理できません。これは、JSON.stringify と JSON.parse に基づいてこれら 2 つが処理された後、取得された正規表現は正規表現ではなくなり (空のオブジェクトになります)、取得された関数は関数ではなくなる (null になります) ためです。

arr1 = [1, 3, 関数() { }, {
  ユーザー名: 'kobe'
}];
arr2 = JSON.parse(JSON.stringify(arr1)) とします。
arr2[3].ユーザー名 = 'ダンカン';
コンソールログ(arr1, arr2)

3. 使用上の注意

JSON.stringify() は非常に強力ですが、一部のプロパティは文字列化できないため、予期しないバグを回避するために開発中に次の状況に注意する必要があります。

1. 変換された値にNaNとInfinityが含まれる

myObj = {
  名前:「波間のボート」
  年齢: 無限、
  お金: NaN、
};
console.log(JSON.stringify(myObj));
// {"name":"波の上をボートで走る","age":null,"money":null}

JSON.stringify([NaN, 無限大])
// [null,null]

2. 変換された値には、未定義の任意の関数とシンボル値が含まれています

2つの状況があります:

配列、未定義、任意の関数、シンボル値は、シリアル化中に null に変換されます。

JSON.stringify([未定義、関数() {}、シンボル("")]);
// '[null,null,null]'

配列以外、未定義、任意の関数、シンボルの値はシリアル化中に無視されます

JSON.stringify({ x: 未定義、 y: 関数 () { }、 z: シンボル("") });
// '{}'

3. 循環参照

オブジェクトのプロパティの値が間接的にオブジェクト自体を参照する場合、それは循環参照です。例えば：

バー = {
  a: {
    c:foo
  }
};
foo = {
  b: バー
};

JSON.stringify(foo)

この場合、シリアル化によってエラーが報告されます。

// エラーメッセージ Uncaught ReferenceError: foo が定義されていません
    <匿名>:3:8

4. 列挙できない属性値が含まれている場合

列挙不可能なプロパティはデフォルトでは無視されます。

personObj = Object.create(null, {
  名前: { 値: "波の中のボート", 列挙可能: false },
  年: { 値: "2021", 列挙可能: true },
})

console.log(JSON.stringify(personObj)) // {"year":"2021"}

IV. 結論

JSON.stringify() は、JavaScript オブジェクトを JSON 文字列にシリアル化するために使用されます。このメソッドには、フィルタリングや変更のプロセスを実装するためにデフォルトの動作を変更するために使用できるいくつかのオプションがあります。ただし、一部のプロパティは文字列化できないため、開発中はこれらの落とし穴を避ける必要があることに注意してください。

上記は、JavaScript JSON.stringify() の使い方の概要の詳細内容です。JavaScript JSON.stringify() の使い方の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません: