В этом руководстве мы узнаем о JSON. Мы рассмотрим структуру JSON, различные типы данных и способы использования JSON внутри JavaScript.
JSON - одна из важнейших концепций, которую вы можете изучить как программист или QA.
На протяжении всей карьеры программиста вы будете использовать JSON постоянно, будь то создание API, использование API или создание файлов конфигурации для вашего приложения.
JSON, который обозначает нотацию объектов JavaScript, представляет собой просто формат представления данных, очень похожий на XML или YAML.
Он широко используется в Интернете почти для каждого API, к которому вы будете обращаться, а также для файлов конфигурации и таких вещей, как игры и текстовые редакторы.
Пример JSON:
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
Мы используем JSON, потому что его очень легко отправлять в HTTP-запросах и ответах из-за небольшого размера файла.
Его легче читать по сравнению с чем-то вроде XML, поскольку он намного чище, и здесь не так много открывающих и закрывающих тегов, о которых нужно беспокоиться.
JSON также очень хорошо интегрируется с JavaScript, поскольку JSON - это всего лишь подмножество JavaScript, а это означает, что все, что вы пишете в JSON, является допустимым JavaScript.
Почти каждый основной язык имеет ту или иную форму библиотеки или встроенных функций для синтаксического анализа строк JSON на объекты или классы на этом языке.
Это упрощает работу с данными JSON внутри языка программирования.
Теперь, когда мы понимаем, что такое JSON и почему он важен, давайте погрузимся в некоторый задействованный синтаксис и типы данных, которые может представлять JSON.
Как мы знаем, JSON - это формат представления данных, поэтому нам нужно иметь возможность представлять в нем определенные типы данных.
JSON изначально поддерживает:
Давайте рассмотрим пример использования json внутри файла.
Первое, что вам нужно сделать, это создать файл с .json
расширение в конце.
Мы собираемся создать user.json
файл с пользовательским объектом, представленным как JSON.
Для создания объекта нам нужно использовать открывающую и закрывающую фигурные скобки {}
а затем внутри него мы поместим все пары ключ-значение, составляющие наш объект.
Каждое отдельное свойство внутри JSON представляет собой пару «ключ-значение». Ключ должен быть окружен двойным ''
кавычки, за которыми следует двоеточие :
а затем значение для этого ключа.
Если у нас есть несколько пар ключ-значение, нам нужны запятые ,
разделяя каждую из наших пар ключ-значение, аналогично тому, как мы создаем массив в обычном языке программирования.
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
В приведенном выше примере у нас есть файл с именем user.json
. Внутри файла у нас есть разные типы данных.
Ключи всегда заключаются в двойные кавычки. Для значений только строковый тип заключен в двойные кавычки.
В примере:
string
integer
boolean
Array
Array of Objects
Предположим, у нас есть файл JSON с именем companies.json
который представляет собой массив объектов компании:
[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]
В приведенном выше примере у нас есть два объекта компании внутри массива JSON.
Теперь давайте посмотрим, как мы можем использовать указанный выше JSON внутри JavaScript.
В большинстве сценариев мы получаем JSON в виде строки, а не объекта JSON. Чтобы подражать этому, мы представляем указанный выше JSON в виде строки внутри JavaScript.
Наш html файл выглядит так:
JSON Example
let companies =
`[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
}
]`
console.log(JSON.parse(companies))
Когда мы проверяем журнал консоли в Chrome Developer Tools, результат такой же, как показано ниже:
Затем мы можем проанализировать указанный выше JSON, указав, что мы хотим извлечь. Например, если бы мы хотели получить название первой компании в массиве, мы бы использовали:
console.log(JSON.parse(
companies[0].name )) Output: Big corporate
Аналогичным образом, чтобы получить рейтинг второй компании, мы будем использовать:
console.log(JSON.parse(
companies[1].rating )) Output: 4.3
Теперь предположим, что у нас есть объект JavaScript, подобный показанному ниже:
JSON Example
var person = {
name: 'Brad',
age: 35
}
Чтобы преобразовать объект JavaScript человека в JSON, мы используем stringify
метод:
jsonPerson = JSON.stringify(person);
Результатом является действительный JSON:
{
'name': 'Brad',
'age': 35 }
Примечание:console.log(jsonPerson.name)
отпечатки неопределенный . Чтобы получить значение, мы должны преобразовать JSON обратно в объект JavaScript.Чтобы все это работало, нам нужно преобразовать JSON обратно в объект JavaScript.
Чтобы преобразовать указанный выше объект JSON обратно в JavaScript, мы используем parse
метод:
jsPerson = JSON.parse(jsonPerson)
Примечание:Если бы мы попробовали console.log(jsPerson.name)
мы получаем 'Брэд'.
JSON Example
var person = {
name: 'Brad',
age: 35
}
jsonPerson = JSON.stringify(person); //convert to JSON
console.log(jsonPerson.name); //undefined
jsPerson = JSON.parse(jsonPerson); //convert to JS Object
console.log(jsPerson.name); //Brad
Типы данных:
[]
Правила синтаксиса JSON:
{'name': 'value'}
Надеюсь, вы нашли этот учебник JSON с Javascript полезным. Теперь вы можете писать простые и сложные файлы JSON и взаимодействовать со строками JSON внутри JavaScript.