recherche

Maison >interface Web >js tutoriel >Explication détaillée de cinq fonctions courantes en JavaScript

Explication détaillée de cinq fonctions courantes en JavaScript

小云云
小云云original
2018-03-26 09:07:521298parcourir

Certains problèmes liés à JavaScript sont souvent abordés. Tout le monde a des idées différentes sur ces problèmes. Si vous souhaitez comprendre ces problèmes, le meilleur moyen est de les implémenter vous-même. Sans plus tarder, passons au sujet.

Aplatissement de tableaux

Il existe de nombreuses façons d'aplatir des tableaux, mais en fin de compte, le meilleur moyen est de récurer et d'implémenter une méthode d'aplatissement avec une profondeur spécifiée, afin que vous compreniez les routines de base . 


function flattenDepth(array, depth = 1) {
 let result = []
 array.forEach(item => {
 let d = depth
 if (Array.isArray(item) && d > 0) {
  result.push(...(flattenDepth(item, --d)))
 } else {
  result.push(item)
 }
 })
 return result
}
console.log(flattenDepth([1, [2, [3, [4]], 5]])) // [ 1, 2, [ 3, [ 4 ] ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 2)) // [ 1, 2, 3, [ 4 ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 3)) // [ 1, 2, 3, 4, 5 ]

L'implémentation récursive est très simple et facile à comprendre, c'est-à-dire parcourir chaque élément si un élément est un tableau, laissez l'élément continuer à être appelé. . La profondeur est spécifiée ici comme profondeur d'aplatissement, car ce paramètre affecte chaque élément du tableau, il est placé à l'intérieur de la boucle.

Currying

On a mal parlé du currying des fonctions. Chacun a sa propre compréhension et sa propre méthode de mise en œuvre. L'explication en une phrase est que s'il y a suffisamment de paramètres, il sera exécuté, et s'il n'y a pas assez de paramètres, il sera exécuté. Renvoie une fonction avec les paramètres précédents stockés jusqu'à ce qu'ils soient suffisants. 


function curry(func) {
 var l = func.length
 return function curried() {
 var args = [].slice.call(arguments)
 if(args.length < l) {
  return function() {
  var argsInner = [].slice.call(arguments)
  return curried.apply(this, args.concat(argsInner))
  }
 } else {
  return func.apply(this, args)
 }
 }
}
var f = function(a, b, c) {
 return console.log([a, b, c])
};
var curried = curry(f)
curried(1)(2)(3) // => [1, 2, 3]
curried(1, 2)(3) // => [1, 2, 3]
curried(1, 2, 3) // => [1, 2, 3]

Il n'est pas difficile de voir à partir du code ci-dessus que chaque fois que le nombre de paramètres est jugé, il est comparé au nombre de paramètres de la fonction curry Si. il est inférieur au nombre, il continue de renvoyer la fonction, sinon il est exécuté.

Anti-shake

D'après ma compréhension, l'anti-shake signifie que peu importe le nombre de fois que vous le déclenchez, il ne se déclenchera qu'après une période de temps que vous spécifiez après le dernier déclenchement. Suite à cette explication, rédigez une version de base. 


function debounce(func, wait) {
 var timer
 return function() {
 var context = this
 var args = arguments
 clearTimeout(timer)
 timer = setTimeout(function() {
  func.apply(context, args)
 }, wait)
 }
}

Maintenant, il est obligatoire qu'il soit déclenché au début et à la dernière fois, et il peut être configuré. Tout d'abord, écrivez une page de test pour faciliter. tester la fonction. Chaque fois que vous appuyez sur la barre d'espace, le nombre augmentera de 1 pour tester les fonctions anti-tremblement et d'étranglement. 


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
 <style>
  #container{text-align: center; color: #333; font-size: 30px;}
 </style>
</head>
<body>
 <p id="container"></p>
 <script>
  var count = 1
  var container = document.getElementById(&#39;container&#39;)
  function getUserAction(e) {
  // 空格
  if (e.keyCode === 32) {
   container.innerHTML = count++
  }
  }
  // document.onkeydown = debounce(getUserAction, 1000, false, true)
  document.onkeydown = throttle(getUserAction, 1000, true, true)
  function debounce(func, wait, leading, trailing) {}
  function throttle(func, wait, leading, trailing) {}
 </script>
</body>
</html>

Déterminez si le début et la fin sont exécutés via les deux paramètres de début et de fin. Si le début est vrai, il sera exécuté à chaque fois que vous appuyez sur espace. trailing est Si vrai, le dernier déclencheur sera exécuté à chaque fin. Distance de la fonction anti-tremblement, si les deux sont vrais, appuyer sur l'espace pour la première fois ajoutera 1, puis appuyer rapidement sur l'espace, le getUserAction à l'intérieur ne sera pas exécuté à ce moment-là, mais sera exécuté après avoir relâché prise. , il ne sera pas exécuté après le lâcher. 


function debounce(func, wait, leading, trailing) {
 var timer, lastCall = 0, flag = true
 return function() {
 var context = this
 var args = arguments
 var now = + new Date()
 if (now - lastCall < wait) {
  flag = false
  lastCall = now
 } else {
  flag = true
 }
 if (leading && flag) {
  lastCall = now
  return func.apply(context, args)
 }
 if (trailing) {
  clearTimeout(timer)
  timer = setTimeout(function() {
  flag = true
  func.apply(context, args)
  }, wait)
 }
 }
}

Expliquez, à chaque fois que l'heure du dernier appel est enregistrée, et comparée à l'heure actuelle, si elle est inférieure à l'intervalle, elle ne le sera pas exécuté après la première exécution, est supérieur à l'intervalle ou est appelé après l'intervalle, le drapeau sera réinitialisé. Vous pouvez le comparer avec la version de base ci-dessus.

Limitation

La limitation signifie que peu importe la façon dont elle est déclenchée, elle sera exécutée à l'intervalle spécifié. Il existe également une version de base. 


function throttle(func, wait) {
 var timer
 return function() {
 var context = this
 var args = arguments
 if (!timer) {
  timer = setTimeout(function () {
  timer = null
  func.apply(context, args)
  }, wait)
 }
 }
}

ajoute également deux paramètres comme la fonction anti-shake. Vous pouvez également utiliser l'exemple ci-dessus pour tester. En fait, les codes des deux sont très similaires. . 


function throttle(func, wait, leading, trailing) {
 var timer, lastCall = 0, flag = true
 return function() {
 var context = this
 var args = arguments
 var now = + new Date()
 flag = now - lastCall > wait
 if (leading && flag) {
  lastCall = now
  return func.apply(context, args)
 }
 if (!timer && trailing && !(flag && leading)) {
  timer = setTimeout(function () {
  timer = null
  lastCall = + new Date()
  func.apply(context, args)
  }, wait)
 } else {
  lastCall = now
 }
 }
}

Copie d'objet

La copie d'objet est connue pour être divisée en copie profonde et copie superficielle. La méthode de la technologie noire consiste à utiliser

.

JSON.parse(JSON.stringify(obj))

Une autre méthode consiste à utiliser la récursion


function clone(value, isDeep) {
 if (value === null) return null
 if (typeof value !== &#39;object&#39;) return value
 if (Array.isArray(value)) {
 if (isDeep) {
  return value.map(item => clone(item, true))
 }
 return [].concat(value)
 } else {
 if (isDeep) {
  var obj = {}
  Object.keys(value).forEach(item => {
  obj[item] = clone(value[item], true)
  })
  return obj
 }
 return { ...value }
 }
}
var objects = { c: { &#39;a&#39;: 1, e: [1, {f: 2}] }, d: { &#39;b&#39;: 2 } }
var shallow = clone(objects, true)
console.log(shallow.c.e[1]) // { f: 2 }
console.log(shallow.c === objects.c) // false
console.log(shallow.d === objects.d) // false
console.log(shallow === objects) // false

Pour les types de base, retournez directement Pour les types de référence, traversez et récursivement. appelez la méthode clone.

Résumé

En fait, pour les méthodes ci-dessus, l'idée générale est l'utilisation de récursivité et de fonctions d'ordre supérieur, y compris l'utilisation de fermetures. Le front-end aime poser ces questions. , il est préférable de le mettre en œuvre vous-même, ce qui vous aidera à comprendre.

Recommandations associées :

Diverses méthodes courantes de définition de fonctions dans les compétences JavaScript_javascript

Résumé des points de connaissances liés à la fonction js Partager

Explication du passage par valeur des paramètres de la fonction js

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!

JavaScript json 递归 循环 引用类型 值传递 闭包 JS 对象
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Node.js implémente la fonction d'activation par e-mail d'inscriptionArticle suivant：Node.js implémente la fonction d'activation par e-mail d'inscription

Articles Liés

Voir plus