JSON.stringify のあまり知られていない使用法-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2019-11-30 17:39:12

転載

3062 人が閲覧しました

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

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); // {"name":"John","age":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) => { if (value instanceof Map) { return [...value.values()] } return value }) // {"name":"John","age":23,"hobbies":["coding","earn money"]}</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) => { if (typeof value === 'string') { return undefined } return value }) // {"age":23,"hobbies":{}}</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
この記事は

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

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