Typescript/javascript：如何将数组映射到另一个数组中的例子

这是一个简短的教程，介绍了以下在typescript和javascript中的例子

• 如何将一个字符串数组映射成另一个字符串数组
• 如何从其他对象的数组中填充一个对象的数组。

有些时候，我们有一个从API返回的原始数组，我们想显示数组的唯一部分。

这个例子可以在Typescript和javascript中使用。

如何将字符串数组映射成数组。

这是一个简单易行的从另一个数组中填充数组的方法。

这可以通过不同的方式实现

第一种方法，使用数组的slice 方法 第二种方法，使用Array.from 方法 第三种方法，使用spread运算符

下面是一个例子，所有方法的输出都是一样的

let roles = ["one","two","three"]

let sliceRoles = roles.slice();
let fromRoles = Array.from(roles);
let newRoles = [...roles];

console.log(roles)
console.log(sliceRoles)
console.log(fromRoles)
console.log(newRoles)

如何将一个数组的对象映射到另一个数组的对象。

我们有很多方法可以实现

Array.map方法

map是数组中的一个方法，用于遍历数组中的每一个项，并转化为新的项。

这个方法接收n个大小的输入，并转换为相同大小的新输出。

例如，我们有一个用户对象的数组，每个用户包含名字，姓氏，ID，角色。

let users = [{
        "id": "1",
        "fname": "john",
        "lname": "Ken",
        "role": "admin",
    },
   {
        "id": "2",
        "fname": "Eric",
        "lname": "Dawn",
        "role": "user",
    },
    {
        "id": "3",
        "fname": "Andrew",
        "lname": "Karvin",
        "role": "admin",
    },
]

如果我们想把用户对象转换为新的数组，其中每个用户对象包含名字（名，姓），ID和角色

let newusers=users.map((user)=>{
            return {name: user.fname + ' ' + user.lname,
            id:user.id,role:user.role}

})
console.log(newusers);

数组有map()方法，迭代数组的每个元素，构建新的对象并返回新的数组。新的对象被返回并分配给newusers。

输出：

[{  "name": "john Ken",  "id": "1",  "role": "admin"}, {  "name": "Eric Dawn",  "id": "2",  "role": "user"}, {  "name": "Andrew Karvin",  "id": "3",  "role": "admin"}] 

typecript中的forEach方法

以下是一系列的步骤

• 声明any 类型的数组，初始化一个对象数组数据
• 声明新的any 类型的结果数组，并将其分配给原始数组的一部分。
• 使用forEach 循环遍历一个数组
• 将每个项目添加到新的结果中，并加入必要的字段
• 最后返回新的数组

下面是一个例子

var books:Array= [{
    "id": "1",
    "rating": 5,
    "name": "Book1"
},
{
    "id": "2",
    "rating": 4,
    "name": "Book"
},
{
    "id": "11",
    "rating": 3,
    "name": "Book3"
}];

var bookRatings:Array=[] 

console.log(bookRatings)

books.forEach(item=>{ 
   bookRatings.push(
   {
    "name":item.name,
    "rating":item.rating
   });
});

console.log(bookRatings)

输出：

 [{  "name": "Book1",  "rating": 5}, {  "name": "Book",  "rating": 4}, {  "name": "Book3",  "rating": 3}] 

Lodash和Underscore _.map来填充另一个数组对象。

Lodash和Underscore库有map方法，其行为与数组方法相同。

let result = Arrays.map(users, function transform(user) {
            return {name: user.fname + ' ' + user.lname,
            id:user.id,role:user.role}
            });