JSON.stringify() 사용법 소개

숙련된 사용자 여러분, JSON.stringify에 두 번째 및 세 번째 선택적 매개변수도 있다는 사실을 알고 계셨나요? 그것들은 무엇입니까? 믿을 수 없을 것 같지 않나요? 다음 글에서는 JSON.stringify에 관련된 내용 중 여러분이 모르실 수도 있는 내용을 소개하겠습니다. 필요한 친구들은 참고할 수 있도록 샘플 코드를 통해 자세히 소개하겠습니다.

머리말

JSON은 점차적으로 XML을 대체했으며 전 세계 개발자들이 널리 사용하고 있습니다. 이 기사에서는 JavaScript에서 JSON.stringify를 사용하는 방법에 대해 자세히 설명합니다. 먼저 JSON 및 JavaScript에 대한 간략한 검토:

• 모든 합법적인 JSON이 유효한 JavaScript는 아닙니다.

• JSON은 단지 텍스트 형식입니다.

• JSON의 숫자는 십진수입니다.

1. JSON.stringify

let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"

JSON.stringify 함수는 JavaScript 개체를 텍스트 JSON으로 변환합니다. 텍스트화할 수 없는 속성은 무시됩니다. foo의 b 속성 값은 함수 정의이며 변환되지 않고 손실됩니다.

다른 어떤 속성을 변환할 수 없나요?

1. 순환 참조

객체의 속성 값이 간접적인 방식으로 객체 자체를 가리키는 경우 이는 순환 참조입니다. 예:

var bar = {
 a: {
  c: foo
 }
};
var foo = {
 b: bar
};

속성 c가 자신을 가리킵니다. 레이어별로 분석하면 무한 루프에 들어갑니다. 인쇄해서 확인해 보겠습니다.

let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}

c 속성은 foo 객체를 가리키고, foo 객체의 b 속성은 bar 객체를 가리키므로 전체 객체가 무시되고 처리될 수 없습니다. 빈 객체가 반환됩니다.

다음 정의(원문의 예)는 컴파일할 수 없습니다:

let foo = {b : foo};

오류 메시지:

ReferenceError: foo is not defined
 at repl:1:14

함수 언어 Haskell에서는 Lazy Evaluation 기술로 인해 유사한 정의 방법이 가능합니다. 사용된 .

2. 기호 및 정의되지 않음

let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}

Exceptions

배열에서 문자열화할 수 없는 요소는 null로 채워집니다.

let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"

이것은 배열 자체의 "모양", 즉 각 요소의 원래 인덱스를 유지할 수 있습니다.

왜 일부 속성은 문자열화할 수 없나요?

JSON은 범용 텍스트 형식이며 언어와 관련이 없기 때문입니다. 함수 정의도 문자열화한다면, 그것이 어떤 언어인지 결정하고 적절한 방식으로 표현하는 방법이 특히 복잡해질 것이라고 상상해 보세요. 특히 JavaScript의 기호와 같은 언어와 관련된 일부 기능이 있습니다.

ECMASCript 관계자도 이 점을 구체적으로 강조했습니다.

ECMAScript의 내부 데이터 표현을 다른 프로그래밍 언어에 적용하려고 시도하지 않고 대신 ECMAScript의 텍스트 표현 중 일부를 다른 모든 프로그래밍 언어와 공유합니다.

2 . 객체 toJSON 함수 재정의

객체의 특정 속성을 문자열화할 수 없는 문제를 우회하는 방법은 객체의 toJSON 메서드를 구현하여 문자열화되는 객체를 사용자 지정하는 것입니다. 거의 모든 AJAX 호출은 JSON.stringify를 사용하므로 이 기술을 익히면 서버 상호 작용을 처리하는 데 큰 도움이 됩니다.

객체의 요소를 문자열 형식으로 반환할 수 있는 toString과 유사하게 toJSON은 문자열화할 수 없는 객체의 속성을 변환하는 메서드를 제공하므로 다음 JSON.stringify 호출에서 해당 속성을 변환할 수 있습니다. JSON 형식.

function Person (first, last) {
 this.firstName = first;
 this.last = last;
}
 
Person.prototype.process = function () {
 return this.firstName + ' ' +
   this.lastName;
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

Person 인스턴스 ade의 프로세스 기능은 문자열화가 아닙니다. 서버가 성과 이름을 각각 가져오는 대신 ade의 전체 이름만 원한다고 가정하면 목표를 달성하기 위해 toJSON을 직접 정의할 수 있습니다.

Person.prototype.toJSON = function () {
 return { fullName: this.process(); };
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

toJSON 정의의 장점은 재사용성과 안정성입니다. ade와 일치할 수 있습니다. 사용된 모든 라이브러리에서 전송되는 데이터는 toJSON 정의에서 반환된 fullName이 됩니다.

// jQuery
$.post('endpoint', ade);
 
// Angular 2
this.httpService.post('endpoint', ade)

3. 선택적 매개변수

JSON.stringify의 전체 정의는 다음과 같습니다.

JSON.stringify(value, replacer?, space?)

replacer와 space는 모두 선택적 매개변수이므로 다음에서 별도로 설명하겠습니다.

Replacer

replacer는 문자열화할 속성 이름이 포함된 필터 함수 또는 배열입니다. 정의되지 않은 경우 모든 속성은 기본적으로 문자열화됩니다.

1. 배열

배열의 속성만 문자열화됩니다.

let foo = {
 a : 1,
 b : "string",
 c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"

중첩된 속성도 필터링됩니다.

let bar = {
 a : 1,
 b : { c : 2 }
};
JSON.stringify(bar, ['a', 'b']);
//"{"a":1,"b":{}}"
 
JSON.stringify(bar, ['a', 'b', 'c']);
//"{"a":1,"b":{"c":2}}"

필터 배열을 정의하면 요구 사항이 충족되지 않는 경우가 있습니다. 기능을 사용자 정의할 수 있습니다.

2. 함수

필터 함수는 개체의 모든 속성과 값을 입력으로 사용하며 반환 값은 다음과 같은 상황에 있습니다.

• 정의되지 않은 반환은 속성을 무시하는 것을 의미합니다. , 부울 값 또는 숫자는 문자열화됩니다.

• 반환된 객체는 기본 유형의 속성이 나타날 때까지 재귀 호출을 트리거합니다.

• 返回无法stringify的值将会被忽略；

let baz = {
 a : 1,
 b : { c : 2 }
};
 
// 返回大于1的值
let replacer = function (key, value) {
 if(typeof === 'number') {
  return value > 1 ? value: undefined;
 }
 return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

通过改写上面的函数加入适当的输出，可以看到具体的执行步骤：

let obj = {
 a : 1,
 b : { c : 2 }
};
 
let tracer = function (key, value){
 console.log('Key: ', key);
 console.log('Value: ', value);
 return value;
};
 
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2

space

你是否意识到调用默认的JSON.stringify返回的值只要一行，而且完全没有空格？如果想要更加美观的打印出来，那么就需要使用space这个参数了。

我告诉你一个非常简单的方法：通过tab(‘\t')来分割即可。

let space = {
 a : 1,
 b : { c : 2 }
};
 
// 使用制表符
JSON.stringify(space, undefined, '\t');
// "{
// "a": 1,
// "b": {
// "c": 2
// }
// }"
 
JSON.stringify(space, undefined, '');
// {"a":1,"b":{"c":2}}
 
// 自定义分隔符
JSON.stringify(space, undefined, 'a');
// "{
// a"a": 1,
// a"b": {
// aa"c": 2
// a}
// }"

一道三颗星的思考题：为什么打印结果的倒数第三行有两个a呢？

结论

本文介绍了一些使用toJSON的技巧：

• 无法stringify的几种类型

• 使用toJSON来自定义JSON.stringify的属性

• 可选参数replacer的两种定义方法来过滤属性

• 可选参数space用来格式化输出结果

• 数组和对象中如果包含无法stringify的元素的时候的区别

위 내용은 JSON.stringify() 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!