Notes d'étude JavaScript : Compétences Array deduplication_javascript

Lecture recommandée : Notes d'étude JavaScript : Ajouter, supprimer, modifier et vérifier des tableaux

Notes d'étude JavaScript Méthode de somme de tableau

Tableau de notes d'étude JavaScript, tri aléatoire

Dans les entretiens, les intervieweurs posent souvent des questions sur la mise en œuvre de la déduplication de tableaux en JavaScript. Récemment, j'ai découvert les tableaux JavaScript et j'ai profité de cette occasion pour trier certaines méthodes de déduplication de tableaux en JavaScript.

Les méthodes de déduplication de tableau suivantes ont été collectées et organisées par moi-même. S'il y a des erreurs, veuillez les signaler dans le texte.

Déduplication double boucle

Cette méthode utilise deux boucles for pour le parcours. L'idée générale est :

Construisez un tableau vide pour stocker le tableau dédupliqué

La boucle for externe parcourt le tableau d'origine, en retirant à chaque fois un élément du tableau et en le comparant avec le tableau résultat
Si les éléments extraits du tableau d'origine sont les mêmes que les éléments du tableau résultat, sortez de la boucle sinon, stockez-les dans le tableau résultat

;

Le code est le suivant :

Array.prototype.unique1 = function () {
// 构建一个新数组，存放结果
var newArray = [this[0]];
// for循环，每次从原数组中取出一个元素
// 用取出的元素循环与结果数组对比
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j=0; j < newArray.length; j++) {
// 原数组取出的元素与结果数组元素相同
if(this[i] == newArray[j]) {
repeat = true;
break;
}
}
if(!repeat) {
// 如果结果数组中没有该元素，则存放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

Supposons que nous ayons un tableau comme celui-ci :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];
arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

On dit que cette méthode prend du temps et demande beaucoup de performances. Faites simplement un test simple (la méthode de test est mal écrite) :

function test () {
var arr = [];
for (var i = 0; i < 1000000; i++) {
arr.push(Math.round(Math.random(i) * 10000));
}
doTest(arr, 1);
}
function doTest(arr, n) {
var tStart = (new Date()).getTime();
var re = arr.unique1();
var tEnd = (new Date()).getTime();
console.log('双重循环去重方法使用时间是:' + (tEnd - tStart) + 'ms');
return re;
}
test();

Exécutez le code ci-dessus dans le contrôleur Chrome et testez le temps nécessaire à la déduplication en double boucle : 11 031 ms.

La méthode ci-dessus peut être simulée à l'aide de la méthode forEach() et de la méthode indexOf() :

function unique1() {
var newArray = [];
this.forEach(function (index) {
if (newArray.indexOf(index) == -1) {
newArray.push(index);
}
});
return newArray;
}

Appelez via unique1.apply(arr) ou unique1.call(arr). Cependant, cette méthode est beaucoup plus efficace. Le même code de test ci-dessus prend 5 423 ms, soit presque deux fois moins vite.

Trier le parcours pour supprimer les doublons

Utilisez d'abord la méthode sort() pour trier le tableau d'origine. Après le tri, parcourez le tableau et vérifiez si le i-ième élément du tableau est le même que le dernier élément du tableau résultat. S'ils sont différents, les éléments sont placés dans le tableau résultant.

Array.prototype.unique2 = function () {
// 原数组先排序
this.sort();
// 构建一个新数组存放结果
var newArray = [];
for (var i = 1; i < this.length; i++) {
// 检查原数中的第i个元素与结果中的最后一个元素是否相同
// 因为排序了，所以重复元素会在相邻位置
if(this[i] !== newArray[newArray.length - 1]) {
// 如果不同，将元素放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

Par exemple :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

Cette méthode présente deux caractéristiques :

Le tableau après la déduplication sera trié, principalement parce que les numéros d'origine ont été triés avant la déduplication

Dans le tableau après déduplication, les caractères numériques identiques aux nombres ne peuvent pas être distingués, tels que « 1 » et 1

En utilisant la même méthode, la durée du test est de : 1232 ms.

Méthode de paire clé-valeur d'objet

L'idée de mise en œuvre de cette méthode de déduplication est la suivante :

Créer un objet JavaScript et un nouveau tableau

Utilisez une boucle for pour parcourir le tableau d'origine, en retirant un élément à chaque fois et en le comparant avec la clé de l'objet JavaScript

S'il n'est pas inclus, poussez la valeur de l'élément stocké dans l'objet dans le tableau de résultats et définissez la valeur du nom d'attribut stocké dans l'objet objet sur 1

Le code est le suivant :

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

Exécutez l'exemple précédent :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

De même, différentes clés peuvent être confondues avec les mêmes ; par exemple : a[1], a["1"] . Temps pris par cette méthode : 621 ms. Cette méthode prend le moins de temps, mais occupe plus de mémoire.

En plus des méthodes ci-dessus, il existe plusieurs autres méthodes comme suit :

// 方法四
Array.prototype.unique4 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 遍历是否有重复的值
for (j = i + 1; j < this.length; j++) {
// 如果有相同元素，自增i变量，跳出i的循环
if(this[i] === this[j]) {
j = ++i;
}
}
// 如果没有相同元素，将元素推入到结果数组中
newArray.push(this[i]);
}
return newArray;
}

Résultats des tests Chrome

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

De même, 1 et « 1 » sont indiscernables.

// 方法五
Array.prototype.unique5 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 如果当前数组的第i值保存到临时数组，那么跳过
var index = this[i];
// 如果数组项不在结果数组中，将这个值推入结果数组中
if (newArray.indexOf(index) === -1) {
newArray.push(index);
}
}
return newArray;
}

Résultats des tests Chrome :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

De même, 1 et « 1 » sont indiscernables. Temps passé : 14361ms.

// 方法六
Array.prototype.unique6 = function () {
return this.reduce(function (newArray, index) {
if(newArray.indexOf(index) < 0) {
newArray.push(index);
}
return newArray;
},[]);
}

Les résultats des tests sont les suivants :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Temps pris : 16490ms.

// 方法七
Array.prototype.unique7 = function(){
var newArray;
newArray = this.filter(function (ele,i,arr) {
return arr.indexOf(ele) === i;
});
return newArray;
}

Résultats des tests :

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Temps pris : 13201ms.

Bien qu'il existe de nombreuses méthodes, en comparaison, la méthode suivante est une meilleure solution :

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

Mais il existe des solutions plus simples et optimisées pour la déduplication dans ES6, telles que :

// ES6
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
// or
function unique (arr) {
return Array.from(new Set(arr))
}

Ce qui précède correspond aux notes d'apprentissage JavaScript introduites par l'éditeur pour supprimer les doublons des tableaux. J'espère que cela vous sera utile !