js에서 json 문자열과 json 객체를 서로 변환하는 방법 구현

不言
풀어 주다: 2018-07-20 14:53:14
원래의
1754명이 탐색했습니다.

JS를 사용하여 개발하는 과정에서 json 문자열과 json 개체를 서로 변환해야 합니다. 그러면 json 문자열을 json 개체로 변환하고 json 개체를 json 문자열로 변환하는 방법은 무엇인가요? 다음으로 구체적인 예를 보여드리겠습니다.

1. JSON 문자열을 JSON 객체로 변환

var obj = JSON.parse(str[,viver]);

예:

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
JSON.parse('1');               //  1
로그인 후 복사

reviver: 함수인 경우 원래 값이 반환되기 전에 실행됩니다. 그 방법 이후.

JSON 문자열을 구문 분석하고 해당 값을 반환합니다. 추가 변환 함수를 전달하여 생성된 값과 해당 속성을 반환하기 전에 특정 사항을 수정할 수 있습니다. 함수의 매개변수 k와 v는 각각 반환된 속성 이름과 속성 값을 나타냅니다.

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
 
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名,从而得知遍历顺序是从内向外的,
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值,相当于没有传递 reviver 参数。
});
 
// 1
// 2
// 4
// 6
// 5
// 3
// ""
로그인 후 복사

2. JSON 개체를 JSON 문자열로 변환합니다.

JSON.stringify(value[, replacement [, space]])

value는 JSON 문자열 값으로 직렬화됩니다.

replacer 선택 사항 이 매개변수가 함수인 경우 직렬화 프로세스 중에 직렬화된 값의 각 속성이 함수에 의해 변환되고 처리됩니다.

space는 선택적으로 출력을 아름답게 하는 데 사용되는 공백 문자열을 지정합니다(예쁜 인쇄). 매개변수가 숫자인 경우 공백 수는 10입니다. 값이 1보다 작으면 공백이 없음을 의미합니다. 매개변수가 문자열(문자열의 처음 10개 문자)인 경우 매개변수가 제공되지 않으면(또는 null인 경우) 문자열이 공백으로 처리됩니다. 공백이 없을 것입니다. 예:

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'
 
JSON.stringify({x: 5, y: 6});             
// "{"x":5,"y":6}"
 
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'
 
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
 
JSON.stringify([undefined, Object, Symbol("")]);         
// '[null,null,null]'
 
JSON.stringify({[Symbol("foo")]: "foo"});                
// '{}'
 
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'
 
JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
 
 
// undefined
 
// 不可枚举的属性默认会被忽略:
JSON.stringify(
    Object.create(
        null,
        {
            x: { value: 'x', enumerable: false },
            y: { value: 'y', enumerable: true }
        }
    )
);
 
// "{"y":"y"}"
로그인 후 복사

replacer가 배열인 경우 배열 값은 JSON 문자열로 직렬화될 속성 이름을 나타냅니다.

JSON.stringify(foo, ['week', 'month']); 
// '{"week":45,"month":7}', 只保留“week”和“month”属性值。
로그인 후 복사

3. localStorage와 결합된 JSON.stringify 사용

때때로 사용자가 만든 개체를 저장하고 브라우저를 닫은 후에도 개체를 복원하고 싶을 때가 있습니다. 다음 예는 이 상황에 적합한 JSON.stringify의 템플릿입니다.

// 创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});
 
// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session', JSON.stringify(session));
 
// 然后是如何转换通过 JSON.stringify 生成的字符串,该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
 
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);
로그인 후 복사

4. IE8 이하의 이전 버전에 대한 Polyfill 지원

JSON 개체는 이전 버전의 브라우저에서 지원되지 않을 수 있습니다. 기본적으로 JSON 개체를 지원하지 않는 브라우저(예: IE6)에서 JSON 개체를 사용할 수 있도록 JS 스크립트 시작 부분에 다음 코드를 넣을 수 있습니다.

다음 알고리즘은 기본 JSON 개체를 모방한 것입니다.

JSON3.js의 cdn을 도입할 수도 있습니다

<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script>
  JSON.stringify({"Hello": 123});
  // => &#39;{"Hello":123}&#39;
  JSON.parse("[[1, 2, 3], 1, 2, 3, 4]", function (key, value) {
    if (typeof value == "number") {
      value = value % 2 ? "Odd" : "Even";
    }
    return value;
  });
  // => [["Odd", "Even", "Odd"], "Odd", "Even", "Odd", "Even"]
</script>
로그인 후 복사

관련 권장 사항:

js json 문자열을 json 개체로 변환하는 방법 분석

위 내용은 js에서 json 문자열과 json 객체를 서로 변환하는 방법 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿