Déduplication de tableaux en JavaScript

Il existe plusieurs méthodes pour supprimer les doublons d'un tableau en JavaScript natif.

1. Utilisation de indexOf

Array.prototype.removeDuplicates = function() {
    const uniqueItems = [];
    for (let item of this) {
        if (uniqueItems.indexOf(item) === -1) {
            uniqueItems.push(item);
        }
    }
    return uniqueItems;
};
const data = [1, 2, 3, 2, 1, 3, 2, 1];
console.log(data.removeDuplicates()); // Affiche [1, 2, 3]

Pour les environnements plus anciens comme IE6-8 qui ne supportent pas indexOf, une polyfill peut être ajoutée à l'objet Array.

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(searchElement) {
        for (let i = 0; i < this.length; i++) {
            if (this[i] === searchElement) {
                return i;
            }
        }
        return -1;
    };
}

2. Méthode par tri préalable

Array.prototype.removeDuplicates = function() {
    this.sort();
    const uniqueItems = [this[0]];
    for (let i = 1; i < this.length; i++) {
        if (this[i] !== uniqueItems[uniqueItems.length - 1]) {
            uniqueItems.push(this[i]);
        }
    }
    return uniqueItems;
};
const arrayData = [1, 2, 3, 2, 1, 3, 2, 1];
console.log(arrayData.removeDuplicates()); // Affiche [1, 2, 3]

3. Utilisation de Set et Array.from en ES6

function deduplicateArray(arr) {
    return Array.from(new Set(arr));
}
console.log(deduplicateArray([1, 2, 3, 2, 1])); // Affiche [1, 2, 3]

Set est une structure de données qui élimine automatiquement les doublons, et Array.from convertit un itérable en tableau.

Conversion de chaîne en format camelCase

function toCamelCase(str) {
    return str.replace(/-([a-z])/g, function(match, letter) {
        return letter.toUpperCase();
    });
}
const inputStr = 'border-left-color';
console.log(toCamelCase(inputStr)); // Affiche borderLeftColor

Recherche du caractère le plus fréquent dans une chaîne

function findMostFrequentCharacter(str) {
    const charFrequency = {};
    for (let char of str) {
        charFrequency[char] = (charFrequency[char] || 0) + 1;
    }
    let maxCount = 0;
    let resultChar = '';
    for (let char in charFrequency) {
        if (charFrequency[char] > maxCount) {
            maxCount = charFrequency[char];
            resultChar = char;
        }
    }
    return { character: resultChar, count: maxCount };
}
const testStr = 'aabbbcccc';
const result = findMostFrequentCharacter(testStr);
console.log(`Caractère le plus fréquent: ${result.character}, Occurrences: ${result.count}`);

Extraction des chiffres à partir d'arguments variables

function extractNumberArgs() {
    const args = Array.from(arguments);
    const digitPattern = /^\d+$/;
    const numbers = args.filter(arg => digitPattern.test(arg.toString()));
    return numbers.join(',');
}
console.log(extractNumberArgs('1', 'a', '45', 'b', '3', 1)); // Affiche '1,45,3,1'

Problèmes de hoisting des variables et fonctions

En JavaScript, les déclarations de variables et de fonctions sont soumises au hoisting. Voici des exemples illustratifs :

function exampleA() {
    console.log(varA); // undefined
    var varA = 10;
    function funcA() {}
    varA = 100;
    console.log(varA); // 100
}
exampleA();

function exampleB() {
    console.log(varB); // undefined
    function funcB() {}
    var varB = 10;
    varB = 100;
    console.log(varB); // 100
}
exampleB();

(function exampleC(num) {
    console.log(num); // 100
    var num = 10;
}(100));

(function exampleD(num) {
    console.log(num); // function num() {}
    var num = 10;
    function num() {}
}(100));

(function exampleE(num) {
    function num() {}
    console.log(num); // function num() {}
    var num = 10;
    console.log(num); // 10
}(100));

function hoistingInBlocks() {
    console.log(blockVar); // undefined
    console.log(blockFunc); // undefined en mode strict, sinon undefined
    if (false) {
        var blockVar = 10;
        function blockFunc() {}
    }
    if (true) {
        var blockVar = 20;
        function blockFunc() {}
    }
    console.log(blockVar); // 20
    console.log(blockFunc); // function blockFunc() {}
}
hoistingInBlocks();

Les déclarations de fonctions sont hoistées, tandis que les expressions de fonctions ne le sont pas. La clé let nécessite le mode strict.

Vérification des types de données

function checkDataType(value) {
    return Object.prototype.toString.call(value);
}
console.log(checkDataType(42)); // Affiche [object Number]

Les types primitifs en JavaScript incluent number, string, null, undefined, boolean et symbol, stockés dans la pile. Les types de référence comme Object, Array, Date, RegExp et Function sont stockés dans le tas.

Conversion de l'objet arguments en tableau

function convertArgumentsToArray(args) {
    return Array.from(args);
}
// Alternative avec ES6
function convertWithSpread(...args) {
    return args;
}

Vérifier si un objet est un tableau

Utilisez Array.isArray() ou Object.prototype.toString.call() pour une vérification fiable.

Suppression d'un nœud DOM en JavaScript natif

function removeDOMNode(node) {
    if (node && node.parentNode) {
        node.parentNode.removeChild(node);
    }
}

Ajout d'un événement de clic à un bouton

const button = document.getElementById('myButton');
if (button.addEventListener) {
    button.addEventListener('click', function() {
        console.log('Clic détecté');
    });
} else if (button.attachEvent) {
    button.attachEvent('onclick', function() {
        console.log('Clic détecté (IE ancien)');
    });
}

addEventListener permet d'attacher plusieurs gestionnaires sans écrasement, contrairement à onclick.

Algorithmes de tri

Tri à bulles

function bubbleSort(arr) {
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}
console.log(bubbleSort([5, 3, 8, 1])); // Affiche [1, 3, 5, 8]

Tri rapide

function quickSort(arr) {
    if (arr.length <= 1) return arr;
    const pivotIndex = Math.floor(arr.length / 2);
    const pivot = arr[pivotIndex];
    const left = [];
    const right = [];
    for (let i = 0; i < arr.length; i++) {
        if (i === pivotIndex) continue;
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return [...quickSort(left), pivot, ...quickSort(right)];
}
console.log(quickSort([10, 7, 8, 9, 1, 5])); // Affiche [1, 5, 7, 8, 9, 10]

Tri par sélection

function selectionSort(arr) {
    for (let i = 0; i < arr.length; i++) {
        let minIndex = i;
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        if (minIndex !== i) {
            [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
        }
    }
    return arr;
}
console.log(selectionSort([29, 10, 14, 37, 13])); // Affiche [10, 13, 14, 29, 37]