Méthodes courantes de js natif organisées

Avec le développement rapide du marché front-end, le marché actuel nécessite des talents pour maîtriser de plus en plus de compétences. Aujourd'hui, je vais résumer quelques fermetures js natives, l'héritage, la chaîne de prototypes et les nœuds, j'espère que cela pourra vous aider. votre route frontale. Utile

Ce qui suit est un résumé personnel, et certains sont copiés par les maîtres. Ils sont maintenant rassemblés pour une référence facile à l'avenir (s'il y a des erreurs, j'espère que tout le monde pourra le signaler. et je les corrigerai dès que possible).

1. !! est forcé d'être converti en une valeur booléenne booléenne
Elle est jugée selon que la valeur à juger est une valeur vraie ou une valeur fausse. , et la prothèse renvoie false. Dans ce cas, en plus de la fausse valeur, le reste est entièrement vrai.

Les fausses valeurs incluent : , 0 , "" , null , undefined , false , NaN,

Sauf ces 6, les autres sont tous "vrai", y compris les objets, tableaux, régularité, fonctions, etc.
Remarque : '0', 'null', 'false', {}, [] sont également des valeurs vraies.
Voyons ensuite comment !! convertit une valeur booléenne.
Par exemple :
Nous déclarons d'abord 3 variables, x est nul, y est vide String, str est une chaîne, voyons ce qui se passe après avoir ajouté "!!"

var x=null; var y=""; var str="abcd"; console.log(!!x) // false; console.log(!!y) // false; log(!!str) // true;

Comme mentionné ci-dessus, les valeurs fausses renvoient faux et les valeurs vraies renvoient vrai.

2. Ajoutez un signe ➕ devant str. +str forcera la conversion en Nombre
Ajoutez + devant la chaîne pour forcer la conversion en nombre.

var str="88"; console.log(+str) // 88 //Mais s'il s'agit d'une chaîne de type mixte, elle sera convertie en NaN var b="1606e"; ( +b) // NaN

3. Peu fiable undéfini Fiable void 0
En JavaScript, en supposant que nous voulons déterminer si un élément n'est pas défini, alors nous le faisons généralement s'écrirait ainsi :

if(a === undefined){ dosomething..... }

Parce qu'en javascript, undefined n'est pas fiable
Par exemple :
Lorsque undefined est placé à l'intérieur de la fonction function, nous la traitons comme une variable locale, à laquelle une valeur peut être attribuée. Essayons-la ensuite.

function foo2(){ var undefined=1; console.log(undefined) } foo2();

Mais lors de la définition d'une variable globale dans la fonction, Il n'est pas possible d'attribuer une valeur

var undéfini; function foo2(){ undéfini=1; console.log(undéfini) } foo2() // undéfini

Alors essayez-le void 0 ou void (0) à la place :
Déclarez d'abord une variable a et affectez-la à undefined Ensuite, nous utilisons void 0 pour juger.

var a=undefined; //Utilisez void 0 pour juger if(a===void 0){ console.log('true') } // true //Utilisez à nouveau void (0) Jugez if (a===void (0)){ console.log('true') } // true //Enfin on imprime les valeurs de retour de ces deux console.log(void 0,void (0)) // undéfini undéfini

Nous pouvons maintenant obtenir undéfini via l'opération void 0 ; puis lorsque nous avons besoin de juger que la valeur est indéfinie dans le futur, nous pouvons directement utiliser void 0 ou void (0), et ceux-ci 2La valeur de retour direct de la valeur n'est pas définie, elle est donc très fiable !

4. Les chaînes ont également un attribut de longueur !
Nous savons que tous les tableaux ont un attribut de longueur. Même s'il s'agit d'un tableau vide, alors la longueur est de 0, y a-t-il donc une chaîne ? Vérifions-le ensuite.

var str="sdfsd5565s6dfsd65sd6+d5fd5"; console.log(str.length) // 26

Le résultat est là, donc quand on juge du type, on ne peut pas simplement take Existe-t-il un attribut length pour déterminer s'il s'agit d'un tableau ? Nous pouvons utiliser la méthode suivante pour déterminer s'il s'agit d'un tableau :

var obj=[1,2]; (obj) == = '[object Array]');

5. Comment créer un tableau aléatoire, ou brouiller un tableau existant ?
Parfois, nous avons besoin d'un tableau brouillé de manière aléatoire dans le projet, alors implémentons ce qui suit :
Créons d'abord un tableau :

var arr=[]; ;i++){ arr.push(i) } console.log(arr) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Suivant brouilleons-le :

arr.sort(()=>{ return Math.random() - 0.5 }) // [1, 0, 2, 3, 4 , 6, 8, 5, 7 , 9]

La deuxième méthode de brassage :

arr.sort((a,b)=>{ return a>Math .random()*10; }) / / [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

Notre tri normal précédent était comme ceci :

arr.sort(function (a,b){ return b-a });

Analyse :
Parlons d'abord du tri normal :
a, b représente deux éléments quelconques du tableau, si return > 0, b est avant a et après a; est avant a et après b ; Lorsque a=b, il y a une compatibilité avec le navigateur ;
la sortie a-b est triée de petite à grande, la sortie b-a est triée de grande à petite.
Parlons ensuite de la façon dont nous le perturbons :
Inutile de dire que, lors de la création d'un tableau, l'étape suivante consiste à utiliser la méthode de tri de js pour l'implémenter Math.random() implémente une décimale aléatoire entre 0 et. 1 puis soustrait 0,5 , puis il sera trié en fonction de la valeur obtenue après comparaison de retour, il générera donc un tri qui n'est pas normal de grand à petit ou de petit à grand.

La deuxième méthode de brouillage consiste également à suivre la méthode de tri, à transmettre a et b puis à les comparer avec des nombres aléatoires. La méthode de comparaison n'est pas claire.

6. Supprimez tous les espaces avant, après, avant et après
Il s'agit d'un ensemble de méthodes spécialement écrites pour supprimer les espaces. Il convient à diverses situations, y compris tous les espaces, les espaces avant et après, les espaces. avant et après.

var strr="    1 ad dertasdf sdfASDFDF DFG SDFG    "     //  type 1-所有空格，2-前后空格，3-前空格，4-后空格function trim(str,type){     switch (type){         case 1:return str.replace(/\s+/g,"");         case 2:return str.replace(/(^\s*)|(\s*$)/g, "");         case 3:return str.replace(/(^\s*)/g, "");         case 4:return str.replace(/(\s*$)/g, "");         default:return str;     } } console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"

Analyse :
Cette méthode utilise un format de correspondance régulier. Je séparerai le format de correspondance régulier plus tard pour résumer une série, alors restez à l'écoute ! ! !

s : Espace, Tabulation, saut de page, nouvelle ligne S : Tout le contenu autre que s /g : Correspondance globale ^ : Correspondance en début de ligne $ : Correspondance en fin de ligne + : Nombre de répétitions >0 * : Nombre de répétitions>=0 | : Ou

replace(a,b) : La méthode permet de remplacer certains caractères par d'autres caractères lors de la création du personnage, et deux caractères seront passés dans Value, remplacez la valeur a avant la virgule par la valeur b après la virgule.

7. Changement de casse des lettres (correspondance régulière, remplacement)
Cette méthode est principalement fournie pour certaines méthodes qui nécessitent une conversion de casse, comprenant principalement la première lettre en majuscule, la première lettre en minuscule, la conversion de casse, all Convertit tout en majuscules et tout en minuscules.

type : 1 : Première lettre en majuscule 2 : Première lettre en minuscule 3 : Conversion de casse 4 : Tout en majuscules 5 : Tout en minuscules

Chaîne d'origine :

var str="sdfwwerasfddffddeerAasdgFegqer"; function changeCase(str,type) {    //这个函数是第三个大小写转换的方法     function ToggleCase(str) {         var itemText = ""         str.split("").forEach(                 function (item) {                  // 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次                     if (/^([a-z]+)/.test(item)) {                     //  如果是小写，转换成大写                         itemText += item.toUpperCase();                     }                 //  判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次                     else if (/^([A-Z]+)/.test(item)) {                    //   如果是大写，转换成小写                         itemText += item.toLowerCase();                     }                     else{                   //  如果都不符合，返回其本身                         itemText += item;                     }                 });         return itemText;     }   //下面主要根据传入的type值来匹配各个场景     switch (type) {          //当匹配         case 1:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                  //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toUpperCase() + v2.toLowerCase();             });         case 2:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                 //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toLowerCase() + v2.toUpperCase();             });         case 3:             return ToggleCase(str);         case 4:             return str.toUpperCase();         case 5:             return str.toLowerCase();         default:             return str;     } }  console.log(changeCase(str,1))   //SdfwwerasfddffddeerAasdgFegqer

Analyse :

split : utilisé pour diviser une chaîne en un tableau de chaînes w : chiffres 0-9 ou lettres a-z et A-Z, ou soulignement W : pas w, sauf pour les symboles spéciaux ci-dessus, etc. . toUpperCase : Convertir en majuscule toLowerCase : Convertir en minuscule remplacer Le deuxième paramètre peut être une fonction, Parmi les paramètres de la fonction , le premier est lui-même, le second est le contenu correspondant régulier, et le le troisième correspond au reste

Vérifions-le à travers une petite expérience :
On dit sur Internet que remplacer peut avoir 4 paramètres, mais je n'ai pas vérifié la signification du quatrième représentant. Trois ont été vérifiés, le premier paramètre est la vérification elle-même, le deuxième paramètre est le résultat de la correspondance régulière et le troisième paramètre est la valeur restante après la deuxième correspondance.

8. Bouclez la chaîne entrante n fois
str est la chaîne aléatoire entrante, et count est le nombre de boucles

var str="abc";  var number=555; function repeatStr(str, count) {     //声明一个空字符串，用来保存生成后的新字符串     var text = &#39;&#39;;     //循环传入的count值，即循环的次数     for (var i = 0; i < count; i++) {        //循环一次就把字符串+到我们事先准备好的空字符串上         text += str;     }     return text; }   console.log(repeatStr(str, 3))         // "abcabcabc"   console.log(repeatStr(number, 3))      // "555555555"

Analyse : selon le nombre de boucles, dans Copier dans la boucle, renvoyez la valeur après +=

9. Remplacez le contenu A de la chaîne de recherche par le contenu B

let str="abacdasdfsd" function replaceAll(str,AFindText ,ARepText) { raRegExp = new RegExp(AFindText,"g"); return str.replace(raRegExp,ARepText); console.log(replaceAll(str,"a","x")) // xbxcdxsdfsd
str : obligatoire La chaîne modifiée elle-même AFindText : le contenu qui doit être remplacé ARepText : le contenu qui est remplacé
Analyse : créer des expressions régulières, faire correspondre le contenu, remplacer

10. Détecter les formats courants , e-mail, numéro de téléphone portable, nom, majuscules, minuscules Lors de la vérification du formulaire, nous devons souvent vérifier certains contenus. Voici quelques exemples de vérification courants.

function checkType (str, type) {     switch (type) {         case 'email':             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);         case 'phone':             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);         case 'tel':             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);         case 'number':             return /^[0-9]$/.test(str);         case 'english':             return /^[a-zA-Z]+$/.test(str);         case 'chinese':             return /^[\u4E00-\u9FA5]+$/.test(str);         case 'lower':             return /^[a-z]+$/.test(str);         case 'upper':             return /^[A-Z]+$/.test(str);         default :             return true;     } } console.log(checkType ('hjkhjhT','lower'))   //false

Analyse :

checkType ('hjkhjhT', 'inférieur') 'Chaîne à vérifier', 'Format correspondant' email : email de vérification téléphone : vérification numéro de téléphone portable tel : Vérifier le numéro de téléphone fixe : Vérifier le numéro anglais : Vérifier les lettres anglaises chinois : Vérifier les caractères chinois inférieurs : Vérifier les minuscules supérieurs : Vérifier les majuscules

Je crois que vous maîtrisez la méthode après avoir lu ces cas, et plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment convertir l'encodage CSS

Cliquez pour afficher css3 Effet spécial Ripple

Comment utiliser la toile pour réaliser l'interaction entre la balle et la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!