react native map 的使用示例

最新推荐文章于 2025-12-02 06:52:40 发布

原创最新推荐文章于 2025-12-02 06:52:40 发布 · 8.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中map方法的基本用法及实例，展示了如何通过map方法处理数组元素并生成新的数组，特别强调了回调函数的使用及其返回值的重要性。

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：


var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16
callback需要有return值，如果没有，就像下面这样：
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});

arrayOfSquares.forEach(console.log);

结果如下图，可以看到，数组所有项都被映射成了undefined：

在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子（之后的兼容demo也是该例子）：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com