Collection de code de base JavaScript (1)

Shineshadow 2021-09-15 06:44:27
collection code base javascript


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://qdmana.com/2021/09/20210914170046004f.html

  1. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  2. 手把手教你搭建微信小程序服务器(HTTPS)
  3. sqli-labs-less-18 http头user agent+报错注入
  4. Génération de code nest pour l'outil CLI de nestjs
  5. JS | This
  6. Augmentation des variables
  7. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  8. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  9. Summary of basic knowledge points of JavaScript language (mind map)
  10. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  11. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  12. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  13. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  14. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  15. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  16. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  17. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  20. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  21. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  22. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  23. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  24. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  25. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  26. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  27. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  28. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  29. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  30. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  31. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  32. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  33. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  34. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  35. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  36. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  37. Basic knowledge of components in Vue "I"
  38. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  39. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  40. Want to know the implementation and application of single instance mode in the front end?
  41. Progressive react source code analysis - Implementation of ref API
  42. Webpack5 learning -- code compression
  43. Front and back end data interaction (V) -- what is Axios?
  44. Knowledge points related to react routing
  45. On demand introduction of react antd + customized theme
  46. GPG management submission signature verification
  47. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  48. After brushing the 12 sliding windows, you can tear the front end by hand
  49. Vue fruit bookkeeping - money.vue component
  50. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  51. JS contains the function code
  52. Typescript record (I)
  53. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  54. Is componentization obsolete? Introduction to micro front end architecture
  55. Leetcode day 18
  56. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  57. Design pattern -- agent pattern
  58. Vs Code theme recommendation in 2021
  59. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  60. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android