JavaScript 知识碎片[一] Array 数组方法之map()

痛定思痛。 2022-12-20 12:40 141阅读 0赞

> 业精于勤 荒于嬉

**map() 方法是Array 的迭代方法之一**，**`map()` 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。**

***关注点：：创建新数组***

### **基本用法** ###

// 创建一个新数组
            const array1Map = [1, 4, 9, 16];
    
            // pass a function to map
            const map1 = array1Map.map(x => x * 2);
    
            console.log(map1);
            console.log(array1Map)
            // expected output: Array [2, 8, 18, 32]

###  ###

> ### 语法 ###
> 
>     var new_array = arr.map(function callback(currentValue[, index[, array]]) {
>      // Return element for new_array 
>     }[, thisArg])
> 
> **参数**
> 
> `callback`
> 
> 生成新数组元素的函数，使用三个参数：
> 
> `currentValue`
> 
> `callback` 数组中正在处理的当前元素。
> 
> `index`可选
> 
> `callback` 数组中正在处理的当前元素的索引。
> 
> `array`可选
> 
> `map` 方法调用的数组。
> 
> `thisArg`可选
> 
> 执行 `callback` 函数时值被用作`this`。
> 
> **返回值**
> 
> 一个由原数组每个元素执行回调函数的结果组成的新数组。
> 
> ### 描述 ###
> 
> `map` 方法会给原数组中的每个元素都按顺序调用一次 `callback` 函数。`callback` 每次执行后的返回值（包括 [`undefined`][undefined]）组合起来形成一个新数组。 `callback` 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 `delete` 删除的索引则不会被调用。
> 
> 因为`map`生成一个新数组，当你不打算使用返回的新数组却使用`map`是违背设计初衷的，请用`forEach`或者`for-of`替代。你不该使用`map`: A)你不打算使用返回的新数组，或/且 B) 你没有从回调函数中返回值。
> 
> `callback` 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。
> 
> 如果 `thisArg` 参数提供给`map`，则会被用作回调函数的`this`值。否则[`undefined`][undefined]会被用作回调函数的`this`值。`this`的值最终相对于`callback`函数的可观察性是依据[the usual rules for determining the this seen by a function][]决定的
> 
> `map`不修改调用它的原数组本身（当然可以在 `callback` 执行时改变原数组）
> 
> `map` 方法处理数组元素的范围是在 `callback` 方法第一次调用之前就已经确定了。调用`map`方法之后追加的数组元素不会被`callback`访问。如果存在的数组元素改变了，那么传给`callback`的值是`map`访问该元素时的值。在`map`函数调用后但在访问该元素前，该元素被删除的话，则无法被访问到。
> 
> 根据规范中定义的算法，如果被map调用的数组是离散的，新数组将也是离散的保持相同的索引为空。

### 示例 ###

*求数组中每个元素的平方根*

// 如下创建了一个新数组 值是原来每个数组值的平方根
    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

*使用 map 重新格式化数组中的对象*

//以下代码使用一个包含对象的数组来重新创建一个格式化后的数组。
    var kvArray = [{key: 1, value: 10}, 
                   {key: 2, value: 20}, 
                   {key: 3, value: 30}];
    
    var reformattedArray = kvArray.map(function(obj) { 
       var rObj = {};
       rObj[obj.key] = obj.value;
       return rObj;
    });
    
    // reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}], 
    
    // kvArray 数组未被修改: 
    // [{key: 1, value: 10}, 
    //  {key: 2, value: 20}, 
    //  {key: 3, value: 30}]

*一般的map 方法*

//下面的例子演示如何在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：
    var map = Array.prototype.map
    var a = map.call("Hello World", function(x) { 
      return x.charCodeAt(0); 
    })
    // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

*querySelectorAll 应用*

//下面代码展示了如何去遍历用 querySelectorAll 得到的动态对象集合。在这里，我们获得了文档里所有选中的选项，并将其打印：
    var elems = document.querySelectorAll('select option:checked');
    var values = Array.prototype.map.call(elems, function(obj) {
      return obj.value;
    });

*Mapping 含 undefined的数组*

// 这块是原来没太注意的 undefined 也是一个元素 filterNumber.length = 4
    var numbers = [1, 2, 3, 4];
    var filteredNumbers = numbers.map(function(num, index) {
      if(index < 3) {
         return num;
      }
    });
    //index goes from 0,so the filterNumbers are 1,2,3 and undefined.
    // filteredNumbers is [1, 2, 3, undefined]
    // numbers is still [1, 2, 3, 4]

> 想把所有的知识点都烂熟于心

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[undefined]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined
[the usual rules for determining the this seen by a function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/43faced4d8ef4fd2873f2715fff1fbb8.png