首页 > web前端 > js教程 > 如何使用 JavaScript 以相反的顺序在数组上使用 map() ?

如何使用 JavaScript 以相反的顺序在数组上使用 map() ?

PHPz
发布: 2023-08-30 08:33:15
转载
579 人浏览过

如何使用 JavaScript 以相反的顺序在数组上使用 map() ?

我们已经给出了元素数组,并且需要通过 JavaScript 以相反的顺序在数组上使用 map()。

map() 方法映射与结果数组中特定数组元素相关的新元素。有时,我们需要以相反的顺序映射元素。有多种方法可以以相反的顺序在数组上使用 map()。我们将一一了解所有方法。

map()方法简介

语法

按照下面的语法使用map()方法。

array.map((ele, ind, array) => {
   return ele + 20;
})
登录后复制

参数

  • ele – 它是一个数组元素。

  • ind – 当前元素的索引。

  • array – 这是一个我们使用了map()方法的数组。

反转数组并使用map()方法

要以相反的顺序对数组使用map(),我们可以首先使用JavaScript的reverse()方法反转数组。之后,我们可以使用带有反转数组的map()方法。

语法

用户可以按照下面的语法反转数组,然后使用map()方法。

let reversedArray = [...numbers].reverse();
let resultant_array = reversedArray.map((element, index) => { 
})
登录后复制

在上面的语法中,我们使用了扩展运算符和reverse()方法来反转数字数组。之后,我们将 map() 方法与反转数组一起使用。

示例 1

在此示例中,我们创建了一个包含不同数字的数字数组。接下来,我们使用reverse()方法反转数字数组并将其存储在反转数组变量中。在输出中,用户可以看到反转的数组。

之后,我们使用map()方法将reverseArray的每个元素相乘,用户可以在输出中观察到。

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [10, 20, 5, 3, 2, 6, 8, 532, 7, 45, 2, 54, 76, 789];
      let reversedArray = [...numbers].reverse();
      output.innerHTML += "The original array is " + numbers + "<br/>";
      output.innerHTML += "The reversed array is " + reversedArray + "<br/>";
      let resultant_array = reversedArray.map((element, index) => {
         return element + index;
      })
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>"
   </script>
</body>
</html>
登录后复制

在map()方法的回调函数中以相反的顺序访问元素

要在数组上以相反的顺序使用map()方法,我们可以以相反的顺序访问数组元素,而不是颠倒数组。我们可以在map()方法的回调函数中传递当前索引,即数组本身,并使用它以相反的顺序访问元素。

语法

用户可以按照下面的语法在map()方法中以相反的顺序访问元素。

let resultant_array = array.map((element, index, array) => {
   array[array.length - index - 1];
})
登录后复制

在上面的语法中,array.length – index -1 索引给出最后一个数组元素。

示例 2

在下面的示例中,我们将map()方法与numbersArray一起使用。在map()方法中,我们使用当前元素的数组长度和索引从数组末尾访问元素,并在返回之前将其乘以2。

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output'); 
      let numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let resultant_array = numbersArray.map((element, index, array) => {
         
         // access elements in reverse order and return after multiplying with two
         return array[array.length - index - 1] * 2;
      })
      output.innerHTML += "The original array is " + numbersArray + "<br/>";
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>";
   </script>
</body>
</html> 
登录后复制

首先使用map()方法,然后反转结果数组

在这种逆序映射数组元素的方法中,我们将首先使用map()方法和reverse()方法。我们可以使用 slice() 和 reverse() 方法反转结果映射数组。

语法

用户可以按照以下语法先使用map()方法,然后再使用reverse()方法。

Let new_array = strings.map((element) => {
   
   // return element
});
new_array.reverse(); 
登录后复制

在上面的语法中,new_array 包含映射的值,我们对 new_array 使用了reverse()方法。

示例 3

在下面的示例中,我们创建了字符串数组。我们使用 map() 方法将每个字符串元素的第一个字符大写。之后,我们使用reverse()方法来反向映射元素。这样,我们就以相反的顺序映射了字符串元素。

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let strings = ["hello", "hi", "javascript", "typescript", "tutorialspoint"];
      
      // use map() method first
      let capitalized = strings.map((element) => {
         return element.substring(0, 1).toUpperCase() + element.substr(1);
      });
      
      // reverse the array
      capitalized.reverse();
      output.innerHTML += "The original array is " + strings + "<br/>";
      output.innerHTML += "The resultant array is " + capitalized + "<br/>";
   </script>
</body>
</html>
登录后复制

我们学习了通过 JavaScript 在数组上以相反顺序使用 map() 的三种方法。最好的方法是第二种方法,在 map() 方法中以相反的顺序访问数组元素,因为它比其他方法更省时并且占用更少的内存。

以上是如何使用 JavaScript 以相反的顺序在数组上使用 map() ?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板