编程知识 cdmana.com

Collection de code de base JavaScript (1)

1、Copier le contenu du texte dans le presse - papiers

    function copytoboard(content){
        const element = document.createElement("textarea")
        document.body.append(element)
        element.content = content
        element.select()
        if(document.execCommand("copy")){
            document.execCommand("copy")
            document.body.removeChild(element)
            return true
        }
        document.body.removeChild(element)
        return false
    }
Copier le Code

Comment utiliser

//Si la copie est retournée avec succèstrue
copyToBoard('lalallala')
Copier le Code

Principes:

  1. Créer untextareÉlément et appelselect()Sélection des méthodes
  2. document.execCommand('copy')Méthodes,Copie la sélection actuelle dans le presse - papiers.

2、Générer une chaîne aléatoire

    /**
     * Générer un aléatoireid
     * @param {*} chars
     * @param {*} length
     */
    function uuid(chars, length){
        chars = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
        length = length || 8
        var result = ''
        for(let i=length; i>0; --i){
            result += chars[Math.floor(Math.random()*chars.length)]
        }
        return result
    }
Copier le Code

Comment utiliser

//Si la copie est retournée avec succèstrue
uuid()
Copier le Code

3、 Obtenir le nom du suffixe de jugement de fichier

    /**
     *  Obtenir le nom du suffixe de fichier 
     * @param {String} filename
     */
    function getFileSuffix(filename){
        if(Object.prototype.toString.call(filename) === '[object String]'){
            return filename.split(".")[1].toLowerCase()
        }else{
            throw new Error('filename must be a string type')
        }
    }
Copier le Code

4、Array deduplication

Un.、UtilisationES6 SetPoids mort(ES6 Le plus souvent utilisé )

    function unique (arr) {
      return Array.from(new Set(arr))
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
Copier le Code

Sans tenir compte de la compatibilité , Cette méthode de dé - duplication a un code minimum . Cette méthode ne peut pas encore être enlevée “{}”Objet vide, Les méthodes d'ordre supérieur suivantes ajoutent la suppression des répétitions “{}”Méthode.

2.、UtilisationforNidificationfor,Et puissplicePoids mort(ES5 Le plus souvent utilisé )

    function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         // Le premier est égal au second ,splice Méthode supprimer le deuxième 
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaNEt{} Non. ,Deux.null Il a disparu 
Copier le Code

Double circulation , Élément de boucle externe , Comparer les valeurs pendant le cycle interne .Valeurs simultanées, Supprimer cette valeur .

Trois、UtilisationindexOf(includes)Poids mort

    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array = [];
        for(var i = 0; i < arr.length; i++) {
            if (array.indexOf(arr[i]) === -1) {
                array.push(arr[i])
            }
        }
        return array;
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{} Non. 
Copier le Code
    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array =[];
        for(var i = 0; i < arr.length; i++) {
            if(!array.includes(arr[i])) {//includes  Détecter si le tableau a une valeur 
                array.push(arr[i]);
            }
        }
        return array
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{} Non. 
Copier le Code

Créer un nouveau tableau de résultats vide ,for Boucle le tableau original , Déterminer si le tableau des résultats contient l'élément courant , Sauter si la même valeur existe , Si c'est différent pushTableau d'entrée.

Quatre、Utilisationsort()

    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return;
        }
        arr = arr.sort()
        var arrry= [arr[0]];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i-1]) {
                arrry.push(arr[i]);
            }
        }
        return arrry;
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    // [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{} Non. 
Copier le Code

Utilisationsort()Méthode de tri, Ensuite, la traversée et la comparaison des éléments adjacents sont effectuées en fonction des résultats triés .

Cinq、UtilisationhasOwnProperty

    function unique(arr) {
        var obj = {};
        return arr.filter(function(item, index, arr){
            return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
        })
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   // Tout est lourd 
Copier le Code

UtilisationhasOwnProperty Déterminer si les attributs de l'objet existent

Six、Utilisationfilter

    function unique(arr) {
        return arr.filter(function(item, index, arr) {
            //Élément actuel, Premier index dans le tableau original ==Valeur actuelle de l'indice, Sinon, renvoie l'élément courant 
            return arr.indexOf(item, 0) === index;
        });
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
Copier le Code

5、Copie profonde

Un.、JSON.parse(JSON.stringify())

    var obj1 = {
        a: 1,
        b: 2,
        c: 3
    }
    var obj2 = JSON.parse(JSON.stringify(obj1));
    obj2.a = 5;
    console.log(obj1.a); // 1
    console.log(obj2.a); // 5
Copier le Code

JSON.parse(JSON.stringify()) La méthode de copie ne peut pas être copiée undefined、function、RegExpAttendez le type

2.、Object.assign(target, source)

    var obj1 = {
        a: 1,
        b: 2,
        c: 3
    }
    var obj2 = Object.assign({}, obj1);
    obj2.b = 5;
    console.log(obj1.b); // 2
    console.log(obj2.b); // 5
Copier le Code

Object.assing(target, source) De la même façon , Et j'ai juste copié les références , Modifier la valeur de référence , Il en résulte également une modification de la valeur de la copie

Trois、Copie récursive

    //  Définir une fonction de copie profonde   Cible de réceptiontargetParamètres
    function deepClone(target) {
        // Définir une variable
        let result;
        //  .Si vous avez actuellement besoin d'une copie profonde d'un objet 
        if (typeof target === 'object') {
        //  Si c'est un tableau 
            if (Array.isArray(target)) {
                result = []; // Oui.result Assigner une valeur à un tableau , Et effectuer une traversée 
                for (let i in target) {
                    //  Chaque élément d'un tableau de clones récursifs 
                    result.push(deepClone(target[i]))
                }
             //  Juge si la valeur actuelle est nullEt si;L'affectation directe estnull
            } else if(target===null) {
                result = null;
             //  Juge si la valeur actuelle est un RegExpLes mots de l'objet,Affectation directe    
            } else if(target.constructor===RegExp){
                result = target;
            }else {
             //  Sinon, c'est un objet normal ,Directfor inCycle, Toutes les valeurs de l'objet d'assignation récursive 
                result = {};
                for (let i in target) {
                    result[i] = deepClone(target[i]);
                }
            }
         //  Si ce n'est pas un objet , Est le type de données de base ,Alors, l'affectation directe
        } else {
            result = target;
        }
        //  Retour au résultat final 
        return result;
    }
Copier le Code

Bien que nous ayons résolu la plupart des problèmes de copie profonde , Mais il reste encore beaucoup de détails à régler ,RecommandélodashDecloneDeep.

6、Anti - secousses et étranglement

Anti - secousses(debounce)

Ce qu'on appelle la prévention des tremblements , Est de déclencher un événement après n La fonction ne peut être exécutée qu'une seule fois en quelques secondes ,Si dans n Un autre événement a été déclenché en quelques secondes , Le temps d'exécution de la fonction est recalculé .

La fonction anti - bavardage est divisée en version d'exécution non immédiate et en version d'exécution immédiate

Version non immédiate :

    function debounce(func, wait) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);

            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait);
        }
    }
Copier le Code

La version d'exécution non immédiate signifie que la fonction ne s'exécute pas immédiatement après le déclenchement de l'événement ,Mais dans n Exécution en quelques secondes,Si dans n Un autre événement a été déclenché en quelques secondes , Le temps d'exécution de la fonction est recalculé .

Exécuter la version maintenant :

    function debounce(func,wait) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);

            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)

            if (callNow) func.apply(context, args)
        }
    }
Copier le Code

La version d'exécution immédiate signifie que la fonction s'exécute immédiatement après le déclenchement de l'événement ,Et puis n L'effet de ne pas déclencher d'événements en quelques secondes pour continuer à exécuter la fonction .

Version consolidée :

    /**
     * @desc Fonction anti - bavardage
     * @param func Fonctions
     * @param wait  Délai d'exécution millisecondes 
     * @param immediate true  Table to perform immediately ,false  Le tableau n'est pas exécuté immédiatement 
     */
    function debounce(func,wait,immediate) {
        let timeout;

        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);
            if (immediate) {
                var callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)
                if (callNow) func.apply(context, args)
            }
            else {
                timeout = setTimeout(function(){
                    func.apply(context, args)
                }, wait);
            }
        }
    }
Copier le Code

étranglement(throttle)

Ce qu'on appelle un étranglement , C'est - à - dire que les événements sont déclenchés consécutivement, mais dans n Exécuter une fonction une seule fois par seconde . La manette des gaz dilue la fréquence d'exécution de la fonction .

Pour la manette des gaz , Il y a généralement deux façons de le faire , La version TIMESTAMP et la version Timer .

Version TIMESTAMP :

    function throttle(func, wait) {
        let previous = 0;
        return function() {
            let now = Date.now();
            let context = this;
            let args = arguments;
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }
    }
Copier le Code

Version Timer :

    function throttle(func, wait) {
        let timeout;
        return function() {
            let context = this;
            let args = arguments;
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }

        }
    }
Copier le Code

Version consolidée :

    /**
     * @desc Fonction d'étranglement
     * @param func Fonctions
     * @param wait  Délai d'exécution millisecondes 
     * @param type 1  Version horodatée du tableau ,2  Version chronométrée 
     */
    function throttle(func, wait ,type) {
        if(type===1){
            let previous = 0;
        }else if(type===2){
            let timeout;
        }
        return function() {
            let context = this;
            let args = arguments;
            if(type===1){
                let now = Date.now();

                if (now - previous > wait) {
                    func.apply(context, args);
                    previous = now;
                }
            }else if(type===2){
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }
            }
        }
    }
Copier le Code

版权声明
本文为[Shineshadow]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914170046004f.html

Scroll to Top