수색…


소개

JSON (JavaScript Object Notation)은 간단한 데이터 교환 형식입니다. 인간이 읽고 쓰고 읽기 쉽고 기계가 구문 분석하고 생성하기 쉽습니다. 자바 스크립트에서 JSON은 문자열이 아니라 객체라는 사실을 깨닫는 것이 중요합니다.

기본 개요는 json.org 웹 사이트에서 찾을 수 있으며 여기에는 다양한 프로그래밍 언어로 표준을 구현하는 링크가 포함되어 있습니다.

통사론

  • JSON.parse (input [, reviver])
  • JSON.stringify (value [, replacer [, space]])

매개 변수

매개 변수 세부
JSON.parse JSON 문자열을 파싱합니다.
input(string) 구문 분석 할 JSON 문자열입니다.
reviver(function) 입력 JSON 문자열에 대한 변환을 지정합니다.
JSON.stringify 직렬화 가능 값의 직렬화
value(string) JSON 사양에 따라 serialize되는 값입니다.
replacer(function 또는 String[] 또는 Number[]) value 객체의 특정 속성을 선택적으로 포함합니다.
space(String 또는 Number ) number 가 제공되면 space 의 공백 수가 가독성으로 삽입됩니다. string 이 제공되면 문자열 (처음 10 자)은 공백으로 사용됩니다.

비고

JSON 유틸리티 메소드는 ECMAScript 5.1 § 15.12 에서 처음 표준화되었습니다.

형식은 JSON 데이터 교환 형식 (2013 년 3 월 RFC 7158, 2013 년 10 월 ECMA-404 및 2014 년 3 월 RFC 7159)에서 나중에 업데이트 된 JSON 용 application / json Media Type (RFC 4627 July 2006)에서 정식으로 정의되었습니다.

이러한 방법을 Internet Explorer 8과 같은 구식 브라우저에서 사용하려면 Douglas Crockford의 json2.js를 사용하십시오 .

간단한 JSON 문자열 파싱하기

JSON.parse() 메서드는 문자열을 JSON으로 구문 분석하고 JavaScript 프리미티브, 배열 또는 객체를 반환합니다.

const array = JSON.parse('[1, 2, "c", "d", {"e": false}]');
console.log(array); // logs: [1, 2, "c", "d", {e: false}]

값 직렬화

자바 스크립트 값은 JSON.stringify 함수를 사용하여 JSON 문자열로 변환 할 수 있습니다.

JSON.stringify(value[, replacer[, space]])
  1. value JSON 문자열로 변환 할 값입니다.
/* Boolean */  JSON.stringify(true)             // 'true'
/* Number  */  JSON.stringify(12)               // '12'
/* String  */  JSON.stringify('foo')            // '"foo"'
/* Object  */  JSON.stringify({})               // '{}'
               JSON.stringify({foo: 'baz'})     // '{"foo": "baz"}'
/* Array   */  JSON.stringify([1, true, 'foo']) // '[1, true, "foo"]'
/* Date    */  JSON.stringify(new Date())       // '"2016-08-06T17:25:23.588Z"'
/* Symbol  */  JSON.stringify({x:Symbol()})     // '{}'
  1. replacer 문자열 지정 프로세스의 동작 또는 JSON 문자열에 포함될 값 객체의 속성을 필터링하기위한 허용 목록 역할을하는 String 및 Number 객체의 배열을 변경하는 함수입니다. 이 값이 null이거나 제공되지 않으면 객체의 모든 속성이 결과 JSON 문자열에 포함됩니다.
// replacer as a function
function replacer (key, value) {
    // Filtering out properties
    if (typeof value === "string") {
        return
    }    
    return value
}

var foo = { foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7 }
JSON.stringify(foo, replacer)
// -> '{"week": 45, "month": 7}'
// replacer as an array
JSON.stringify(foo, ['foundation', 'week', 'month'])
// -> '{"foundation": "Mozilla", "week": 45, "month": 7}'
// only the `foundation`, `week`, and `month` properties are kept
  1. space 가독성을 위해 들여 쓰기에 사용되는 공간의 수를 세 번째 매개 변수로 지정할 수 있습니다.
JSON.stringify({x: 1, y: 1}, null, 2)  // 2 space characters will be used for indentation
/* output:
    {
      'x': 1,
      'y': 1
    }
*/

또는 들여 쓰기에 사용할 문자열 값을 제공 할 수 있습니다. 예를 들어 '\t' 를 입력하면 들여 쓰기에 탭 문자가 사용됩니다.

JSON.stringify({x: 1, y: 1}, null, '\t')
/* output:
    {
        'x': 1,
        'y': 1
    }
*/

Replacer 함수를 사용한 직렬화

replacer 함수를 사용하여 직렬화되는 값을 필터링하거나 변환 할 수 있습니다.

const userRecords = [
  {name: "Joe", points: 14.9, level: 31.5},
  {name: "Jane", points: 35.5, level: 74.4},
  {name: "Jacob", points: 18.5, level: 41.2},
  {name: "Jessie", points: 15.1, level: 28.1},
];

// Remove names and round numbers to integers to anonymize records before sharing
const anonymousReport = JSON.stringify(userRecords, (key, value) =>
  key === 'name'
    ? undefined
    : (typeof value === 'number' ? Math.floor(value) : value)
);

그러면 다음 문자열이 생성됩니다.

'[{"points":14,"level":31},{"points":35,"level":74},{"points":18,"level":41},{"points":15,"level":28}]'

회생 기능을 사용한 구문 분석

reviver 함수를 사용하여 구문 분석 할 값을 필터링하거나 변환 할 수 있습니다.

5.1
var jsonString = '[{"name":"John","score":51},{"name":"Jack","score":17}]';

var data = JSON.parse(jsonString, function reviver(key, value) {
  return key === 'name' ? value.toUpperCase() : value;
});
6
const jsonString = '[{"name":"John","score":51},{"name":"Jack","score":17}]';

const data = JSON.parse(jsonString, (key, value) =>
  key === 'name' ? value.toUpperCase() : value
);

이렇게하면 다음 결과가 생성됩니다.

[
  {
    'name': 'JOHN',
    'score': 51
  },
  {
    'name': 'JACK',
    'score': 17
  }
]

이 기능은 JSON으로 전송할 때 직렬화 / 인코딩해야하지만 데이터를 직렬화 / 디코딩해야 할 때 유용합니다. 다음 예제에서는 날짜가 ISO 8601 표현으로 인코딩되었습니다. reviver 함수를 사용하여 JavaScript Date 에서이 구문을 분석합니다.

5.1
var jsonString = '{"date":"2016-01-04T23:00:00.000Z"}';

var data = JSON.parse(jsonString, function (key, value) {
  return (key === 'date') ? new Date(value) : value;
});
6
const jsonString = '{"date":"2016-01-04T23:00:00.000Z"}';

const data = JSON.parse(jsonString, (key, value) =>
  key === 'date' ? new Date(value) : value
);

reviver 함수가 각 반복 끝에 유용한 값을 반환하는지 확인하는 것이 중요합니다. reviver 함수가 undefined 반환하거나 값이 없거나 실행이 함수의 끝으로 떨어지면 속성이 객체에서 삭제됩니다. 그렇지 않은 경우 속성은 반환 값으로 다시 정의됩니다.

클래스 인스턴스 직렬화 및 복원

사용자 정의 toJSON 메소드 및 리버브 기능을 사용하여 JSON에서 고유 한 클래스의 인스턴스를 전송할 수 있습니다. 객체에 toJSON 메소드가있는 toJSON 객체 자체 대신 결과가 직렬화됩니다.

6
function Car(color, speed) {
  this.color = color;
  this.speed = speed;
}

Car.prototype.toJSON = function() {
  return {
    $type: 'com.example.Car',
    color: this.color,
    speed: this.speed
  };
};

Car.fromJSON = function(data) {
  return new Car(data.color, data.speed);
};
6
class Car {
  constructor(color, speed) {
    this.color = color;
    this.speed = speed;
    this.id_ = Math.random();
  }

  toJSON() {
    return {
      $type: 'com.example.Car',
      color: this.color,
      speed: this.speed
    };
  }

  static fromJSON(data) {
    return new Car(data.color, data.speed);
  }
}
var userJson = JSON.stringify({
  name: "John",
  car: new Car('red', 'fast')
});

이렇게하면 다음과 같은 내용의 문자열이 생성됩니다.

{"name":"John","car":{"$type":"com.example.Car","color":"red","speed":"fast"}}
var userObject = JSON.parse(userJson, function reviver(key, value) {
  return (value && value.$type === 'com.example.Car') ? Car.fromJSON(value) : value;
});

그러면 다음 객체가 생성됩니다.

{
  name: "John",
  car: Car {
    color: "red",
    speed: "fast",
    id_: 0.19349242527065402
  }
}

JSON 대 JavaScript 리터럴

JSON은 "JavaScript Object Notation"의 약자이지만 자바 스크립트가 아닙니다. 자바 스크립트 문자로 직접 사용할 수 일어나는 단지 데이터 직렬화 형식이라고 생각. 그러나 외부 소스에서 가져온 JSON을 직접 실행 ( eval() 통해 eval() 하는 것은 좋지 않습니다. 기능상 JSON은 XML 또는 YAML과 크게 다르지 않습니다. JSON이 JavaScript와 매우 유사한 일부 직렬화 형식으로 상상되는 경우 혼란을 피할 수 있습니다.

그 이름은 단지 객체를 의미하지만, 일종의 API를 통한 대부분의 유스 케이스가 항상 객체와 배열이 되어도 JSON은 객체 나 배열을위한 것이 아닙니다. 다음과 같은 기본 유형이 지원됩니다.

  • 문자열 (예 : "Hello World!" )
  • 번호 (예 : 42 )
  • 부울 (예 : true )
  • null

undefined 는 직렬화시 JSON에서 정의되지 않은 속성이 생략된다는 점에서 지원 undefined 않습니다. 따라서 JSON을 deserialize하고 값이 undefined 속성으로 끝나는 방법은 없습니다.

문자열 "42" 는 유효한 JSON입니다. JSON은 항상 "{...}" 또는 "[...]" 의 외부 봉투를 가질 필요는 없습니다.

nome JSON 또한 유효한 JavaScript이고 일부 JavaScript는 유효한 JSON이지만 두 언어 사이에는 약간의 차이가 있으며 어느 언어도 다른 언어의 하위 집합이 아닙니다.

다음 JSON 문자열을 예로 들어 보겠습니다.

{"color": "blue"}

이것은 JavaScript에 직접 삽입 될 수 있습니다. 구문 적으로 유효하며 올바른 값을 생성합니다.

const skin = {"color": "blue"};

그러나 "색상"은 유효한 식별자 이름이고 속성 이름은 따옴표로 묶을 수 있습니다.

const skin = {color: "blue"};

큰 따옴표 대신 작은 따옴표를 사용할 수 있다는 것도 알고 있습니다.

const skin = {'color': 'blue'};

하지만이 두 리터럴을 모두 JSON으로 취급 한다면 구문 적으로 유효한 JSON 이 될 수 없습니다 .

{color: "blue"}
{'color': 'blue'}

JSON은 모든 속성 이름을 큰 따옴표로 묶고 문자열 값을 큰 따옴표로 묶어야합니다.

JSON 새로 작성자가 자바 스크립트 리터럴을 JSON으로 사용하여 코드 발췌본을 사용하고 JSON 파서에서 구문 오류에 대해 머리를 쓰는 것은 흔한 일입니다.

잘못된 용어 가 코드 나 대화에 적용될 때 더 혼란이 시작됩니다.

일반적인 안티 패턴은 비 JSON 값을 "json"으로 유지하는 변수의 이름을 지정하는 것입니다.

fetch(url).then(function (response) {
  const json = JSON.parse(response.data); // Confusion ensues!

  // We're done with the notion of "JSON" at this point,
  // but the concept stuck with the variable name.
});

위의 예에서 response.data 는 일부 API에서 반환하는 JSON 문자열입니다. JSON은 HTTP 응답 도메인에서 중지합니다. "json"잘못된 이름의 변수에는 JavaScript 값 (객체, 배열 또는 간단한 숫자 일 수 있음) 만 있습니다.

위의 글을 쓰는 데 덜 혼란스러운 방법은 다음과 같습니다.

fetch(url).then(function (response) {
  const value = JSON.parse(response.data);

  // We're done with the notion of "JSON" at this point.
  // You don't talk about JSON after parsing JSON.
});

개발자는 "JSON 객체"라는 말을 많이 사용하는 경향이 있습니다. 이것은 또한 혼란을 가져온다. 위에서 언급했듯이 JSON 문자열은 객체를 값으로 보유 할 필요가 없습니다. "JSON 문자열"은 더 나은 용어입니다. "XML 문자열"또는 "YAML 문자열"과 같습니다. 당신은 문자열을 얻고 그것을 파싱하고 결국 값을 갖게됩니다.

순환 오브젝트 값

모든 객체를 JSON 문자열로 변환 할 수있는 것은 아닙니다. 개체에 주기적 자체 참조가 있으면 변환이 실패합니다.

이는 일반적으로 부모와 자식이 서로를 참조하는 계층 적 데이터 구조의 경우입니다.

const world = {
  name: 'World',
  regions: []
};

world.regions.push({
  name: 'North America',
  parent: 'America'
});
console.log(JSON.stringify(world));
// {"name":"World","regions":[{"name":"North America","parent":"America"}]}

world.regions.push({
  name: 'Asia',
  parent: world
});

console.log(JSON.stringify(world));
// Uncaught TypeError: Converting circular structure to JSON

프로세스가주기를 감지하면 예외가 발생합니다. 사이클 감지가 없으면 문자열은 무한히 길어집니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow