JSON.stringify のあまり知られていない使用法

JS には一般的な関数がたくさんあります。私たちはそれらを毎日使用するかもしれませんが、追加の関数のいくつかは知りません。 JSON.stringify という関数がありますが、今日はその特別な使い方を見てみましょう。

#基本

##JSON.stringify

メソッドは変数を受け取ります。 JSON表現に変換されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const boy = {    name: 'John',    age: 23  }; JSON.stringify(boy); // {&quot;name&quot;:&quot;John&quot;,&quot;age&quot;:23}</pre><div class="contentsignin">ログイン後にコピー</div></div>JSON は純粋な文字列であり、本質的には JS のサブセットであるため、すべての JS オブジェクトを JSON に変換できるわけではありません:

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy)
// {"name":"John","age":23,"hobbies":{}}

上記の例では、Map オブジェクトは次のようになります。無視され、通常のオブジェクトに変換されます。属性が関数の場合、この属性は無視されます。興味のある学生は試してみてください。

2 番目のパラメータ

JSON.stringify

は、 replacer と呼ばれる 2 番目のパラメータを受け取ることができます。 交換者。 文字列配列を渡すと、ホワイトリストと同様に、この配列内のプロパティのみが変換されます。

const boy = { 
  name: 'John', 
  age: 23
}

JSON.stringify(boy, ['name'])
// {"name":"John"}

この機能を使用すると、変換する必要がある属性のみを変換し、長い配列やエラー オブジェクトなどを除外できます。

この

replacer

パラメーターは関数を受け取ることもできます。この関数はオブジェクト全体を反復処理してキーと値を渡し、それらを置き換える方法を決定できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const boy = {    name: 'John',    age: 23,   hobbies: new Map([[0, 'coding'], [1, 'earn money']]) } JSON.stringify(boy, (key, value) =&gt; {   if (value instanceof Map) {     return [...value.values()]   }   return value }) // {&quot;name&quot;:&quot;John&quot;,&quot;age&quot;:23,&quot;hobbies&quot;:[&quot;coding&quot;,&quot;earn money&quot;]}</pre><div class="contentsignin">ログイン後にコピー</div></div>また、

unknown

を返すと (null を返すことは受け入れられません)、この属性は削除されます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">JSON.stringify(boy, (key, value) =&gt; {   if (typeof value === 'string') {     return undefined   }   return value }) // {&quot;age&quot;:23,&quot;hobbies&quot;:{}}</pre><div class="contentsignin">ログイン後にコピー</div></div>

#3 番目のパラメーター

3 番目のパラメーターspace

は、変換された JSON 文字列の間隔を制御します。

パラメータが数値の場合、スペースの数がインデントされます:

JSON.stringify(boy, null, 2)
// {
//   "name": "John",
//   "age": 23,
//   "hobbies": {}
// }

パラメータが文字列の場合、インデントはスペースの数になります:

JSON.stringify(boy, null, '--')
// {
//   --"name": "John",
//   --"age": 23,
//   --"hobbies": {}
// }

toJSON メソッド

変換するオブジェクトに toJSON

メソッドがある場合、シリアル化のプロセスをカスタマイズできます。オブジェクトをシリアル化する代わりに、メソッドから新しい値を返すことができます。この値は、元のオブジェクトの代わりにシリアル化されます。

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']]),
  toJSON() {
    return {
      name: `${this.name} (${this.age})`,
      favorite: this.hobbies.get(0)
    }
  }
}

JSON.stringify(boy)
// {"name":"John (23)","favorite":"coding"}

面白くないですか？場合によっては、いくつかのドキュメントを注意深く読むことが役立つことがあります~

参考記事

元のアドレス: https:// mp .weixin.qq.com/s/_e83_G7RjVt2eR_ro7blOA

• MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON / stringify

• この記事は
js チュートリアル

列からのものです。ぜひ学習してください。

以上がJSON.stringify のあまり知られていない使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。