JavaScript 唯一数组
Ammar Ali
2023年10月12日
JavaScript
JavaScript Array
-
使用 JavaScript 中的
Set()函数从数组中获取唯一值 -
使用 JavaScript 中的
indexOf()函数从数组中获取唯一值 -
使用 JavaScript 中的
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]
正如你在此处看到的，新数组不包含任何重复值。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Ammar Ali
