【问题标题】:ES6/TS/Angular2 parsing JSON to DateES6/TS/Angular2 将 JSON 解析为 Date
【发布时间】:2017-08-17 06:59:43
【问题描述】:

我有以下 json:

let JSON_RESPONSE = `{"birthDates": ["2017-01-02","2016-07-15"]}`

我有一个 TypeScript 对象,声明了 Date 数组和一个 ES6 特色构造函数初始化:

class Children {
  birthDates: Date[] = []

  constructor(values: Object = {}) {
    Object.assign(this, values)
  }
}

我想从 JSON 输出初始化这个对象:

const children = new Children(JSON.parse(this.JSON_RESPONSE))
children.birthDates.forEach(it => {
  console.log(it.getDate())
})

显然它不起作用,因为Children#birthDatesObject 类型而不是Date。添加显式 new Date() 初始化有助于:

children.birthDates.forEach(it => {
  console.log(new Date(it).getDate())
})

问题是如何在对象的构造器阶段轻松地将 JSON 转换为合法的 Date 对象,而无需手动将每个属性映射到 JSON 输入。

显然,Object.assign 不符合我的要求,并使用类型继承执行 shallow 复制而不是 deep

【问题讨论】:

    标签: javascript json angular typescript ecmascript-6


    【解决方案1】:

    我会在构造函数中使用Array.prototype.map 来获取所有值作为日期:

    type Data = {
        birthDates: string[];
    }
    
    class Children {
        birthDates: Date[];
    
        constructor(values?: Data) {
            if (values) {
                this.birthDates = values.birthDates.map(value => new Date(value));
            } else {
                this.birthDates = [];
            }
        }
    }
    

    (code in playground)


    编辑

    如果数据有更多字段,您可以使用Object.assign,然后使用映射版本覆盖birthDates 属性:

    interface IChildren {
        size: number;
        groudId: string;
        birthDates: string[];
    }
    
    class Children {
        size: number = 0;
        groudId: string = null;
        birthDates: Date[] = [];
    
        constructor(values?: IChildren) {
            if (values) {
                Object.assign(this, values);
            }
    
            this.birthDates = this.birthDates.map(value => new Date(value));
        }
    }
    

    (code in playground)

    【讨论】:

    • 如果我的模型中有另一个字段怎么办?比如说string 类型? if 的数量会随着每个字段的增加而成倍增加,不是吗?
    • 检查我修改后的答案
    • 这正是我想要的,非常感谢!据我所知,唯一的小缺点是birthDates 设置了两次。但我可以忍受它。
    • 它实际上设置了 3 次,但要更改它,您需要添加更多代码,这会引发“值得吗?”的问题
    • 啊,是的,我错过了[] 的默认初始化。
    猜你喜欢
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 2014-11-26
    • 1970-01-01
    • 2021-12-25
    • 1970-01-01
    • 1970-01-01
    • 2017-02-25
    相关资源
    最近更新 更多