本文介绍了map给我们的js编程带来的好处及便利：
1.Map能干什么
map可以实现for循环的功能：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = ['val1', 'val2', 'val3'];
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
console.log(i);
console.log(arr);
}
arr.map(function(val, index, array) {
console.log(val);
console.log(index);
console.log(array);
});
</script>
</body>
</html>
这里的好处是，我们可以随意在map里面写函数，这样的话代码可读性会大大提高，如下：
function output(val, index, array) {
console.log(val);
console.log(index);
console.log(array);
}
arr.map(output);
2.Map的兼容性
ECMAScript 5 标准定义了原生的 map() 方法，所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用，就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。
3.map和for哪个快
当然，使用for会比map快点，但是差别不是很大，如果对性能要求没有到极致的地步，这点性能差别可以忽略。
如今，在程序员学习过程中基本都会发现一个叫 map 的函数。在发现 map 函数之前，你可能都会使用 for 循环来处理需要多次执行某一行为的场景。一般情况下，在这个循环过程中都会伴随一些数据变换。
命令式
例如，你团队的销售人员交给你一个很长的电邮地址列表。这些邮箱地址获取的时候并没有经过很好地校验，以至于有些是大写的，有些是小写的，还有一些是大小写混合的。使用 for 循环进行数据处理的代码如下：
var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
function getEmailsInLowercase(emails) {
var lowercaseEmails = [];
for (var i = 0; i < emails.length; i++) {
lowercaseEmails.push(emails[i].toLowerCase());
}
return lowercaseEmails;
}
var validData = getEmailsInLowercase(mixedEmails);
这样的做法是有效的，但却把一个实际上简单常见的操作变得复杂。使用 for 循环的函数牵扯了很多不必要的细节。一些痛点如下：
这是命令式的编程方法。我们似乎在口述给电脑该怎么做这件事。
困惑
为了使之前的代码更加清晰整洁，我们改用 map 函数。在任何 map 函数的说明文档中，我们都会看到诸如 “array”、“each”、“index”之类的词。这表明，我们可以把 map 当做不那么“隆重”的 for 循环使用，事实上也是可行的。现在来修改一下之前的代码：
var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
function getEmailsInLowercase(emails) {
var lowercaseEmails = [];
emails.map(function(email) {
lowercaseEmails.push(email.toLowerCase());
});
return lowercaseEmails;
}
var validData = getEmailsInLowercase(mixedEmails);
这样写不仅能用，而且代码比使用 for 循环更加清楚。除了代码量更少，我们也不用再告诉程序去记录索引和遍历列表的方向了。
然而，这还不够好。这样写还是命令式的编程。我们还是指挥的太多。实际上我们牵涉了很多不必要的细节，似乎都在领着程序的手走每一步。
声明式
我们需要改变我们关于数据变换的思考方式。我们不需要想着：“电脑啊，我需要你取出列表中第一个元素，然后把它转换成小写，再存储到另一个列表中，最后返回这个列表”。相反，我们应该这样想：“电脑，我这有一个混合了大小写的邮件地址列表，而我需要一个全是小写的邮件地址列表，这是一个能够进行小写转换的函数”。
var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
function downcase(str) {
return str.toLowerCase();
}
var validData = mixedEmails.map(downcase);
이런 방식의 글쓰기가 이해하기 쉽다는 것은 의심의 여지가 없으며, 이것이 프로그래밍의 본질입니다. 다른 사람에게 자신의 아이디어를 알리면 이 사람이 미래의 다른 프로그래머일 수도 있고 여러분일 수도 있습니다. 위의 코드는 "유효한 데이터는 소문자 변환 기능을 사용하여 매핑된 메일함 목록입니다"라고 말하고 있습니다.
이러한 고급 방법을 사용하여 아이디어를 전달하는 것은 함수형 프로그래밍의 핵심 원칙이며 우리는 그렇게 합니다. 간단한 부분을 이해하기 쉬운 단일 기능과 결합하여 복잡한 프로그램을 구축하세요.
이런 글쓰기 방식에는 몇 가지 추가적인 이점이 있습니다. 다음 표는 특별한 순서가 없습니다.
맵의 첫 번째 매개변수로 익명 함수를 전달하는 것이 일반적이지만, 함수를 추출하고 적절하게 이름을 지정하는 것이 좋습니다. 이렇게 하면 이 함수를 작성하려는 의도를 기록하는 데 도움이 되어 다른 개발자가 코드를 분석하지 않고도 함수 이름을 통해 함수를 이해할 수 있습니다.
브라우저 지원
ECMAScript 5 표준은 기본 map() 메서드를 정의하므로 브라우저 호환성이 더 좋습니다. IE 9 이전 버전에서 사용하려면 폴리필을 도입하거나 Underscore 및 Lodash와 같은 라이브러리를 사용해야 합니다.
실적
대부분의 경우 실제 코딩에서는 맵 함수와 for 루프 사이에 뚜렷한 성능 차이가 없습니다. for 루프가 약간 더 빠르지만 그래픽이나 물리 엔진을 작성하지 않는 경우에는 이 차이를 고려할 필요가 없습니다. 물론 그렇다고 해도 이러한 성능 개선이 도움이 될 것이라고 확신하지 않는 한 다음을 수행하는 것이 합리적입니다. 이런 식으로 최적화하지 마세요.
요약
논리를 단일 기능 메서드로 분리하고 이를 데이터 구조에 적용하면 코드가 더욱 정확하고 강력하며 이해하기 쉬워집니다. 우리의 철학은 가능한 한 일반화하는 것이며 일반성은 코드 재사용에 도움이 될 수 있습니다. 이러한 사고방식을 배우면 Javascript 기술을 향상시키는 데 도움이 될 뿐만 아니라 Ruby 및 Haskell과 같은 대부분의 다른 프로그래밍 언어에도 반영될 수 있습니다.
그러므로 다음에 for 루프를 사용할 때는 다시 생각해 보세요. 처리하려는 데이터가 반드시 일반 배열일 필요는 없습니다. 객체를 처리하고, 해당 값을 꺼내고, 함수를 사용하여 매핑하고, 최종적으로 결과 배열을 정렬할 수 있습니다.
이상은 루프가 아닌 맵에 대한 간략한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
