Введение
Нотация объектов JavaScript (JSON) — это облегченный формат обмена данными, который легко читать и писать людям, а машинам легко анализировать и генерировать. В этом сообщении блога мы рассмотрим различные способы работы с JSON в JavaScript, включая синтаксический анализ, преобразование в строки и некоторые продвинутые методы.
Основы JSON
JSON — это текстовый формат, полностью независимый от языка, но использующий соглашения, знакомые программистам языков семейства C, включая C, C++, C#, Java, JavaScript, Perl, Python и многие другие. JSON представляет простые структуры данных и объекты с помощью пар ключ-значение, также известных как «объекты» в JavaScript.
Простой объект JSON выглядит так:
{
"firstName": "John",
"lastName": "Doe",
"age": 30,
"isStudent": false
}
Разбор JSON
Чтобы работать с данными JSON в JavaScript, нам нужно их проанализировать. Метод JSON.parse() используется для преобразования строки JSON в объект JavaScript. Вот пример:
const jsonString = '{"firstName":"John","lastName":"Doe","age":30,"isStudent":false}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.firstName); // Output: John
Строка JSON
И наоборот, если мы хотим преобразовать объект JavaScript в строку JSON, мы можем использовать метод JSON.stringify():
const jsonObject = {
firstName: "John",
lastName: "Doe",
age: 30,
isStudent: false
};
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Output: '{"firstName":"John","lastName":"Doe","age":30,"isStudent":false}'
Получение JSON из API
Во многих случаях вам потребуется получать данные JSON из API. Функция fetch() используется для выполнения сетевых запросов и обработки ответов в JavaScript:
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error fetching data:", error));
Расширенные методы JSON
Настройка JSON.parse() с функцией оживления
Вы можете использовать функцию оживления в качестве второго аргумента JSON.parse() для преобразования результирующего объекта перед его возвратом:
const jsonString = '{"firstName":"John","lastName":"Doe","age":30,"isStudent":false}';
const jsonObject = JSON.parse(jsonString, (key, value) => {
if (key === "age" && value < 18) {
return "minor";
}
return value;
});
console.log(jsonObject); // Output: { firstName: 'John', lastName: 'Doe', age: 30, isStudent: false }
Настройка JSON.stringify() с помощью функции замены
Точно так же вы можете использовать функцию-заменитель в качестве второго аргумента для JSON.stringify(), чтобы изменить процесс стробирования:
const jsonObject = {
firstName: "John",
lastName: "Doe",
age: 30,
isStudent: false
};
const jsonString = JSON.stringify(jsonObject, (key, value) => {
if (key === "age" && value < 18) {
return "minor";
}
return value;
});
console.log(jsonString); // Output: '{"firstName":"John","lastName":"Doe","age":30,"isStudent":false}'
Работа с JSON и промисами
При работе с асинхронным кодом, например при получении данных JSON из API, обычно используются промисы. Вот пример того, как обернуть функцию парсинга JSON промисом:
function parseJsonAsync(jsonString) {
return new Promise((resolve, reject) => {
try {
const result = JSON.parse(jsonString);
resolve(result);
} catch (error) {
reject(error);
}
});
}
const jsonString = '{"firstName":"John","lastName":"Doe","age":30,"isStudent":false}';
parseJsonAsync(jsonString)
.then((jsonObject) => console.log(jsonObject))
.catch((error) => console.error("Error parsing JSON:", error));
Заключение
В этом сообщении блога мы рассмотрели различные аспекты работы с JSON в JavaScript, от основ анализа и преобразования JSON в строки до извлечения данных из API и передовых методов. Поняв эти концепции, вы будете хорошо подготовлены для работы с данными JSON в своих проектах JavaScript.
- Руководство Mozilla Developer Network по JSON
- Веб-документы MDN по JSON.stringify()
