如何跳過 .map() 中的元素？-js教程-PHP中文網

首頁

web前端

js教程

如何跳過 .map() 中的元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 01:57 PM

如何跳过 .map() 中的元素？

在 JavaScript 中，我們有時需要在使用 map() 方法時跳過陣列元素。例如，只有當數組值是有限的時，我們才需要在對元素執行一些數學運算後將值從一個數組映射到另一個數組。

在這種情況下，使用者可以使用以下方法在使用map()方法時跳過陣列元素。

使用 if-else 語句

在 array.map() 方法中，我們可以使用 if-else 語句來跳過該元素。如果該元素滿足if-else語句條件，則需要傳回該元素進行映射；否則，我們可以傳回空值。

文法

使用者可以依照下列語法使用if-else語句跳過map()方法中的元素。

array.map((number) => {
   if (condition) {
   
      // return some value
   }
   return null;
})

在上面的語法中，如果 if-else 語句的條件評估為 true，我們將傳回一些值；否則，我們傳回 null。

範例 1

在下面的範例中，我們建立了包含數值的陣列。我們的目標是將每個正元素與兩個相乘並將它們映射到乘法器數組。在 map() 方法中，我們使用「element > 0」條件來檢查陣列是否為正，如果計算結果為 true，則傳回乘以 2 後的數字。

在輸出中，使用者可以看到當我們傳回空值時，該陣列索引顯示為空。

<html>
<body>
   <h2 id="Using-the-i-if-else-i-statement-to-skip-over-element-in-the-array-map-method">Using the <i> if-else </i> statement to skip over element in the array.map() method</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output');
   let array = [10, 20, 34, 4, 5, 6, 0, -1, 3, 2, 4, -2];
   let multiplier = array.map((number) => {
      if (number > 0) {
         return number * 2;
      } else {
         return null;
      }
   })
   output.innerHTML += "The final array after skipping the negative number in the map() method is - " + multiplier;
</script>
</html>

將filter()方法與map()方法結合使用

我們可以在map()方法之前使用filter()方法。使用filter()方法，我們可以刪除一些元素並過濾另一個陣列中所需的元素。

之後，我們可以將map方法與filter()方法建立的陣列一起使用，這樣我們就可以間接跳過map()方法中的元素。

文法

使用者可以依照下面的語法使用filter()方法來跳過map()方法中的元素。

let filteredValues = array.filter((string) => {
   
   // filtering condition
})
let str_array = filteredValues.map((element) => {
   
   // map value
})

在上面的語法中，首先，我們從陣列中過濾值，並對過濾後的值使用 map() 方法。

範例 2

我們在下面的範例中建立了一個包含不同字串值的陣列。我們的目標是將所有字串轉換為大寫，其中第一個字元為大寫。因此，首先，我們使用filter()方法過濾所有第一個字元為大寫的字串，並將它們儲存在filteredValues陣列中。

之後，我們將使用帶有filteredValues數組的map()方法將它們轉換為大寫後將它們映射到一個新數組。

<html>
<body>
   <h2 id="Using-the-i-array-filter-i-method-to-skip-over-element-in-the-array-map-method">Using the <i> array.filter() </i> method to skip over element in the array.map() method.</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output'); 
   let array = ["Hello", "hi", "JavaScript", "typescript", "C", "CPP", "html"];
   let filteredValues = array.filter((string) => {
      if (string.charCodeAt(0) > 96 && string.charCodeAt(0) < 123) {
         return true;
      }
      return false;
   })
   let str_array = filteredValues.map((element) => {
      return element.toUpperCase();
   })
   output.innerHTML += "The filtered values from the array are " + filteredValues + "<br/>";
   output.innerHTML += "The final array after skipping some strings in the map() method is - " + str_array + "<br>";
</script>
</html>

使用 array.reduce() 方法

map() 方法將元素映射到新陣列。我們也可以使用reduce()方法來達成相同的目的。我們可以使用reduce()方法取得一個空數組並將元素一一地對應到該數組。

文法

使用者可以按照下面的語法使用reduce()方法來像map()方法一樣工作並跳過一些元素。

let final_Array = numbers.reduce(function (array, element) {
   if (condition) {
      
      // perform some operation
      
      // push the final element to the array
      
      // return array
   }
   
   // return array
}, []);

在上面的語法中，我們根據一定的條件將元素壓入數組；否則，我們返回數組而不將元素推送到數組以跳過該元素。

範例 3

在下面的範例中，我們的目標是將所有可被二整除的元素對應到自身。因此，我們將回呼函數作為reduce()方法的第一個參數傳遞，並將空數組作為第二個參數傳遞。

在回呼函數中，如果滿足條件，我們將元素推送到陣列並傳回數組。否則，我們將返回數組而不做任何更改。

最後，reduce() 方法傳回包含所有映射元素的數組，我們將其儲存在 Final_array 變數中，使用者可以在輸出中看到該變數。

<html>
<body>
   <h2 id="Using-the-i-array-reduce-i-method-to-skip-over-element-in-the-array-map-method">Using the <i> array.reduce() </i> method to skip over element in the array.map() method.</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output'); 
   let numbers = [10, 33, 34, 55, 57, 58, 90, 87, 85, 53];
   let final_Array = numbers.reduce(function (array, element) {
      if (element % 2 == 0) {
         array.push(element);
      }
      return array;
   }, []);
   output.innerHTML += "The final array after skipping some strings in the map() method is - " + final_Array + "<br>";
</script>
</html>

我們學習了三種在 map() 方法中跳過元素的方法。第一種方法儲存空元素並佔用更多空間，第二種方法增加了時間複雜度，因為我們單獨使用filter()方法。第三種方法是最好的，因為它優化了空間和時間。

以上是如何跳過 .map() 中的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。