Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSON & Object Tips

JSON & Object Tips

The slide provides detailed insights into advanced techniques and tips for using JSON and JavaScript objects. It covers topics like the use of JSON.stringify, including its definition, functionalities, and how it goes beyond simple stringification of JSON. The slide delves into the use of the replacer function in JSON.stringify, explaining its purpose and demonstrating its application with code examples. Additionally, it touches on performance aspects, comparing JSON.stringify with other methods and suggesting more efficient alternatives like typia. The latter part of the slide focuses on structuredClone for object copying, highlighting its specifications and limitations compared to traditional JSON methods.


More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming


  1. Who Name 青野健利 GitHub @brn Twitter @brn227 What Dev Lead

    at 株式会社AI Shift Contributor of V8 Javascript Engine
  2. replacerとは? JSON.stringify function replacer(key, value) { // ϓϩύςΟΛϑΟϧλʔ͢Δ if (typeof

    value === "string") { return undefined; } return value; } var foo = { foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7, }; JSON.stringify(foo, replacer); // '{"week":45,"month":7}'
  3. replacerで巡回 JSON.stringify JSON.stringify({a: {b: {c: 1}}}, (...args) => {console.log(JSON.stringify(args));return args[1]},

    "") // ["",{"a":{"b":{"c":1}}}] // ["a",{"b":{"c":1}}] // ["b",{"c":1}] // ["c",1] // '{"a":{"b":{"c":1}}}'
  4. TypeScriptの型情報を使いたい typia type User = { firstName: string; lastName: string;

    age: number; reg: RegExp; }; console.log( typia.json.stringify<User>({ firstName: "Matteo", lastName: "Collina", age: 32, reg: /"([^"]|\\")*"/, }) );
  5. console.log( ((input) => { const $io1 = (input) => "string"

    === typeof input.source && "boolean" === typeof input.global && "boolean" === typeof input.ignoreCase && "boolean" === typeof input.multiline && "number" === typeof input.lastIndex && "string" === typeof input.flags && "boolean" === typeof input.sticky && "boolean" === typeof input.unicode && "boolean" === typeof input.dotAll; const $string = typia.json.stringify.string; return `{"firstName":${$string(input.firstName)},"lastName":${$string( input.lastName )},"age":${input.age},"reg":${`{"source":${$string( input.reg.source )},"global":${input.reg.global},"ignoreCase":${ input.reg.ignoreCase },"multiline":${input.reg.multiline},"lastIndex":${ input.reg.lastIndex },"flags":${$string(input.reg.flags)},"sticky":${ input.reg.sticky },"unicode":${input.reg.unicode},"dotAll":${input.reg.dotAll}}`}}`; })({ firstName: "Matteo", lastName: "Collina", age: 32, reg: /"([^"]|\\")*"/, }) );
  6. 他にも色々あります typia // RUNTIME VALIDATORS export function is<T>(input: unknown): input

    is T; // returns boolean export function assert<T>(input: unknown): T; // throws TypeGuardError export function validate<T>(input: unknown): IValidation<T>; // detailed // JSON FUNCTIONS export namespace json { export function application<T>(): IJsonApplication; // JSON schema export function assertParse<T>(input: string): T; // type safe parser export function assertStringify<T>(input: T): string; // safe and faster } // PROTOCOL BUFFER export namespace protobuf { export function message<T>(): string; // Protocol Buffer message export function assertDecode<T>(buffer: Uint8Array): T; // safe decoder export function assertEncode<T>(input: T): Uint8Array; // safe encoder } // RANDOM GENERATOR export function random<T>(g?: Partial<IRandomGenerator>): T;
  7. Structured Clone の仕様 structuredClone • Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DataCloneError 例外が 発生します。

    • DOM ノードを複製するときも同様に DataCloneError 例外発生します。 • 一部のオブジェクトのプロパティは保持されません。 • RegExp オブジェクトの lastIndex フィールドは保持されません。 • プロパティ記述子、セッター、ゲッター(もしくは同様のメタデータ系機能)は複製されません。 たとえば、あるオブジェク トがプロパティ記述子によって読み取り専用になっている場合でも、複製したものでは既定の条件である読み取り/書 き込みに変わります。 • プロトタイプチェーンは探索、複製されません。