집 > 기사 > 웹 프론트엔드 > JavaScript 학습 및 이해를 위한 JSON(요약 공유)

JavaScript 학습 및 이해를 위한 JSON(요약 공유)

WBOY앞으로: 2022-03-23 13:16:571752검색

이 글은 JSON 객체, JSON 배열, JSON 문자열 등 JSON과 관련된 이슈를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 모든 분들께 도움이 되기를 바랍니다.

관련 권장 사항: javascript 튜토리얼

1. JSON 개체

작업 설명

이 작업: JavaScript에서 JSON 개체 정의를 연습하세요.

구체적인 요구 사항은 다음과 같습니다.

key1, key2 및 key3의 세 가지 속성이 있는 JSON 개체를 정의합니다. 해당 값은 각각 a, b 및 c입니다.
라는 이름의 하나의 속성; 삭제가 완료된 후 나머지 모든 속성을 반복하고
로 구분된 각 속성의 값과 연결된 문자열을 반환합니다. JSON은 데이터 전송에 사용되므로, 먼저 저장해야 하며 데이터를 저장하려면 특정 데이터 형식이 필요합니다.
JSON에 일반적으로 사용되는 데이터 형식에는 JSON 개체, JSON 배열 및 JSON 문자열이 포함됩니다.

JSON 개체란 무엇입니까JSON 개체(일반적으로 JSON이라고 함)는 데이터를 저장하고 전송하는 데 사용되는 텍스트 데이터 교환 형식입니다. 예는 다음과 같습니다.

{"name":"Jerry", "age":15}

이것은 간단한 json 개체이며 해당 규칙은 다음과 같습니다.

文本数据的交换格式，用于存储和传输数据。示例如下：

var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}

这就是一个简单的json对象，它的规则是：

数据以键/值对的形式存在；
数据之间用逗号间隔；
大括号表示保存对象；
方括号表示保存数组。

JSON对象与Javascript对象的区别

JSON是基于JavaScript语法的，所以JSON中也有对象的概念，但是和JavaScript中的对象有一些小的区别。

定义一个JavaScript对象：

{"id":1,"name":"Peter Bruce","first name":"Bruce"}

定义一个JSON对象：

 {"a":1,"b":2.12,"c":true,"d":"string","e":null};

三点区别：

（1）JSON对象的属性名（key）必须被包含在双引号之中，而JavaScript对象除了有空格的属性名、中间有连字符-的属性名必须在双引号之中外，其它随意；
（2）不能在JSON对象中定义方法，而在JavaScript对象中可以；
（3）JSON对象可以被很多语言操作，而JavaScript对象只有JS自己可以识别。

定义JSON对象的方法如下

用一个{}包含在内，内部是若干个属性名和属性值构成的键值对，键值对之间用,隔开，属性名和属性值之间用:隔开，属性值可以是以下任意一种数据类型的数据：数字、字符串、JSON数组、JSON对象、null。如：

var jsonObject = {"name":"js","number":2};

属性值是JSON数组或者JSON对象的情况稍复杂，后面的关卡将介绍。

在JavaScript中使用JSON对象

支持JSON的语言都能够使用JSON对象，这里仅介绍在JavaScript中如何使用JSON对象。

在JavaScript中定义一个JSON对象：

console.log(jsonObject.name);
//读属性，输出jsconsole.log(jsonObject["name"]);
//读属性，输出jsjsonObject.name = "javascript";
//写属性，给name属性赋值javascript

操作属性，使用.或者[]데이터는 키/값 쌍 형식으로 존재합니다.

데이터는 쉼표로 구분됩니다.

대괄호는 배열 저장을 나타냅니다.

JSON 개체와 Javascript 개체의 차이점

JSON은 JavaScript 구문을 기반으로 하므로 JSON에도 개체 개념이 있지만 JavaScript의 개체와는 약간의 차이가 있습니다.

JavaScript 객체 정의:

var jsonObject = {"name":"js","number":2};
delete jsonObject.name;
//删除name属性

JSON 객체 정의:

var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //依次输出js、2}

세 가지 차이점:

JSON 개체의 속성 이름(키)은 큰따옴표로 묶어야 하며

Methods

는 JSON 개체에서 정의할 수 없지만 `JavaScript 개체`에서는 정의할 수 있습니다.
(3)

JSON 개체는 다음으로 작동할 수 있습니다. 많은 언어와 JavaScript 개체는 JS 자체에서만 인식될 수 있습니다

JSON 객체를 정의하는 방법은 다음과 같습니다

여러 속성으로 구성된 {}에 포함되어 있습니다. 키-값 쌍은 :로 구분되며, 속성 값은 숫자, 문자열, JSON 배열, JSON 개체, null. 예를 들면 다음과 같습니다.

function mainJs(a,b,c) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End **********/}

속성 값이 JSON 배열 또는 JSON 객체인 상황은 약간 더 복잡하며, 이에 대해서는 다음 단계에서 소개합니다. JavaScript에서 JSON 개체 사용하기

JSON을 지원하는 모든 언어는 JSON 개체를 사용할 수 있습니다. 여기서는 JavaScript에서 JSON 개체를 사용하는 방법만 소개합니다.

JavaScript에서 JSON 객체 정의:

{"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}

.

[]

{"class":"高三一班","studentNumber":70,"score":[ {"name":"LiMing","score":128}, {"name":"ZhangHua","score":134}, {"name":"ShenLu","score":112}]}

속성 삭제, 삭제 사용:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}console.log(myJson.bigCity[1]);
//打印出ShanghaimyJson.bigCity[0] = "GuangZhou";
//第一个元素被赋值为GuangZhou

속성을 순회하고 for-in 루프 사용:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//依次输出Peking,Shanghai,ShenZhen,HongKong}

코드 파일

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var b = "";
    for(var i=0;i<a;i++){
        b = b+myJson.language[i]+",";
    }
    return b.slice(0,-1);
	/********** End **********/}

2, JSON 배열

작업 설명🎜🎜🎜이 작업: JSON 키 값 정의 및 조작 쌍의 가치. 🎜🎜🎜구체적인 요구사항은 다음과 같습니다. 🎜🎜🎜myJson의 세 번째 속성 값은 배열이고, 매개변수 a는 숫자인 것으로 알려져 있습니다. 배열의 첫 번째 a 요소를 연결해야 합니다( 이러한 요소는 모두 문자열 유형입니다.) 요소를 분리하고 연결된 문자열을 반환합니다. 🎜🎜예를 들어 a가 2인 경우 js 또는 java를 반환해야 합니다. 🎜🎜🎜JSON 속성에 해당하는 값(value)은 배열입니다. 🎜🎜🎜JSON 키-값 쌍의 값(value)은 배열일 수 있습니다. 🎜🎜🎜예: 🎜

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    if(a==1){
        return myJson.language[0];
    }
    if(a==2){
        return myJson.language[0]+","+myJson.language[1];
    }
    if(a==3){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];
    }
    if(a==4){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];
    }
    if(a==5){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[4];
    }
	/********** End **********/}

🎜bigCity 속성에는 여러 값이 있습니다. , 배열 내부에 하나씩 넣으십시오. 🎜🎜위 예에서 배열의 각 요소는 문자열입니다. 실제로 🎜배열의 각 요소는 또 다른 json 객체🎜일 수도 있습니다. 예: 🎜

var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串

🎜위의 점수 속성 값은 배열이고, 이 배열의 각 요소는 json 개체입니다. 🎜🎜배열에 대한 일부 작업🎜🎜🎜🎜요소 읽기 및 쓰기: 🎜🎜🎜

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//输出Object {k1: "v1", k2: "v2"}

🎜🎜🎜순회: 🎜🎜🎜

//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时，不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}

🎜코드 파일🎜🎜[첫 번째 방법은 나중에 작성되었으며 아래 방법은 처음에 사용되었습니다. 두 번째 방법은 당시에는 못해서 직접 출력할까 생각했습니다]🎜

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON对象转换为JSON字符串

//对象的所有属性值加1，再转为字符串var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//处理到了JSON对象本身
        return v;
    return v+1;//所有的属性的值加1});console.log(JSONString);
    //输出{"k1":2,"k2":3.2}

🎜3.JSON 문자열🎜🎜작업 설명🎜🎜🎜이 레벨의 작업: JSON 문자열과 JavaScript 객체의 상호 변환 연습 . 🎜🎜🎜구체적인 요구 사항은 다음과 같습니다.🎜

先将JSON字符串JSONString转换为JavaScript对象JSONObject；
然后将JSONObject的key1属性的值设置为mainJs()函数的参数a；
最后将JSONObject转换为JSON字符串，并返回该字符串

在前端和后台之间传递数据可以使用JSON，但是实际上传递的是JSON字符串，而JSON对象是不可以直接进行传递的。

JSON字符串

JSON字符串就是在JSON对象两边套上'形成的字符串，如：

var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串

上面的JSONSring1就是JSON字符串，可以直接从前端传到后台或者后台传到前端。

当JavaScript收到从后台传来的JSON字符串后，怎么把它变成JSON对象方便处理呢？

JSON字符串到JavaScript对象

JSON.parse(a,b)方法将JSON字符串a转换为JavaScript对象。b是一个可选的函数参数。

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//输出Object {k1: "v1", k2: "v2"}

函数参数b按从里到外的顺序作用在对象的所有属性上，最后一个作用的是对象本身：

//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时，不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}

如上面所示，函数的参数有两个，其中key表示属性的名字，value表示属性的值，当遇到对象本身时，key的值为''，即空字符串。

JSON对象转换为JSON字符串

JSON.stringify(a,b,c)，a是待转换的JSON对象，b和c为可选参数。

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON对象转换为JSON字符串

参数b为函数时，该函数按照从里到外的顺序处理JSON对象的每一个属性，最后一个处理的是JSON对象本身，处理完后再转为JSON字符串：

//对象的所有属性值加1，再转为字符串var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//处理到了JSON对象本身
        return v;
    return v+1;//所有的属性的值加1});console.log(JSONString);
    //输出{"k1":2,"k2":3.2}

参数b还可以是数组，数组存储的是属性的名字，用来指定只转换哪些属性：

//转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString);
//输出{"k1":1,"k2":2.2}

这里简单介绍一下c：

var str = ["name":"Tom","age":16];var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);console.log(obj1);  
//输出{"name":"Tom","age":16}console.log(obj2); 
//输出
//{
//    "name": "Tom",
//    "age": 16
//}

参数c：文本添加缩进、空格和换行符，如果 c 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 c 大于 10，则文本缩进 10 个空格。

代码文件

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End **********/}

JavaScript 학습 및 이해를 위한 JSON(요약 공유)

1. JSON 개체

작업 설명

이것은 간단한 json 개체이며 해당 규칙은 다음과 같습니다.

JSON对象与Javascript对象的区别

在JavaScript中使用JSON对象

var jsonObject = {"name":"js","number":2}; delete jsonObject.name; //删除name属性

는 JSON 개체에서 정의할 수 없지만 JavaScript 개체에서는 정의할 수 있습니다. (3)

JSON字符串

JSON字符串到JavaScript对象

JSON对象转换为JSON字符串

代码文件

관련 기사

는 JSON 개체에서 정의할 수 없지만 `JavaScript 개체`에서는 정의할 수 있습니다.
(3)