HOWTO · JavaScript

JavaScript 唯一陣列

我們可以使用 JavaScript 中的 Set()、indexOf() 和 filter() 函式從陣列中獲取唯一值。

本頁內容

本教程將討論如何使用 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]

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