찾다

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

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

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

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

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

관련 권장 사항: 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中的对象有一些小的区别。

  1. 定义一个JavaScript对象：
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
  1. 定义一个JSON对象：
 {"a":1,"b":2.12,"c":true,"d":"string","e":null};
  1. 三点区别：

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

  1. 定义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}

    세 가지 차이점:

    • (1)
  • JSON 개체의 속성 이름(키)은 큰따옴표로 묶어야 하며
    • JavaScript 개체는 중간에 공백과 하이픈이 있는 속성 이름을 제외하고 큰따옴표로 묶어야 합니다. 선택 사항입니다.
    (2)
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 개체를 사용하는 방법만 소개합니다.

    1. JavaScript에서 JSON 객체 정의: 
      2. {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}
      속성을 조작하려면 . 또는 []를 사용하세요. 
    1. {"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 객체의 상호 변환 연습 . 🎜🎜🎜구체적인 요구 사항은 다음과 같습니다.🎜
    1. 先将JSON字符串JSONString转换为JavaScript对象JSONObject；
    2. 然后将JSONObject的key1属性的值设置为mainJs()函数的参数a；
    3. 最后将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学习教程

    위 내용은 JavaScript 학습 및 이해를 위한 JSON(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명：
    이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
    이전 기사：React18의 SuspenseList에 대한 간략한 분석과 그 용도다음 기사：React18의 SuspenseList에 대한 간략한 분석과 그 용도

    관련 기사

    더보기