从经典的for循环到forEach()方法，遍历数据集合的各种技术和方法比比皆是。但是现在比较流行的方法是.map()方法。.map()通过为数组中的每个元素指定一个函数调用来创建一个新数组。.map()是一种创建新数组的非变异方法，与仅对调用数组进行更改的变异方法相反。这可能很难记住。在本文中，我们将探讨.map()在JavaScript中的4个值得注意的用法。开始吧！对数组中的每个元素调用一个函数将字符串转换为数组在JavaScript库中用于呈现列表重新格式化数组对象技巧用例1.对数组中的每个元素调用一个函数如回调函数作为其参数之一，该函数的一个重要参数是该函数正在处理的项目的当前值。这是一个必需的参数。使用此参数，我们可以修改数组中的每个单独项目并在其之上创建一个新元素。这是一个例子：constsweetArray=[2,3,4,5,35]constsweeterArray=sweetArray.map(sweetItem=>{returnsweetItem*2})console.log(sweetArray)//[2,3,4,5,35]console.log(sweeterArray)//[4,6,8,10,70]我们可以看到原来的数组sweetArray没有被修改，所以.map()是一个非变异（non-mutating变化）方法。这里值得一提的是forEach()方法，它遍历数组，对原数据进行操作，会改变原数组。这可以进一步简化以使其更清晰：//创建一个函数来使用constmakeSweeter=sweetItem=>sweetItem*2;//我们有一个数组constsweetArray=[2,3,4,5,35];//调用我们创建的函数。更具可读性constsweeterArray=sweetArray.map(makeSweeter);console.log(sweeterArray);//[4,6,8,10,70]有像sweetArray.map(makeSweeter)这样的代码会让你在跳转到这段代码时更具可读性。已知将字符串转换为数组的.map()属于Array原型。我们如何使用它来将字符串转换为数组。别担心，我们不需要开发另一种方法来处理字符串，而是使用特殊的.call()方法。JavaScript中的一切都是对象，方法只是附加到这些对象的函数。.call()允许我们利用另一个对象的上下文。所以我们将.map()上下文从数组复制到字符串。.call()可以传递参数、要使用的上下文和“原始函数的参数”。听起来像一口？这是一个例子：constname="Chuloo"constmap=Array.prototype.mapconstnewName=map.call(name,eachLetter=>{return`${eachLetter}a`})console.log(newName)//["Ca","ha","ua","la","oa","oa"]在这里，我们只是在String上使用.map()的上下文并传递.map()期望参数的函数.您可以看到控制台中打印的内容。这类似于String的.split()方法，除了.split()方法只能在返回数组之前修改每个单独的字符串字符。在JavaScript库中用于渲染列表JavaScript库（如React）利用.map()来渲染列表中的项目。这需要JSX语法，但是.map()方法被包裹在类似mustache的JSX语法中。这是React组件的一个很好的例子。从“react”导入React；从“react-dom”导入ReactDOM；constnames=[“john”，“sean”，“mike”，“jean”，“chris”]；constNamesList=()=>({names.map(name=>{name})});constrootElement=document.getElementById("root");ReactDOM.render(,rootElement);如果你不熟悉React，那么我告诉你这是一个简单的无状态组件，它用列表渲染div。使用.map()呈现单个列表项以迭代最初创建的名称数组。该组件使用ReactDOM呈现IDroot的DOM元素。重新格式化数组对象如何处理数组中的对象？.map()可用于迭代数组中的对象，并以类似于传统数组的方式修改每个单独对象的内容并返回一个新数组。这个修改是根据回调函数返回的内容来完成的。这是一个例子：constmyUsers=[{name:'chuloo',likes:'grilledchicken'},{name:'chris',likes:'coldbeer'},{name:'sam',likes:'fishbiscuits'}]constusersByFood=myUsers.map(item=>{constcontainer={};container[item.name]=item.likes;container.age=item.name.length*10;returncontainer;})console。log(usersByFood);//[{chuloo:"grilledchicken",age:60},{chris:"coldbeer",age:50},{sam:"fishbiscuits",age:30}]我们所有的完成的是使用括号和点符号简单地修改数组中的每个对象。此用例可用于在前端应用程序上保存或解析之前处理或压缩接收到的数据。TipsUseCases一般情况下，.map()方法中的回调函数只需要接受一个参数，就是被遍历的数组元素本身。但这并不意味着map只传递一个参数给callback。这种思维惯性可能使我们容易犯错误。生成新数组元素的回调函数，具有三个参数：currentValue-回调的第一个参数，正在处理的数组中的当前元素，最常用的参数。index–回调的第二个参数，正在处理的数组中当前元素的索引。array–callback的第三个参数，调用map方法的数组。让我们看一个例子：//下面的语句返回什么：["1","2","3"].map(parseInt);//你可能认为它会是[1,2,3]//但实际结果是[1,NaN,NaN]//通常使用parseInt时只需要传递一个参数。//但实际上parseInt可以有两个参数。第二个参数是一个基数。//是使用语句“alert(parseInt.length)===2”来验证。//map方法调用回调函数时，会传递三个参数：当前遍历的元素，//元素索引，原数组本身。//第三个参数parseInt会被忽略，但是第二个参数不会，也就是说，//parseInt使用传递的索引值作为基数，从而返回NaN。functionreturnInt(element){returnparseInt(element,10);}['1','2','3'].map(returnInt);//[1,2,3]//预期结果//也可以使用简单的Arrow函数，结果同上['1','2','3'].map(str=>parseInt(str));//更简单的方法：['1','2','3'].map(Number);//[1,2,3]//与`parseInt`不同，以下结果将返回浮点数或指数：['1.1','2.2e2','3e300'].map(Number);//[1.1,220,3e+300]还有一个很实用的trick，像.map(),.reduce(),.filter()等方法都支持链式调用。例如：varmyArr=[1,2,3,4,5,6,7,8,9,10];varresult=myArr.map(function(element){//大于5的值视为5if(element>5)return5;returnelement;}).reduce(function(prev,element){//相加为上一个值，返回并代入下一轮处理returnprev+element;},0);//40console.log(结果);总结在本文中，我们了解了.map()方法在JavaScript中的主要用法。需要注意的是，.map()的功能在与其他方法结合时可以得到强大的扩展和利用。尝试找出更多用例。在评论部分留下您的意见、问题和反馈，我们将不胜感激！
