경량 데이터 형식 - JSON

오늘은 수학이 정말 참을 수가 없네요

생각을 바꿔서 프론트엔드에 대해 글을 써보겠습니다
오늘은 JSON에 대한 지식을 조금 적어보겠습니다

---

아주 오래전부터 XML은 인터넷에서 데이터를 전송하는 표준입니다
그러나 일반적으로 XML은 너무 번거롭다고 생각합니다
나중에 웹이 발전하면서
사람들은 JSON이 더 편리하다는 것을 알게 되었습니다. JavaScript 구문의 하위 집합으로 사용
JSON이 표준이 되었습니다
이제 모든 사람이 JSON을 통신용 데이터 형식으로 사용합니다

JSON 기본 구문

(JSON: JavaScript Object Notation, JavaScript object Representation)
JSON 구문은 크게 세 가지 유형의 값으로 구분됩니다. ​​

• 간단한 유형의 값: 문자열을 나타낼 수 있습니다. , 숫자, 부울 값 및 null

• 객체: 순서가 지정되지 않은 키-값 쌍을 나타내는 복잡한 데이터 유형

• 배열: 복잡한 데이터 유형 , 정렬된 값 목록을 나타냄

JSON은 정의되지 않음을 지원하지 않으며 함수도 지원하지 않습니다

단순 유형 값

단일 기본 유형 값도 JSON으로 간주할 수 있습니다.
구문과 JavaScript는 동일합니다
주의할 점은 단 하나입니다
JavaScript에서는 문자열을 큰따옴표나 작은따옴표로 표현할 수 있습니다
단, JSON의 문자열 형식은 큰따옴표를 사용해야 합니다

객체

JSON은 JavaScript 구문의 하위 집합이므로
주로 차이점에 대해 이야기하겠습니다
먼저 일반적으로 사용되는 객체 리터럴 선언 형식을 살펴보세요

var man = {
    name: 'payen',
    sex: 'male',
    age: 19};

JSON의 JavaScript 객체는 속성에 따옴표를 추가할 수 있는지 여부를 결정합니다.
(일반 객체와 JSON 객체를 구별하기 위해 일반적으로 따옴표를 추가하지 않습니다) )
그러나 JSON 객체에서는 속성에 (큰따옴표) 따옴표를 추가해야 합니다.
위의 내용 객체는 JavaScript에서도 이와 같이 작성할 수 있으며 이는

var man = {    "name": "payen",    "sex": "male",    "age": 19};

와 완전히 동일합니다. 위의 JSON으로 표현된 객체는

{
    "name": "payen",
    "sex": "male",
    "age": 19}

입니다(JSON에는 변수의 개념도 없고 세미콜론도 없습니다)
물론 JSON에서 객체의 값도 객체가 될 수 있습니다
아무리 JSON은 복잡하므로 개체의 키(속성)를 큰따옴표로 묶어야 합니다.

배열

JavaScript에서는 엄밀히 말하면 배열이 개체에 속하지만
일반적으로 다르게 처리합니다.
배열 리터럴을 선언하는 일반적인 방법

var value = [123, 'abc', true];

JSON에도 동일한 구문이 있습니다.

[123, "abc", true]

다시 말하지만, JSON에는 변수와 세미콜론이 없습니다

---

일반적으로 JSON의 가장 바깥쪽 형태는 배열과 객체입니다
배열, 객체, 단순 타입 값을 통해 다양한 JSON 데이터를 구성할 수 있습니다. 형식

JSON 파싱 및 직렬화

JSON이 인기 있는 더 중요한 이유
는 유용한 객체로 파싱하기가 더 쉽다는 점입니다

JSON 객체

JSON 파서는 오래 전에 JavaScript의 eval()을 사용했습니다.
하지만 위험하고 악성 코드를 실행할 수 있음
ES5는 JSON 구문 분석 동작을 표준화합니다
전역 객체 JSON 정의
두 가지 메서드가 있습니다

• stringify()
  JavaScript 객체 –> JSON 문자열

• parse()
  JSON 문자열 –> JavaScript 객체

물론 가장 기본적인 사용법은 다음과 같습니다.
변환할 변수를 매개변수로 전달합니다
예(항상 이 예가 사용됩니다)

var man = {    &#39;name&#39;: "payen", <--
    sex: "male", <--
    "age": 19,    "school": {        "name": &#39;HUST&#39;,        "sex": undefined, <--
        "location": function(){} <--
    }
}
var str = JSON.stringify(man);
console.log(str);
console.log(typeof str);

콘솔 출력을 살펴보겠습니다

JSON.stringify가 실제로 JSON 문자열을 반환하는 것을 볼 수 있습니다.
따옴표가 없습니다. JSON 문자열에서 큰따옴표로 묶인
작은따옴표 속성도 있고 속성 값은 정의되지 않습니다. 또는 함수의 속성이 자동으로 무시됩니다.
(프로토타입 멤버도 무시됩니다.)

JSON.stringify()는 객체의 정의되지 않은 함수(ES6 기호 포함)를 자동으로 무시하지만
배열은 다른
배열에는 객체가 없고 무자비하게 쫓아내지만 null을 반환합니다

console.log(JSON.stringify([123, undefined, null, function(){}]));

---

JSON.parse를 사용하여 JavaScript 객체로 복원할 수 있습니다

console.log(JSON.parse(str));

아래에서 살펴보겠습니다. 이 두 함수의 자세한 사용법을 살펴보세요

stringify 직렬화

객체를 직렬화할 경우 이 메소드는 두 개의 매개변수를 허용할 수도 있습니다
하나는 필터, 배열 또는 함수일 수 있습니다.
두 번째는 JSON 문자열

필터

배열 필터

배열의 형태는 상대적으로 간단합니다. 원하는 개체 속성을 지정할 수 있습니다.

또는 위의 예

var str = JSON.stringify(man,['name','sex']);
console.log(str);

함수 필터

우리가 전달하는 함수는 연결 매개변수, 키(속성 이름) 및 값(속성 값)을 수신합니다.

반환된 값은 해당 키의 값입니다
함수가 정의되지 않은 값을 반환하면 속성이 무시됩니다

var str = JSON.stringify(man, function(key, value){
    if(key == 'name'){        return 'abc';
    }    if(key == 'sex'){        return;
    }    return value;
});
console.log(str);

注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

另一个参数可以填写数字指定缩进的空格数（最大缩进10）

var str = JSON.stringify(man, null, 4);
console.log(str);

字符填充

我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
console.log(str);

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
（但仍然是调用stringify()方法）
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串（同Date中方法toISOString()结果相同）

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,
    toJSON: function(){        return this.school;
    }
}
var str = JSON.stringify(man);
console.log(str);

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值，然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

• 如果对象有toJSON()并且能获得有效值，优先调用，否则返回对象本身

• 若有第二个参数，对上一步返回的对象应用过滤器

• 对上一步返回的每个值进行相应序列化

• 若有第三个参数，执行序列化

parse解析

JSON.parse也可以接受另一个参数，它是一个函数
类似于上面序列化中过滤器的过滤函数
它被称作还原函数，同样接受键和值作为参数
首先我现在我们例子中的对象添加一个方法

var man = {    ...,
    releaseDate: new Date(2016,11,11)
}
var str = JSON.stringify(man);
console.log(str);

我们看到，由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

console.log(JSON.parse(str));

这样的数据不是我们想要的
这样的情况我们怎么处理呢？
答案是使用还原函数

---

可以这样做

var msg = JSON.parse(str,function(key, value){
    if(key == 'releaseDate'){        return new Date(value);
    }else{        return value;
    }
})
console.log(msg.releaseDate.getFullYear(),
            msg.releaseDate.getMonth(),
            msg.releaseDate.getDate());

这样我们就可以使用得到的时间数据了

小结

没想到写了这么多
JSON其实很简单
就是一个轻量级的数据格式
可以简化表示复杂数据结构的工作量
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()
总结几个要记住的重点

• JSON.stringify()
  用于把JavaScript对象转换为JSON字符串
  可填写额外两个参数-筛选数组/替换函数和指定缩进
  

• 对象遇到undefined、function、symbol（ES6）会忽略

• 数组遇到undefined、function、symbol（ES6）会返回null

• JSON.parse()
  用于把JSON字符串转换为JavaScript对象
  可填写额外一个参数-还原函数

 以上就是轻量级数据格式——JSON的内容，更多相关内容请关注PHP中文网（www.php.cn）！