Intro

昨天记录了JS里fetch()的使用方法，在实际的应用场景中，JS获取到数据之后肯定还需要对数据进行处理，而在lecture里，演示的代码还在使用for循环等方法，但其实在现代JS开发中使用.filter()和 .map()用来处理的情况更多，使用这两种方法对于后续课程使用的React也更加友好

.filter()

就和其名字所描述的一样，.filter()的主要起到过滤的作用，其判断是否要返回数据的条件依靠的是其括号内所编写的回调函数所返回的值的真假

  • 如果回调函数返回 true，这个元素放行，进入新数组

  • 如果回调函数返回 false，这个元素被丢弃

需要注意的是，使用.filter()并不会对原数组进行任何改变

看代码说明会更直观一点，假设我们有一个数组allPosts，里面装着我们请求返回的json数据

1
2
3
4
5
const allPosts = [
  { id: 1, title: "Popipa", isPublished: true, views: 150 },
  { id: 2, title: "Roselia", isPublished: false, views: 0 },
  { id: 3, title: "Mygo", isPublished: true, views: 300 }
];

如果我们需要获取所有isPublished: true的文章，就可以直接使用.filter()

1
2
3
const publishedPosts = allPosts.filter((post) => {
  return post.isPublished === true;
});

我们判断这个数据是否应该存入publishedPosts里的判断就是根据回调函数

1
2
3
(post) => {
  return post.isPublished === true;
}

所返回的值来进行判断的

如果使用for和if来进行筛选的话，就会变成

1
2
3
4
5
6
7
8
9
10

let publishedPosts = []; 

for (let i = 0; i < allPosts.length; i++) {
  const post = allPosts[i]; 
  
  if (post.isPublished === true) {
    publishedPosts.push(post); 
  }
}

这样的写法过于冗长且不够安全，同时也没有发挥出现代 JS 开发中声明式编程的便捷

.map()

接下来讲讲.map()

同样的，.map()也需要接收一个回调函数作为参数，而.map()的作用也就是根据回调函数里写的规则对数据进行变换

使用.map()也不会对原数组进行任何改变

还是刚才的例子，如果我们需要进一步获取所有已经published的文章的标题，使用.map()可以这样写

1
2
3
const postTitles = publishedPosts.map((post) => {
  return post.title; // 回调函数返回了什么，新数组里装的就是什么
});

链式调用

当.map()或者.filter()执行完毕之后，会在内存里生成一个新的数组，既然它是个标准数组，它自然就有资格紧接着调用另外一个

所以，刚刚我们进行的筛选可以直接写成

1
2
3
4
const postTitles = allPosts
  .filter(post => post.isPublished)   // 筛出已发布的
  .map(post => post.title);           //获取标题字段