JS语法之：map()方法

比眉伴天荒 2022-04-22 19:42 136阅读 0赞

[MDN web docs][]上面说：

> map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

并举了个例子：

var array1 = [1,4,9,16];
    const map1 = array1.map(x => x *2);
    console.log(map1);

打印结果为：

> Array [2,8,18,32]

而我这样写时：

var array1 = [1, 4, 9, 16];
    
    const map1 = array1.map(x => {
        if (x == 4) {
            return x * 2;
        }
    });
    
    console.log(map1);

打印结果为：

> Array [undefined, 8, undefined, undefined]

为什么会出现三个undefined呢？而不是我预期的\[1,8,9,16\]。

这样写只是增加了一个条件，即x的值为4时才乘以2，之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

var array1 = [1, 4, 9, 16];
    
    const map1 = array1.map(x => {
        if (x == 4) {
            return x * 2;
        }
        return x;
    });

这里注意**箭头函数**有两种格式：  
1.只包含一个表达式，这时花括号和return都省略了。  
2.包含多条语句，这时花括号和return都不能省略。

大家可以参考：[ES6标准新增了一种新的函数][ES6]

[MDN web docs]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[ES6]: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关数组之map方法详解

原理： map作用是映射调用此方法的数组，不会改变原始数组，返回原始数组每一项的操作，组成一个新数组，长度和原始数组一致方法： Array.map((

桃扇骨/ 2024年04月08日 13:29/ 0 赞/ 37 阅读

相关 webpack 之 js语法检查eslint

webpack 之 js语法检查eslint // 用来拼接绝对路径的方法 const { resolve} = require('pat

左手的ㄟ右手/ 2023年01月10日 10:06/ 0 赞/ 183 阅读

相关 JS之map函数

1 在字符串中使用map 在一个 [`String`][String] 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组： v

Dear 丶/ 2022年07月12日 04:18/ 0 赞/ 156 阅读

相关 Thymeleaf语法取map值的方法

springboot技术学习 [https://www.itkc8.com][https_www.itkc8.com] 最近项目中使用thymeleaf语法实现前端取值，遇到

素颜马尾好姑娘i/ 2022年05月28日 08:36/ 0 赞/ 467 阅读

相关 JS语法之：map()方法

[MDN web docs][]上面说： > map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。并举了个例子： var

比眉伴天荒/ 2022年04月22日 19:42/ 0 赞/ 137 阅读

相关 JS语法之：require

JS中，一个模块加载另一个模块有两套规范：CommonJS规范和AMD规范。 > CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范

àì夳堔傛蜴生んèń/ 2022年04月15日 04:56/ 0 赞/ 154 阅读

相关 JS语法之：rest参数

《JavaScript高级程序设计》在讲Function类型时说： > 说起来ECMAScript中什么最有意思，我想那莫过于函数了。今天来看看有意思的地方之一：rest

- 日理万妓/ 2022年04月15日 03:09/ 0 赞/ 139 阅读

相关 JS语法之：数组拼接

功能：将两个数组拼接到一起。实现方式一（场景一）：forEach let data1 = [1,2,3]; let data2 = [4,5,6];

ゝ一世哀愁。/ 2022年03月26日 07:17/ 0 赞/ 248 阅读

相关 JS语法之：async和await

> async 表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。 > > 在没有await的情况下执行async函数，它会立即执行，返回一个Promise

比眉伴天荒/ 2022年03月16日 06:12/ 0 赞/ 129 阅读

相关原生js源码之Array数组map方法

`map` 方法创建一个新数组，其结果是该数组中的每个元素是执行一次提供的函数后的返回值。语法： var new\_array = arr.map(callb

た入场券/ 2021年07月24日 12:45/ 0 赞/ 389 阅读