项目实战中各种场景用到的数组方法

在实际项目中数组操作是最常见之一，本文整理了常见场景下的使用数组方法

场景一：两个数组值的映射

一个数组存储了文章列表，数据结构如下：

var articles = [
{
    id:"1",
    title:"Molestiae et ratione animi sunt eum.",
    createdAt:"2021-06-04T17:37:40.357Z",
    userId:42,
    categoryId:13
 },
 ...
]

另一个数组存储了文章类型，数据结构如下

var categories = [
    {id:"13",name:"Automotive"},
    {id:"24",name:"Kids"},
    ...
]

要将文章类型的name添加到articles列表中，可以使用Array.find

articles.map((article) => {
    return {
        ...article,
        category: categories.find((c)=> String(c.name) === String(article.categoryId)) 
    }

});

示例：

Array.prototype.find()

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

示例：

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);// 12

语法：

arr.find(callback[,thisArg]);

参数：

1. callback 在数组每一项上执行的函数，接收 3 个参数: element 当前遍历到的元素; index 当前遍历到的索引; array 数组本身

2. thisArg 执行回调时用作this的对象

使用注意：find() 方法是在Es6中加入的，如果有兼容的需要可以参考MDN

场景二：数组的循环

在列表类的页面展示时，通常请求异步接口返回数组，循环这个数组进行UI展示处理。

数组的循环常用的方法有：map和forEach，具体是用map还是forEach，先看一下两者的同异，再根据需求决定用哪个。

map和forEach的相同点

1. 两者都支持循环遍历数组中的每个元素并执行一个回调函数。

const arr = [1,2,3];
arr.forEach(num => console.log(num));// 1,2,3
console.log(arr);

const arr = [1,2,3];
arr.map(num=>console.log(num)); // 1,2,3
console.log(arr);

map和forEach的不同点

1. forEach方法迭代一个数组返回的是undefined，不支持链式调用
2. map方法迭代一个数组并返回新的数组，这样就可以链接其他数组方法

const arr = [1, 2, 3];
const returnValue = arr.forEach((num)=>{
    console.log(`${num} x ${num} = ${num * num}`);
    return num*num;
});
/*
1 x 1 = 1
2 x 2 = 4 
3 x 3 = 9
*/
console.log(returnValue); // undefined

const arr = [1, 2, 3];
const returnValue = arr.map((num)=>{
    console.log(`${num} x ${num} = ${num * num}`);
    return num*num
});
/*
1 x 1 = 1
2 x 2 = 4 
3 x 3 = 9
*/
console.log(returnValue); // [1,4,9]

因为map返回新的数组，就可以链接其他数组方法，这样开发中用起来更方便

const arr = [1, 2, 3];
const returnValue = arr.map((num)=>{
    return num*num
}).reduce((acc,curr)=> acc+curr);
console.log(returnValue); // 14