JSON (JavaScript Object Notation) is one of the most important data exchange formats in modern web development. It is concise, readable, and naturally compatible with JavaScript. This article covers JSON core concepts, formatting tips, and best practices for parsing and serialization.

1. JSON Basics

JSON is a lightweight data interchange format designed to be easy for humans to read and write, and easy for machines to parse and generate. It is based on JavaScript object literal syntax but removes JavaScript features like comments, functions, and undefined, making it a pure data format. JSON supports the following data types:

Design Principles

JSON design follows several core principles: 1) Simplicity: using minimal syntax symbols to represent data; 2) Readability: using a text format that is easy for humans to understand; 3) Interoperability: independent of programming languages, any language can parse and generate it; 4) Structured: supporting nested object and array structures. These principles make JSON the preferred format for data exchange between web applications.

• Object: key-value pairs, using curly braces {}
• Array: ordered list of values, using square brackets []
• String: text wrapped in double quotes
• Number: integer or float
• Boolean: true or false
• null: empty value

2. JSON Formatting Tips

Formatting JSON improves readability, especially with complex data structures.

2.1 Pretty Print with JSON.stringify

const data = { name: 'John', age: 30, city: 'New York' };
const prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);
// {
//   "name": "John",
//   "age": 30,
//   "city": "New York"
// }

2.2 Compress JSON

When transmitting over network, compressed JSON reduces data size:

const compressed = JSON.stringify(data);
// {"name":"John","age":30,"city":"New York"}

3. JSON Parsing Tips

Error handling is important when parsing JSON strings:

3.1 Safe Parsing

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('Invalid JSON:', error);
    return null;
  }
}

const result = safeParse('{"name":"John"}');
if (result) {
  console.log(result.name); // John
}

3.2 Using reviver Function

The reviver function can transform values during parsing:

const json = '{"date":"2024-01-15","price":100}';
const data = JSON.parse(json, (key, value) => {
  if (key === 'date') return new Date(value);
  if (key === 'price') return value * 1.08; // add tax
  return value;
});
console.log(data.date); // Date object
console.log(data.price); // 108

4. Serialization Best Practices

4.1 Using replacer Function

const user = {
  name: 'John',
  password: 'secret123',
  createdAt: new Date()
};

const safeUser = JSON.stringify(user, (key, value) => {
  if (key === 'password') return undefined; // exclude
  if (value instanceof Date) return value.toISOString();
  return value;
});

4.2 Handling Circular References

Circular references cause JSON.stringify to throw errors, requiring special handling:

const obj = { name: 'A' };
obj.self = obj;

const seen = new WeakSet();
const json = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) return '[Circular]';
    seen.add(value);
  }
  return value;
});

5. Advanced Techniques

5.1 JSON Schema Validation

JSON Schema is used to validate the structure and content of JSON data:

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string', minLength: 1 },
    age: { type: 'number', minimum: 0 },
    email: { type: 'string', format: 'email' }
  },
  required: ['name', 'email']
};

const data = { name: 'John', age: 30, email: 'john@example.com' };
// 使用 ajv 库验证
const ajv = new Ajv();
const validate = ajv.compile(schema);
const valid = validate(data);

5.2 Performance Optimization

Performance optimization tips for handling large JSON data:

• Streaming parsing: Use streaming parsers for very large JSON to avoid memory overflow
• Cache parsed results: Parse the same JSON string only once
• Parse on demand: Only parse the parts of data you need
• Use binary formats: Consider MessagePack or Protocol Buffers for frequent data transfer

5.3 Common Errors and Debugging

Common error types in JSON processing:

6. JSON vs Other Formats

Choose the right data format:

8. Using Tudousi Tools for JSON

Tudousi Tools provides powerful JSON formatting tools to help you:

• Format compressed JSON data for easy reading
• Compress JSON data to reduce transmission size
• Validate JSON format correctness
• Support syntax highlighting display
• Support conversion between JSON and other formats

Use JSON Format Tool Now

9. Summary

JSON is an indispensable part of modern web development. Mastering formatting, parsing and serialization techniques, along with advanced Schema validation and performance optimization methods, allows you to process data more efficiently. Tudousi Tools' JSON formatting feature can significantly boost your productivity, especially when debugging and handling complex data structures.