Я всегда путаюсь между синтаксическим анализом и преобразованием функций JSON. Во время подготовки к экзамену на сертификат Microsoft я обнаружил, что они всегда сбивали меня с толку, поэтому я решил победить их раз и навсегда.

JSON.parse ()

JSON.parse () анализирует строку JSON. Но сначала давайте посмотрим, что означают синтаксический анализ и строка. Анализировать - значит разделить (предложение) на грамматические части и определить эти части и их отношения друг к другу. В компьютерном программировании строка традиционно представляет собой последовательность символов.

Когда мы получаем данные с веб-сервера, данные всегда представляют собой строку. Мы анализируем данные с помощью JSON.parse (), и это превращает данные в объект JavaScript. Перед анализом это просто строка, просто текст, и вы не можете получить доступ к данным, закодированным в нем. После анализа он становится объектом JavaScript, и вы можете получить доступ к данным.

const jsonString = '{"name": "Peter"}'; // this is a string
const object = JSON.parse(jsonString); // we convert it to an object
console.log(object.name); 
// prints Peter because we can access the data
console.log(jsonString.name); 
// prints undefined - we can't access the data from a string

Может быть предоставлена ​​дополнительная функция reviver, чтобы вы могли преобразовать данные перед их возвратом.

const jsonString = '{"name": "Peter", "age": 20}'; // a string
JSON.parse(jsonString, (key, value) =>
  typeof value === 'number'
    ? value * 2 // return value * 2 for all numbers 
    : value     // return everything else unchanged
);

// {name: "Peter", age: 40}

Помните, что JSON.parse () выдаст синтаксическую ошибку, если есть запятые в конце.

JSON.parse('[1, 2, 3, 4, ]'); // syntax error
JSON.parse('{"name" : "Peter", }'); // syntax error

JSON.stringify ()

JSON.stringify () преобразует объект JavaScript в строку JSON. При отправке данных на веб-сервер данные должны быть строкой. Мы можем преобразовать объект JavaScript в строку с помощью JSON.stringify ().

const object = { name: "Peter", age: 40};
const jsonString = JSON.stringify(object);
console.log(jsonString);
// {"name":"Peter","age":40}

JSON.stringify () может принимать 2 дополнительных аргумента. Первая - функция-заменитель, а вторая - строковое или числовое значение, используемое в качестве пробела в возвращаемой строке. Его также можно использовать для фильтрации значений, поскольку значения, возвращенные как неопределенные, не будут возвращены в строке.

const object = {
    id: 1,
    name: 'Peter',
    email: '[email protected]'
};

function replacer(key, value) {
    if (key === 'email') {
        return undefined;
    }
    return value; // will return everything except the email
}

const jsonString = JSON.stringify(object, replacer);
console.log(jsonString)
// "{"id":1,"name":"Peter"}"

Вы также можете вставить пробел в вывод для удобства чтения. Если это число, оно указывает количество пробелов, которые следует использовать, максимум 10, в то время как меньше 1 означает, что пробелы не должны использоваться. Если это строка, то в качестве пробела используется строка длиной не более 10 символов. Если этот параметр не указан или имеет значение null, пробелы не добавляются.

const object = {
    id: 1,
    name: 'Peter',
    email: '[email protected]'
};
const jsonStringSpace = JSON.stringify(object, null, '...');
const jsonStringNoSpace = JSON.stringify(object);

console.log(jsonStringSpace);
// {
// ..."id": 1,
// ..."name": "Peter",
// ..."email": "[email protected]"
// }

console.log(jsonStringNoSpace);
// {"id":1,"name":"Peter","email":"[email protected]"}

Другие методы, которые иногда путают, - это методы JQuery Serialize () и JQuery SerializeArray ().

Сериализовать ()

Метод JQuery Serialize () используется для создания текстовой строки в стандартной записи с кодировкой URL. Он используется в элементах управления формой, таких как ‹input›, ‹textarea› и т. Д. Он сериализует значения формы, чтобы их можно было использовать в строке запроса URL при выполнении запросов AJAX.

SerializeArray ()

Метод JQuery SerializeArray () создает массив объектов путем сериализации значений формы. Он очень похож на метод serialize (), но возвращает структуру данных JSON. Он возвращается не как строка, и если вам нужно, чтобы это была строка, вам придется вызвать для нее метод stringify.