あなたはJSON.stringfyの使用状況を知ることができません

EDITORIAL

JSON.stringfy()それはにJavaScriptオブジェクトであるJSONの中にフォーマット文字列の標準的な方法。その内部に多くのJavaScriptフレームワークは、使用されますJSON.stringify()：エクスプレスさんres.json()、Axiosさんpost、そしてWebPACKの統計は、彼らが呼び出されるJSON.stringify()と、エラーケースが含まれています。

はじめは簡単です

すべての近代的なJavaScriptのサポート実行時にはJSON.stringify()、さえIE8はそれをサポートしています。以下は、単純なオブジェクトにあるJSON例：

const obj = { answer: 42 };

const str = JSON.stringify(obj);
str; // '{"answer":42}'
typeof str; // 'string'

あなたはしばしば見ることができるJSON.stringify()とJSON.parse()、このモデルが実現することであるとして、次のコードのように、シーンの使用と一緒に深いコピーの方法のいずれかのを：

const obj = { answer: 42 };
const clone = JSON.parse(JSON.stringify(obj));

clone.answer; // 42
clone === obj; // false

エラーとエッジケース

JSON.stringify()循環参照の変換オブジェクトの存在下でスローされ、エラーを。もっと簡単に言えば、それはオブジェクト自体を指す性質を持っているならば、ということであるJSON.stringify()ような、エラーがスローされます。

const obj = {};
// 存在循环引用的对象，它指向它本身
obj.prop = obj;

// 会抛出 "TypeError: TypeError: Converting circular structure to JSON" 异常
JSON.stringify(obj);

これは、JSON.stringify()あなたがない限り、カスタム宣言することで、唯一のケースは例外がスローされますtoJSON()方法やreplacer機能を。それにもかかわらず、あなたはまだしなければならないJSON.stringify()に含まtry/catch循環参照は、実際には非常に共通しているため、ステートメント。

一方、次の例との境界の一部は、JSON.stringify()およびエラーをスローしませんが、あなたは期待するかもしれないが、それはエラーをスローします。例えば、JSON.stringify()それがされますNaNとInfinityに変換しますnull：

const obj = { nan: parseInt('not a number'), inf: Number.POSITIVE_INFINITY };

JSON.stringify(obj); // '{"nan":null,"inf":null}'

JSON.stringify()これらの値は、直接省略されるfunctionsとundefined、次のような特性は：

const obj = { fn: function() {}, undef: undefined };

// 它会返回空对象
JSON.stringify(obj); // '{}'

フォーマット

JSON.stringify()最初のパラメータが配列にあるJSONオブジェクト。JSON.stringify()実際には3つのパラメータを受け取り、そして第三引数が呼び出されますspaces。spacesパラメータは、フォーマットの可読性向上させるためのアプローチを採用することにより、使用されているJSON文字列を。

あなたはタイプ渡すことができますstringまたはパラメータを。場合であり、それは、右のようなそのインデントスペースを増加させるが、各キーのための別々の行に配置されます。numberspacesspacesundefinedJSON.stringify()

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// '{"a":1,"b":2,"c":3,"d":{"e":4}}'
JSON.stringify(obj);

// {
//   "a": 1,
//   "b": 2,
//   "c": 3,
//   "d": {
//     "e": 4
//   }
// }
JSON.stringify(obj, null, '  ');

// 数字 2 会达到和上面一样的效果，它代表空格的个数
JSON.stringify(obj, null, 2);

spaces 我々は通常、そのようなことは下線ことができるようにスペースを使用しますが、文字列は、スペースがありません。

// {
// __"a": 1,
// __"b": 2,
// __"c": 3,
// __"d": {
// ____"e": 4
// __}
// }
JSON.stringify(obj, null, '__');

代替品

JSON.stringify()2番目のパラメータは、あるreplacer機能。上記の例では、それは同じですnull。JavaScriptのオブジェクトは、各呼び出しのためのキーと値のペア持っているreplacer機能を、その戻り値は、次のような、フォーマット後の値として使用されます。

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// 使每个属性的值递增 1
// '{"a":2,"b":3,"c":4,"d":{"e":5}}'
JSON.stringify(obj, function replacer(key, value) {
  if (typeof value === 'number') {
    return value + 1;
  }
  return value;
});

replacer機能機密データが省略されたときに、非常に便利。あなたがすべて含まれて省略したいとpassword属性を：

const obj = {
  name: 'Jean-Luc Picard',
  password: 'stargazer',
  nested: {
    hashedPassword: 'c3RhcmdhemVy'
  }
};

// '{"name":"Jean-Luc Picard","nested":{}}'
JSON.stringify(obj, function replacer(key, value) {
  // 这个函数会被调用 5 次，这里的 key 依次为：
  // '', 'name', 'password', 'nested', 'hashedPassword'
  if (key.match(/password/i)) {
    return undefined;
  }
  return value;
});

`toJSON` 方法

JSON.stringify()同時に物体を横断する方法は、を有するものに焦点を当てるtoJSON()プロパティメソッド。それが見つかった場合toJSON()の方法を、JSON.stringify()それのような、フォーマット後の戻り値の値を置き換えます、それを呼び出します。

const obj = {
  name: 'Jean-Luc Picard',
  nested: {
    test: 'not in output',
    toJSON: () => 'test'
  }
};

// '{"name":"Jean-Luc Picard","nested":"test"}'
JSON.stringify(obj);

toJSON()メソッドは、オブジェクト、塩基の種類、または含む、任意の値を返すことができますundefined。あなたがいる場合toJSON()返しundefined、JSON.stringify()あなたは、このプロパティは無視されます。

多くのJavaScriptモジュールtoJSON()複雑なオブジェクトなどの一連の正しさを保証するMongoose documentsとMomentオブジェクトを。

遂に

JSON.stringify()JavaScriptは、より基本的なアプローチの中核です。多くのライブラリやフレームワークは、それのため、深い理解、その内部にそれを使用するあなたのお気に入りの有効活用に役立つことができますnpmモジュールを。たとえば、あなたはエクスプレスREST APIを使用することができますtoJSONネイティブフォーマットするための方法Dateのタイプ、またはAxiosを、正しく、オブジェクトがHTTP経由で循環参照要求が含まれている送信することが可能です。

オリジナルリンク：http://thecodebarbarian.com/the-80-20-guide-to-json-stringify-in-javascript.html

ます。https：//www.jianshu.com/p/8c29f32dee07で再現