JavaScript 唯一陣列

Ammar Ali 2023年10月12日
  1. 使用 JavaScript 中的 Set() 函式從陣列中獲取唯一值
  2. 使用 JavaScript 中的 indexOf() 函式從陣列中獲取唯一值
  3. 使用 JavaScript 中的 filter() 函式從陣列中獲取唯一值
JavaScript 唯一陣列

本教程將討論如何使用 JavaScript 中的 Set()indexOf()filter() 函式從陣列中獲取唯一值。

使用 JavaScript 中的 Set() 函式從陣列中獲取唯一值

要從陣列中獲取唯一值,我們可以使用 Set() 函式,該函式使用現有陣列中的唯一值建立一個新陣列。例如,讓我們建立一個具有重複值的陣列,使用 Set() 函式建立一個具有唯一值的新陣列,然後使用 JavaScript 中的 console.log() 函式在控制檯上顯示結果。請參考下面的程式碼。

var myArray = ['c', 'b', 'c', 2, 'b'];
var uniqueArray = [...new Set(myArray)]
console.log('Original Array = ', myArray);
console.log('Array with unique values = ', uniqueArray);

輸出:

Original Array =  (5) ["c", "b", "c", 2, "b"]
Array with unique values =  (3) ["c", "b", 2]

在輸出中,新陣列不包含任何重複值。

使用 JavaScript 中的 indexOf() 函式從陣列中獲取唯一值

要從陣列中獲取唯一值,我們可以使用 indexOf() 函式和迴圈建立我們自己的函式,這將建立一個具有現有陣列中唯一值的新陣列。我們將使用陣列將元素移動到新陣列,並使用 indexOf() 函式來檢查元素是否已經存在於新陣列中。

如果元素不在新陣列中,則將其移動到新陣列中;否則,它將保留。例如,讓我們建立一個具有重複值的陣列,然後使用我們的函式建立一個具有唯一值的新陣列,並使用 JavaScript 中的 console.log() 函式在控制檯上顯示結果。請參考下面的程式碼。

function uArray(array) {
  var out = [];
  for (var i = 0, len = array.length; i < len; i++)
    if (out.indexOf(array[i]) === -1) out.push(array[i]);
  return out;
}
var myArray = ['c', 'b', 'c', 2, 'b'];
var uniqueArray = uArray(myArray);
console.log('Original Array = ', myArray);
console.log('Array with unique values = ', uniqueArray);

輸出:

Original Array =  (5) ["c", "b", "c", 2, "b"]
Array with unique values =  (3) ["c", "b", 2]

在這裡,新陣列不包含任何重複值。

使用 JavaScript 中的 filter() 函式從陣列中獲取唯一值

要從陣列中獲取唯一值,我們可以使用 filter() 函式,該函式通過根據特定條件從現有陣列中過濾值來建立一個新陣列。filter() 函式將檢查原始陣列中存在的每個值。如果一個值是重複的,函式將刪除它;否則,該值將被新增到新陣列中。

例如,讓我們建立一個具有重複值的陣列,使用 filter() 函式建立一個具有唯一值的新陣列,並使用 JavaScript 中的 console.log() 函式在控制檯上顯示結果。請參考下面的程式碼。

var myArray = ['c', 'b', 'c', 2, 'b'];
var uniqueArray = myArray.filter((val, ind, arr) => arr.indexOf(val) === ind);
console.log('Original Array = ', myArray);
console.log('Array with unique values = ', uniqueArray);

輸出:

Original Array =  (5) ["c", "b", "c", 2, "b"]
Array with unique values =  (3) ["c", "b", 2]

正如你在此處看到的,新陣列不包含任何重複值。

作者: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Array