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

  1. 入职3个月的Java程序员面临转正,字节跳动 京东 360 网易面试题整理,
  2. Lancement de l'ensemble du réseau, je fais l'expérience réelle de l'externalisation Java à Huawei!
  3. 全套Java視頻百度雲,終於找到一個看得懂的JVM內存模型了,
  4. Un ensemble complet de vidéos Java Baidu Cloud a finalement trouvé un modèle de mémoire JVM compréhensible.
  5. Déployez le projet Spring Boot avec docker, et parlez de la bonne posture pour que les programmeurs grandissent.
  6. 关于网络优化你必须要知道的重点,GC 堆排 Tomcat 算法题,
  7. 关于电商秒杀系统中防超卖处理方案简述,Java开发热门前沿知识,
  8. 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.
  9. What is the new syntax of XX ≠ null in Java?
  10. Spring scheduled task cron expression (@ scheduled)
  11. Une brève description du plan de traitement anti - surproduction dans le système d'arrêt du commerce électronique et les connaissances de pointe du développement Java.
  12. Ce que vous devez savoir sur l'optimisation du réseau, c'est que le problème de l'algorithme Tomcat de gerbage GC,
  13. 凭借这份Java面试题集,成体系化的神级Java进阶笔记,
  14. 凭借这份Java面试题集,BAT大厂面试基础题集合,
  15. Docker Knowledge point collation
  16. Redis sur la réalisation élégante des tâches retardées
  17. 憑借這份Java面試題集,BAT大廠面試基礎題集合,
  18. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  19. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  20. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  21. MySQL + +: slow query log analysis (I)
  22. Android Architect path 21 Responsive Programming RX Java thread transformation Principles
  23. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  24. 分布式宝典:限流 缓存 通讯,Java开发中常见的一些问题面试专题,
  25. 分享面试经历的网站,腾讯大牛教你自己写Java框架!
  26. Expliquer les six principes de base du modèle de conception par des exemples réels
  27. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  28. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  29. Another uncle circle man is angry! The high-quality acting skills make people admire and achieve the highlight of the ending of spring in Jade House
  30. 10. MySQL database import, export and authorization
  31. 9. MySQL data query
  32. 8. MySQL data operation DML
  33. 7. MySQL database table engine and character set
  34. 分享面試經曆的網站,騰訊大牛教你自己寫Java框架!
  35. Les points de connaissance de Java Real - time Video Download, Byte Jumping Java R & D post ont été divulgués à l'intérieur.
  36. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  37. 前方高能,Java程序员最大的悲哀是什么?
  38. 别再说你不会JVM性能监控和调优了,2021华为Java高级面试题及答案,
  39. Tencent private cloud MySQL solution tdsql
  40. 前方高能,Java程序員最大的悲哀是什麼?
  41. Quelle est la plus grande tristesse des programmeurs Java à l'avenir?
  42. 15 useful cron work examples commonly used by Senior Linux system administrators
  43. Ne dites pas que vous ne pouvez pas surveiller et ajuster les performances JVM, 2021 Huawei Java Advanced interview Questions and Answers,
  44. 別再說你不會JVM性能監控和調優了,2021華為Java高級面試題及答案,
  45. 十多家大厂Java面试真题锦集干货整理,Java开发者该学习哪些东西提高竞争力?
  46. 十分钟带你回顾Spring常问的知识点,35岁老年程序员的绝地翻身之路,
  47. 区区一个SpringBoot问题就被干趴下了,看完这一篇就够了!
  48. K8s gestion des ressources (opérations de base)
  49. Java and cloud native dating
  50. 區區一個SpringBoot問題就被幹趴下了,看完這一篇就够了!
  51. Un problème de démarrage de printemps dans le district a été séché, et c'est assez!
  52. 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,
  53. Plus d'une douzaine de grandes usines Java interview vrai sujet brocade collection de marchandises sèches, les développeurs Java devraient apprendre ce qui améliore la compétitivité?
  54. 十分鐘帶你回顧Spring常問的知識點,35歲老年程序員的絕地翻身之路,
  55. Guide de route d'apprentissage Java, redis a plusieurs types de données?
  56. 华为Java高级工程师面试题,字节跳动上千道精选面试题还不刷起来!
  57. 华为Java面试题目,腾讯Java开发面试记录,
  58. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  59. 華為Java面試題目,騰訊Java開發面試記錄,
  60. Huawei Java interview title, Tencent Java Development interview record,