前端JS中的map方法

一、定义

        map()是JavaScript数组的内置方法之一，用于在每个数组元素上执行指定的操作，并返回一个新的数组，新数组包含操作后的元素。

二、语法

array.map(callback(currentValue, index, array), thisArg)

// array：要在其上调用map()方法的数组。
// callback：一个函数，用于对数组的每个元素进行操作。它可以接收三个参数：
// currentValue：当前正在处理的数组元素。
// index（可选）：当前元素的索引。
// array（可选）：正在处理的原始数组。
// thisArg（可选）：可在callback函数中作为this值使用的对象。

三、用法

        当使用map()方法时，它需要一个回调函数作为参数，并在数组的每个元素上调用该函数。回调函数会接收三个参数：当前正在处理的元素、当前元素的索引和正在处理的数组。

        map()方法会返回一个新的数组，其中包含执行回调函数后的每个元素。

四、实例

        1.map()方法以一个匿名函数作为回调函数，将numbers数组中的每个元素乘以2，并返回一个新的数组doubledNumbers。

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

        2.后台管理系统中，常用到的下拉框取值（调用接口）

// 获取银行下拉框数据列表
    getBankList() {
      // 调用list接口发起请求
      this.request("/xxx/xxx/xxx/list", {
        method: "POST",
        data: {
          status: "Y",
        },
        success: (res) => {
          let list = res?.data?.bankList || [];
          this.selectData = list.map((item) => {
            return {
              key: item.bankId,
              value: item.bankName,
            };
          });
          // selectData为页面中银行下拉框的数据
        },
        error: (err) => {},
      });
    },