js对象添加动态属性

在业务中，经常会遇到使用同个方法调用多个同类型接口，以下简单模拟两个API接口

 // api-1

 {

    code: 0,

    status: 200,

    title: 'web前端框架',

    list: [

      {id: 1, name: 'React'},

      {id: 2, name: 'Vue'},

      {id: 3, name: 'Angular'}

    ]

 }

 // api-2

 {

    code: 0,

    status: 200,

    title: '后端框架',

    list: [

      {id: 4, name: 'Laravel'},

      {id: 5, name: 'Django'},

      {id: 6, name: 'Flask'}

    ]

 }

前端请求

1. 声明接收数据的空对象

 let front_end = {}

 let back_end = {}

2. 使用ajax或则相关插件（axios, fetch等）请求API数据，这里略过直接拿到数据分别赋值给response1, response2

　　其实这里相当于实际项目中，请求api接口得到的res返回数据

 let respone1 = {

         code: 0,

         status: 200,

         title: 'web前端框架',

         list: [

             { id: 1, name: 'React' },

             { id: 2, name: 'Vue' },

             { id: 3, name: 'Angular' }

         ]

 }

 let respone2 = {

      code: 0,

      status: 200,

      title: '后端框架',

       list: [

             { id: 4, name: 'Laravel' },

             { id: 5, name: 'Django' },

             { id: 6, name: 'Flask' }

         ]

 }

3. 创建处理数据方法

function getList(res, key) {

  let temp= {}  // 声明一个临时对象

  temp[key] = res.list   // 将返回的数据赋值给对象的属性key

  console.log(temp)

}

4. 调用方法

 getList(respone1, 'front_end')

 getList(respone2, 'back_end')

得到的结果如下

js对象添加动态属性

到此，就可以使用front_end和back_end对象分别填充模板页面了。

总结：

1. 这里使用javascript对象的动态属性，绑定到指定的对象，

2. 避免了同类型接口需要多个处理方法。

3. 上述key值，必须和初始化的对象名相同，否则不能直接使用对象

秒客网

js对象添加动态属性

相关文章