찾다
웹 프론트엔드JS 튜토리얼JSON 관련 지식 요약_json

JSON: JavaScript 객체 표기법

JSON 구문 규칙
이름/값 쌍의 데이터
데이터는 쉼표로 구분됩니다
중괄호는 객체를 저장합니다
대괄호는 배열을 저장합니다

JSON에는 6가지 유형의 값이 있습니다.

객체, 배열, 문자열, 숫자, 부울 값, null

JSON 객체는 순서가 지정되지 않은 이름/값 쌍의 모음입니다

이름: 임의의 문자열
값: 배열 및 객체를 포함한 모든 유형의 JSON 값(객체는 객체에 포함될 수 있음)
참고: JSON 문자열은 큰따옴표를 사용해야 합니다(작은따옴표는 오류를 보고합니다)

1. 객체

자바스크립트에서 리터럴 만들기:

var object = {
  name:"lily",
  age:22
};

또는:

var object = {
  "name":"lily",
  "age":22
}; 

JSON:

{
  "name":"lily",
  "age":22
} 

2. 배열

JSON 배열은 자바스크립트에서 배열 리터럴 형식을 사용합니다
확장자:
배열과 객체를 결합하면 더 복잡한 데이터 조합을 형성할 수 있습니다
예:

[
  {
    "name":"lily",
    "age":22,
    "job":"docter"
  },
  {
    "name":"nicy",
    "age":21,
    "job":"teacher"
  },
  {
    "name":"lily",
    "age":22,
    "job":"AE"
  }
]  

3. 파싱 및 직렬화

JSON은 JavaScript와 유사한 구문을 가지며 JSON 데이터 구조를 유용한 JavaScript 개체로 구문 분석할 수 있습니다

1.JSON 객체

JSON 데이터 보내기 및 받기

JSON 데이터 객체를 읽고 쓰고 보내고 받을 때 문자열로 변환해야 하며 문자열에서 JSON 데이터 객체로 변환할 수 있습니다. (자바스크립트와 동일하게 읽고 쓰세요)

JSON 객체에는 두 가지 메서드가 있습니다.
① stringify(): 자바스크립트 객체를 JSON 문자열로 직렬화
②parse(): JSON 문자열을 기본 자바스크립트 값으로 구문 분석합니다

예:

var book = {
  title:"professional JavaScript",
  authors:[
    "lily"
  ],
  edition:3,
  year:2011
};
var jsonText = JSON.stringify(book);
alert(jsonText);   //{"title":"professional JavaScript","authors":["lily"],"edition":3,"year":2011}
alert(typeof jsonText);   //string
var bookCopy = JSON.parse(jsonText);
alert(typeof bookCopy);   //object 

이 예에서 JSON.stringify()는 javascript 개체 책을 JSON 문자열로 직렬화한 다음 이를 jsonText에 저장하는 데 사용됩니다. JSON 문자열 jsonText를 JSON.parse()에 직접 전달하여 해당 javascript 값을 가져옵니다.


참고: JavaScript 개체를 직렬화할 때 최종 값은 유효한 JSON 데이터 유형의 인스턴스 속성이며 잘못된 값은 건너뜁니다.

2. 직렬화 옵션

JSON.stringify()는 JavaScript 객체를 직렬화할 때 두 개의 매개변수를 받을 수 있습니다
매개변수 1: 필터(배열 또는 함수일 수 있음)
매개변수 2: JSON 문자열
에서 들여쓰기를 유지할지 여부를 나타내는 옵션 1) 결과 필터링
필터 매개변수가 배열인 경우 JSON.stringify()의 결과에는 배열
에 나열된 속성만 포함됩니다. 예:

var book = {
  "title":"professional JavaScript",
  "authors":[
    "lily"
  ],
  edition:3,
  year:2011
}; 
var jsonText = JSON.stringify(book,["title","edition"]);
alert(jsonText); //{"title":"professional JavaScript","edition":3}
alert(typeof jsonText); // string 

2) 문자열 들여쓰기:
JSON.stringify() 메서드의 세 번째 매개변수는 결과의 들여쓰기 및 공백 문자를 제어하는 ​​데 사용됩니다.
3) toJSON() 메소드
객체가 고유한 JSON 데이터 형식을 반환하도록 toJSON() 메서드를 정의합니다.

4. JSON 액세스 값

첫 번째 유형: 단순 배열
['항목1','항목2','항목3']
값: 숫자 인덱스를 통해 포함된 값에 접근합니다(첫 번째 항목의 인덱스는 0입니다)

['항목1','항목2','항목3']
var 항목 = ['item1','item2','item3'];
경보(항목[0]); //항목1 
두 번째 유형: {}를 사용하여 객체와 배열을 나타냅니다
{ "키":"값" }
값: 키 이름을 통해 포함된 값에 액세스합니다

var oExample = { "이름":"백합" };
경보(oExample.name); // 백합
Alert(oExample["이름"]); // 백합 
이 두 가지 방법을 사용하면 많은 데이터 구조를 하위 레코드(명명 또는 숫자 인덱스 키 사용) 측면에서 설명할 수 있습니다.

예:

var oNovelist = {
  "firstName":"lily",
  "lastName":"russ",
  "novels":
      [
        {
          "title":"and choas died",
          "year":"1970"
        },
        {
          "title":"the famale man",
          "year":"1976"
        }
      ]
}; 
var msg = oNovelist.firstName+" "+oNovelist.lastName+"'s"+" "+oNovelist.novels[0].title+" "+"was published in"+oNovelist.novels[0].year;
alert(msg);   // lily russ's and choas died was published in1970  

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
VUE3怎么使用JSON编辑器VUE3怎么使用JSON编辑器May 12, 2023 pm 05:34 PM

1、先看看效果图,可以自行选择展示效果2、这是我在vue3项目中使用的JSON编辑器,首先引入第三方插件npminstalljson-editor-vue3yarnaddjson-editor-vue33、引入到项目中//导入模块importJsonEditorVuefrom'json-editor-vue3'//注册组件components:{JsonEditorVue},4、一般后端返回的是会将JSON转为String形式我们传给后端也是通过这种形式,就可以通

SpringBoot之Json的序列化和反序列化问题怎么解决SpringBoot之Json的序列化和反序列化问题怎么解决May 12, 2023 pm 04:07 PM

控制json序列化/反序列化1.@JsonIgnoreProperties的用法@JsonIgnoreProperties(value={"prop1","prop2"})用来修饰Pojo类,在序列化和反序列化的时候忽略指定的属性,可以忽略一个或多个属性.@JsonIgnoreProperties(ignoreUnknown=true)用来修饰Pojo类,在反序列化的时候忽略那些无法被设置的属性,包括无法在构造子设置和没有对应的setter方法.2.@Js

Java怎么调用接口获取json数据解析后保存到数据库Java怎么调用接口获取json数据解析后保存到数据库May 14, 2023 am 10:58 AM

Java调用接口获取json数据保存到数据库1.在yml文件中配置自己定义的接口URL//自己定义的JSON接口URLblacklist_data_url:接口URL2.在Controller中添加请求方法和路径/***@Title:查询*@Description:查询车辆的记录*@Author:半度纳*@Date:2022/9/2717:33*/@GetMapping("/Blacklist")publicvoidselectBlacklist(){booleana=imB

深入解析JWT(JSON Web Token)的原理及用法深入解析JWT(JSON Web Token)的原理及用法Jan 10, 2023 am 10:55 AM

本篇文章给大家带来了关于JWT的相关知识,其中主要介绍了什么是JWT?JWT的原理以及用法是什么?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。

java怎么校验json的格式是否符合要求java怎么校验json的格式是否符合要求May 15, 2023 pm 04:01 PM

JSONSchemaJSONSchema是用于验证JSON数据结构的强大工具,Schema可以理解为模式或者规则。JsonSchema定义了一套词汇和规则,这套词汇和规则用来定义Json元数据,且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范,规范包括成员、结构、类型、约束等。JSONSchema就是json的格式描述、定义、模板,有了他就可以生成任何符合要求的json数据json-schema-validator在java中,对json数据格式的校验,使用

php输出json无法解析的原因和解决方法【总结】php输出json无法解析的原因和解决方法【总结】Mar 23, 2023 pm 04:35 PM

PHP作为一种常见的编程语言,在web开发中使用广泛,其与前端交互的方式也多种多样。其中,输出Json数据是一种常见的交互方式,但有时候会碰到Json无法解析的问题。为什么会出现无法解析的情况呢?下面列举了几个可能的原因。

SpringBoot怎么返回Json数据格式SpringBoot怎么返回Json数据格式May 19, 2023 pm 11:49 PM

一、@RestController注解在SpringBoot中的Controller中使用@RestController注解即可返回JSON格式的数据。@RestController注解包含了@Controller和@ResponseBody注解。@ResponseBody注解是将返回的数据结构转换为JSON格式。@Target({ElementType.TYPE})@Retention(RetentionPolicy.RUNTIME)@Documented@Controller@Respons

php如何将xml转为json格式?3种方法分享php如何将xml转为json格式?3种方法分享Mar 22, 2023 am 10:38 AM

当我们处理数据时经常会遇到将XML格式转换为JSON格式的需求。PHP有许多内置函数可以帮助我们执行这个操作。在本文中,我们将讨论将XML格式转换为JSON格式的不同方法。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경