这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战
上一篇文章简单学习了 高阶函数的使用, 有提到数组的一些方法(forEach())也是高阶函数 本篇继续学习 JavaScript 数组的一些相关方法
前几篇文章-直达列表 有学习 JavaScript 并不完美但是不影响其运行的一些神奇"bug":
JavaScript 数组相关方法-map
.map() 和 forEach()同样也可以理解为高阶函数, 它们都可接收一个函数作为参数, 来对数组遍历的每个元素进行操作.
MDN -
Array.prototype.map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
map 方法的语法、参数
map 看作高阶函数, 传递一个 function 函数作为参数:
let new_array = arr.map(function callback(currentValue[, index[, array]]) {
// map 方法 对原数组每个元素进行处理后作为元素赋值给 new_array
}[, thisArg])
如上语法: map 方法 会给原数组中的每个元素都按顺序调用一次 callback 函数。
callback(currentValue, index, array) 函数会被自动传入三个参数： 数组元素，元素索引，原数组本身, 通常我们仅需要第一个参数，而忽略了传入的后面两个参数。
callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组就是 let 定义的 new_array.
map()方法使用 usage
一个简单的用法: 传递 String 将数值数组转换为字符串数组:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.map(String) // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
map() 作为高阶函数，事实上它把运算规则抽象了, 帮我们将复杂代码简化,书写更方便.
通常在请求到后端的数据时都需要我们对其进行处理, 拿到我们想要的字段类型数据,(一个好后端是多么重要!)实际项目开发中的应用
// 接口封装
import axios from 'axios';
export default getStudentList({
pageCount,
pageNo,
...
}) {
return axios({
url: '/api/v/student-list',
method: 'get',
params: {
page_count: pageCount,
page_no: pageNo,
},
})
}
let params = {pageCount: 20, pageNo: 2}
// 请求数据
const res = await getStudentLists(params)
// 处理数据
const studentList = res.map(fn)
下文预告:
下文学习一个高级一点的方法, 也是高阶函数 reduce() 也是处理数据常用的进阶方法.
