如何在 JavaScript 中查詢字串的唯一字元？

在本教程中，我們將學習查詢字串中唯一字元的不同方法。簡單來說，如果一個字元在字串中出現過一次，那麼它將不會再次包含在字串中。

示例

輸入

tutorialspoint

輸出

tuorialspn

方法 1：使用 Set

因此，在這種方法中，我們將使用 Set 資料結構，正如您所知，它只包含唯一的元素。我們將從使用者那裡獲取輸入，然後將其透過分割轉換成陣列，然後建立一個新的 Set 並將所有元素放入其中，然後我們將所有元素從 Set 中取回字串，它將只包含唯一元素。

語法

以下是查詢字串唯一字元的語法

val1=val1.split("")
val1=new Set(val1)
val1=[...val1].join("")

演算法

  • 步驟 1 − 建立一個變數並賦值一個字串。或者賦值從使用者輸入獲取的字串值。
  • 步驟 2 − 對字串應用 split("") 方法將其分割成字元陣列。
  • 步驟 3 − 定義一個新的 Set，並將字元陣列作為引數傳遞。新的 Set 將只包含唯一字元。
  • 步驟 4 − 將 Set 中的字元連線起來再次建立一個字串。
  • 步驟 5 − 顯示字串。

示例

讓我們看看使用 Set 查詢字串唯一字元的程式。

<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the button to find unique characters</p>
   <form>
      Enter string: <input type="text" id="val1" /><br><br>
      <input Value="Calculate" type="button" onClick="calculate()"/>
   </form>
   <p>Unique char of string:<span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         val1=val1.split("")
         val1=new Set(val1)
         val1=[...val1].join("")
         document.getElementById('calcOutput').innerHTML=val1
      }
   </script>
</body>
</html>

方法 2：使用 indexOf() 方法迴圈

我們將使用一個變數，並在遍歷字串時檢查當前字元，如果它是第一次出現，這意味著該字元在字串中的位置是 -1，那麼我們將包含該字元，否則我們將忽略它。

語法

以下是使用 indexOf() 方法查詢字串唯一字元的語法

for(var i=0;i<val1.length;i++){
   if(UniqueAns.indexOf(val1.charAt(i))==-1)
   UniqueAns= UniqueAns+val1[i];
}

示例

在下面的程式中，我們使用 indexOf() 方法查詢字串中的唯一字元。

<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the Calculate button to find unique characters.</p>
   <form>Enter string: <input type="text" id="val1" /><br>
      <input Value="Calculate" type="button" onClick="calculate()"/>
   </form>
   <p>Unique char of string: <span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         var UniqueAns="";
         for(var i=0;i<val1.length;i++){
            if(UniqueAns.indexOf(val1.charAt(i))==-1)
            UniqueAns= UniqueAns+val1[i];
         }
         document.getElementById('calcOutput').innerHTML=UniqueAns
      }
   </script>
</body>
</html>

方法 3：使用 includes() 方法迴圈

這與上述方法類似，但在這裡我們將使用 includes 方法來檢查字串是否包含當前字元，如果返回 true，則忽略它；如果函式返回 false，則意味著我們第一次訪問此字元，因此將其包含在內。

語法

以下是查詢字串唯一字元的語法

for(var i=0;i<val1.length;i++){
   if(UniqueAns.includes(val1[i])==false)
   UniqueAns= UniqueAns+val1[i];
}

示例

在下面的程式中，我們使用 includes() 方法查詢字串中的唯一字元。

<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the "Find Unique Chars" button to find the unique characters</p>
   <form>Enter string: <input type="text" id="val1" /><br><br>
      <input Value="Find Unique Chars" type="button" onClick="calculate()" />
   </form>
   <p>Unique char of string:<span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         var UniqueAns="";
         for(var i=0;i<val1.length;i++){
            if(UniqueAns.includes(val1[i])==false)
            UniqueAns= UniqueAns+val1[i];
         }
         document.getElementById('calcOutput').innerHTML=UniqueAns
      }
   </script>
</body>
</html>

更新於：2022年8月16日

3K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.