前端处理JSON数据

• 转义

  • 用\来进行转义
  • 除了\本身，要转义的还有引号、ASCII码（如\0-\37这样）什么的。
  • \r\n这种换行在json的字符串字段中要转义成\r\n

• 原生的JSON即可进行json数据的处理

  • JSON.parse()

    • JSON.parse()对转义字的符执行过程其实经历了两次转义：一次是字符串本身的转义，一次是字符串转对象时的转义。
      • 所以如果你想在字符串中放一个\，那么转成JSON对象之前的字符串中就要有4个\，也就是比正常以为的要多一倍的\。
      • 不要以为很复杂，其实就是多了一倍的\。
      • 比如想要的原始字符串文本是C:\temp\datatransfer\；正常理解字符串是这个样子："C:\temp\datatransfer\"；但是给JSON.parse()用的话，需要是这个样子："C:\\temp\\datatransfer\\"。

  • JSON.stringfy()

    • 使用replacer控制序列化输出，比如只输出一部分字段。

      • replacer是一个过滤函数（jsonObject只能是一个json对象，json数组貌似不可以？）或则一个数组（jsonObject是一个json数组也可以。但不知道输出的字段顺序按数组参数顺序，还是json对象中的原始字段顺序？）包含要被stringify的属性名。如果没有定义，默认所有属性都被stringify。

      jsonString = JSON.stringify(jsonObject, function (key, value) {
        if (fields.indexOf(key) > -1) {
          return undefined;
        } else {
          return value;
        }
      });
      
      jsonString = JSON.stringify(jsonObject, fields);
      

    • 会丢失类的成员方法，不像java、c#那样，序列化后只会有成员变量，要自己实现反序列化回指定类，as没用。

      • Typescript objects serialization?
      • JSON to TypeScript class instance?

    let foo: Foo = Object.assign(new Foo(), JSON.parse(fooJson));
    

    class SerializationHelper {
        static toInstance<T>(obj: T, json: string) : T {
            var jsonObj = JSON.parse(json);
    
            if (typeof obj["fromJSON"] === "function") {
                obj["fromJSON"](jsonObj);
            }
            else {
                for (var propName in jsonObj) {
                    obj[propName] = jsonObj[propName]
                }
            }
    
            return obj;
        }
    }
    
    var json = '{"name": "John Doe"}',
    foo = SerializationHelper.toInstance(new Foo(), json);
    

    class Serializable {
        fillFromJSON(json: string) {
            var jsonObj = JSON.parse(json);
            for (var propName in jsonObj) {
                this[propName] = jsonObj[propName]
            }
        }
    }
    
    class Foo extends Serializable {
        name: string;
        GetName(): string { return this.name }
    }
    
    var foo = new Foo();
    foo.fillFromJSON(json);
    

• Angular中

  • 可以直接把JSON文件当做对象/接口来使用，可以直接使用其各个字段名。
    • 如果想要读取非json格式的文件，为了避免异步请求文件再解析的复杂度（因为运行在浏览器客户端中），可以当做json文件的一个字段的字符串值（该转义的要转义），然后再import成json对象使用，比较方便。

  import xxx from 'src/assets/json/xxx.json';
  

  • 也可以用JSON.parse来把字符串转成对象/接口，也可以直接使用其各个字段名（虽然这种方式可能没有输入提示）。