在Typescript中把对象转换为数组/从数组转换为对象的教程

3,441 阅读2分钟

Typescript是javascript的超集,具有编译类型检查功能。

在应用程序开发中,我们经常遇到这样的情况:从REST API/数据库中获取的数据是以数组/对象的形式存在的,因此需要将其转换为对象/数组。

每个开发者在开发过程中都会遇到这样的用户案例。

在这篇博文中,我们将看到在javascript/Typescript/Angular应用程序中将对象转换为数组的方法。

首先,我们将看到如何在typescript中创建对象的数组。

一个数组的对象声明和初始化。

例如,数组包含模型数据,如下所示。

[  
    {id: 1, name: 'Kiran'},  
    {id: 2, name: 'Tom'},  
    {id: 3, name: 'John'}  
 ]  

下一步,是创建一个代表数据模式的接口。

export interface Emp{  
    id:number;  
    name:string;  
}  
const arr: Emp[] = [  
    {id: 1, name: 'Kiran'},  
    {id: 2, name: 'Tom'},  
    {id: 3, name: 'John'}  
 ];  

如何将对象转换为数组示例

本节将通过实例说明我们如何在Angular和Typescript中把对象转换成数组。

Typescript代码

让我们假设你有一个对象声明了多个属性。

首先使用object.key()方法获取命名的键。

这个方法从给定的对象中获取键并返回一个键的数组。

使用map()方法,定义回调。而回调是为对象的每个元素执行的。

  
var employees = {   
    kiran: { age:30,salary:10000},  
    john: { age:35,salary:15000},  
    Tom: { age: 21, salary:5000}  
}  
let arr = [];  
Object.keys(employees).map(function(key){  
    arr.push({[key]:employees[key]})  
    return arr;  
});  
console.log('Object=',employees)  
console.log('Array=',arr)  

输出是

Typescript Object to Array with Example

Angular代码

例如,对象数据包含以下属性

let empdata={  
name:"Kiran",  
age:30,  
salary:10000  
}  

首先创建一个代表上述内容的接口

export interface Emp{  
  name: string;  
  age: number;  
  salary: number;  
}  

在该组件中,创建一个空数组

emps: Emp[] = []; 

使用推送方法将对象添加到数组中

this.emps.push(data);  

这个推送对象到数组,输出是

0:{name: "kiran", age: 45, salary: 2000}  
length:1 

如果你想转换对象属性--姓名、年龄、工资

let  emp = {  
    name:"kiran",  
    age:45,  
    salary:2000,  
  };  
  
  let array = [];  
  for(let key in emp){  
   if(emp.hasOwnProperty(key)){  
     array.push(emp[key]);  
   }  
  }  
  console.log(array);  

输出是

0:"kiran"  
1:45  
2:2000  

如何将数组转换为对象?

我们有很多方法可以进行转换,这取决于对象的结构。

使用数组推送方法的例子

声明对象和空数组,使用数组推送方法,我们可以转换为数组

let  myObject = {  
    name:"kiran",  
    age:45,  
    salary:2000,  
  };  
let myArray = [];  
myArray.push(myObject);  
console.log(myArray);  

输出是

Array(1)0: {name: "kiran", age: 45, salary: 2000}length: 1__proto__: Array(0) 

使用Spread Operator和Object.assign()方法的例子

我们可以将数组对象转换为单个对象。

var array = [{ Kiran: "30" }, { Tom: "50" }],  
object = Object.assign({}, ...array);  
console.log(object);  

输出是

Kiran:"30"  
Tom:"50"