JSON 객체(그래픽 튜토리얼, 간단하고 투박함)

이 글은 JSON 객체의 자세한 설명에 관련된 정보를 주로 소개하고, 모두가 학습하고 참고할 수 있도록 간단한 예제 코드를 첨부합니다. 도움이 필요한 친구는 이전 단어를 참고할 수 있습니다.

　json의 전체 이름(javascript 객체 표기법) 구조화된 데이터를 읽기 위한 프로그래밍 언어가 아닌 데이터 교환을 위한 텍스트 형식인 자바스크립트 객체 표현 방식입니다. 2001년 Douglas Crockford가 번거롭고 번거로운 XML 형식을 대체할 목적으로 제안했습니다. 이번 글에서는 json의 내용을 자세히 소개하겠습니다

문법 규칙

JSON의 구문은 다음 세 가지 유형의 값을 나타낼 수 있습니다 ​​

[1] 단순 값 ​​

단순 값은 동일한 값을 사용합니다 구문은 JavaScript로 작성되며 JSON 문자열, 숫자 값, 불리언 값 및 null로 표현할 수 있습니다.

문자열은 큰따옴표로 표시해야 하며 작은따옴표는 사용할 수 없습니다. 값은 10진수로 표현해야 하며 NaN, Infinity는 사용할 수 없습니다. [참고] JSON은 키-값 쌍에 정의되지 않은 특수 값을 지원하지 않습니다. 각 키-값 쌍의 값은 단순한 값일 수도 있고 복잡한 데이터 유형의 값일 수도 있습니다

JavaScript 객체 리터럴과 비교할 때 json에는 세 가지 차이점이 있습니다

　1. JSON에는 변수 개념이 없습니다

　2. JSON에서는, 객체의 키 이름은 큰따옴표로 묶어야 합니다

　3. JSON은 자바스크립트 구문이 아니기 때문에 끝에 세미콜론이 없습니다

　[참고] 동일한 이름을 가진 두 개의 속성이 동일한 객체에 나타나면 안 됩니다

//合格的简单值
5
"hello world"
true
null

//不合格的简单值
+0x1
'hello world'
undefined
NaN
Infinity

【3】Array

　Array는 또한 숫자 인덱스를 통해 액세스할 수 있는 값의 정렬된 목록 집합을 나타내는 복잡한 데이터 유형입니다. 배열의 값은 간단한 값, 객체 또는 배열 등 모든 유형이 될 수 있습니다.

　JSON 배열에는 변수와 세미콜론이 없습니다. 배열과 객체를 결합하면 더 복잡한 데이터 컬렉션이 형성될 수 있습니다

　[참고] 배열 또는 배열의 마지막 단계입니다. object 멤버 뒤에는 쉼표를 추가할 수 없습니다

JSON object

JSON이 인기 있는 이유는 JSON 데이터 구조를 유용한 JavaScript 개체로 구문 분석할 수 있기 때문입니다

ECMAScript5는 JSON 구문 분석 동작을 표준화하고 전역 객체를 정의합니다. 객체 JSON

　[참고] IE7 브라우저는 지원하지 않습니다

　JSON 객체에는 stringify()와 Parse()라는 두 가지 메소드가 있습니다. 이 두 메서드는 JavaScript 개체를 JSON 문자열로 직렬화하고 JSON 문자열을 기본 JavaScript 값으로 구문 분석하는 데 사용됩니다. JSON.stringify() 메서드는 값을 문자열로 변환하는 데 사용됩니다. 문자열은 JSON 형식을 준수해야 하며 JSON.parse() 메서드로 복원할 수 있습니다.

기본적으로 JSON.stringify()의 JSON 문자열 출력에는 공백 문자나 들여쓰기가 포함되지 않습니다.

//合格的对象
{
  "name":"huochai",
  "age":29,
  "school":{
    "name":"diankeyuan",
    "location":"beijing"
  }
}

특정 변환

//不合格的对象
{ name: "张三", 'age': 32 }//属性名必须使用双引号
{};//不需要末尾的分号
{ "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
 "getName": function() {
   return this.name;
 }
} // 不能使用函数和日期对象

　stringify() 메소드는 정규식과 수학 객체를 빈 객체의 문자열 형식으로 변환합니다

var jsonObj = {
  "title":"javascript",
  "group":{
    "name":"jia",
    "tel":12345
  }
};
//{"title":"javascript","group":{"name":"jia","tel":12345}}
JSON.stringify(jsonObj);

　stringify() 메소드는 날짜 객체와 래퍼 객체를 문자열로 변환합니다

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])// '[1,"false",false]'
JSON.stringify({ name: "张三" })// '{"name":"张三"}'

　객체의 멤버가 정의되지 않거나 함수인 경우, 이 멤버는 생략됩니다

　배열의 멤버가 정의되지 않았거나 함수인 경우 이 값은 null로 변환됩니다

JSON.stringify(/foo/) // "{}"
JSON.stringify(Math) // "{}"

　JSON.stringify() 메서드는 객체의 탐색 불가능한 속성을 무시합니다

JSON.stringify(new Boolean(true)) //"true"
JSON.stringify(new String('123')) //""123""
JSON.stringify(new Number(1)) //"1"
JSON.stringify(new Date()) //""2016-09-20T02:26:38.294Z""

Parameters

　JSON.stringify 직렬화할 JavaScript 개체 외에도 ()는 JavaScript 개체를 직렬화하는 다양한 방법을 지정하는 데 사용되는 두 개의 다른 매개 변수를 받을 수도 있습니다. 첫 번째 매개변수는 배열 또는 함수일 수 있는 필터입니다. 두 번째 매개변수는 JSON 문자열에서 들여쓰기를 유지할지 여부를 나타내는 옵션입니다.

【Array Filter】

때 stringify() 메소드는 배열이므로 필터 기능을 구현하는 것과 같습니다

　【1】필터는 객체의 첫 번째 수준 속성에만 유효합니다

JSON.stringify({
 a: function(){},
 b: undefined,
 c: [ function(){}, undefined ]
});
// "{"c":[null,null]}"

　【2】필터는 배열에 유효하지 않습니다

var obj = {};
Object.defineProperties(obj, {
 'foo': {
  value: 1,
  enumerable: true
 },
 'bar': {
  value: 2,
  enumerable: false
 }
});
JSON.stringify(obj); // {"foo":1}]

【 함수 매개변수】

　stringify() 메서드의 두 번째 매개변수도 함수일 수 있습니다. 전달된 함수는 속성(키) 이름과 속성 값이라는 두 개의 매개변수를 받습니다

var jsonObj = {
  "title":"javascript",
  "group":{
    "a":1
  }
};
//{"group":{"a":1}}
console.log(JSON.stringify(jsonObj,["group","a"]))

　속성 이름은 문자열만 가능하며, 값이 키-값 쌍 구조의 값이 아닌 경우 키 이름은 빈 문자열이 됩니다

　이 함수 매개변수는 모든 키를 재귀적으로 처리합니다

다음 코드에서 객체 o는 f 함수에 의해 총 3번 처리됩니다. 처음에 키 이름이 비어 있으면 키 값은 전체 객체입니다. 두 번째로 키 이름이 a이면 키 값은 {b:1}입니다. 1

var jsonObj =[1,2];
JSON.stringify(jsonObj,["0"])//"[1,2]"

　함수는 해당 키의 값을 반환합니다. 함수가 정의되지 않은 값을 반환하거나 반환 값이 없는 경우 해당 속성은 무시됩니다.

JSON.stringify({a:1,b:2}, function(key, value){
 if (typeof value === "number") {
  value = 2 * value;
 }
 return value;  
})
// "{"a":2,"b":4}"

【Indent】

　stringify() 메서드는 반환된 JSON 문자열의 가독성을 높이기 위해 세 번째 매개 변수를 허용할 수도 있습니다.

　는 숫자이며 각 속성 앞에 공백이 추가됨을 의미합니다(10자 이내)

문자열인 경우(10자 이내) 각 줄 앞에 문자열이 추가됩니다

JSON.stringify({a: {b: 1}}, function (key, value) {
 console.log("["+ key +"]:" + value);
 return value;
})
// []:[object Object]
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

가끔 , JSON.stringify()는 여전히 특정 객체의 사용자 정의 직렬화 요구를 충족할 수 없습니다. 이러한 경우 객체에서 toJSON() 메서드를 호출하여 자체 JSON 데이터 형식을 반환할 수 있습니다

JSON.stringify({
 toJSON: function () {
  return "Cool"
 }
})
// ""Cool""

var o = {
 foo: 'foo',
 toJSON: function() {
  return 'bar';
 }
};
JSON.stringify({x: o});// '{"x":"bar"}'

　　如果toJSON()方法返回undefined，此时如果包含它的对象嵌入在另一个对象中，会导致该对象的值变成null。而如果包含它的对象是顶级对象，结果就是undefined

JSON.stringify({
 toJSON: function () {
  return undefined
 }
})
//undefined

　　Date对象部署了一个自己的toJSON方法，自动将Date对象转换成日期字符串

JSON.stringify(new Date("2016-08-29"))
// "2016-08-29T00:00:00.000Z"

　　toJSON方法的一个应用是，可以将正则对象自动转为字符串

RegExp.prototype.toJSON =RegExp.prototype.toString;
JSON.stringify(/foo/)// ""/foo/""

　　toJSON()可以作为函数过滤器的补充，因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify()，序列化该对象的顺序如下

　　1、如果存在toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，按默认顺序执行序列化

　　2、如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第一步返回的值

　　3、对第二步返回的每个值进行相应的序列化

　　4、如果提供了第三个参数，执行相应的格式化

parse()

　　JSON.parse方法用于将JSON字符串转化成对象

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null
var o = JSON.parse('{"name": "张三"}');
o.name // 张三

　　如果传入的字符串不是有效的JSON格式，JSON.parse方法将报错

//Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("'String'")

//Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("undefined")
　　JSON.parse()方法也可以接收一个函数参数，在每个键值对儿上调用，这个函数被称为还原函数(reviver)。该函数接收两个参数，一个键和一个值，返回一个值

　　如果还原函数返回undefined，则表示要从结果中删除相应的键；如果返回其他值，则将该值插入到结果中

var o = JSON.parse('{"a":1,"b":2}', function(key, value) {
 if (key === ''){
  return value;
 }
 if (key === 'a') {
  return value + 10;
 }
});
o.a // 11
o.b // undefinef

　　在将日期字符串转换为Date对象时，经常要用到还原函数

var book = {
  "title": "javascript",
  "date": new Date(2016,9,1)
}
var jsonStr = JSON.stringify(book);
//'{"title":"javascript","date":"2016-09-30T16:00:00.000Z"}''
console.log(jsonStr)

var bookCopy = JSON.parse(jsonStr,function(key,value){
  if(key == 'date'){
    return new Date(value);
  }
  return value;
})
console.log(bookCopy.date.getFullYear());//2016

eval()

　　实际上，eval()类似于JSON.parse()方法，可以将json字符串转换为json对象

eval('(' + '{"a":1}'+')').a;//1
JSON.parse('{"a":1}').a;//1

　　但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码

eval('(' + '{"a":alert(1)}'+')').a;//弹出1
JSON.parse('{"a":alert(1)}').a;//报错

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

原生js实现节日时间倒计时功能（附上代码）

关于在不同页面之间实现参数传递的几种方式（详细为你解答）

详细为你解读JavaScript字符集编码与解码（图文教程）

위 내용은 JSON 객체(그래픽 튜토리얼, 간단하고 투박함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!