Heim > Artikel > Web-Frontend > Detaillierte Erklärung von fünf gängigen Funktionen in JavaScript

Detaillierte Erklärung von fünf gängigen Funktionen in JavaScript

小云云Original: 2018-03-26 09:07:521263Durchsuche

Es gibt einige Probleme in JavaScript, die oft diskutiert werden. Wenn Sie diese Probleme verstehen möchten, wenden Sie sich am besten an das Thema.

Array-Reduzierung

Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber am Ende ist es am besten, eine Reduzierungsmethode mit einer bestimmten Tiefe zu rekursieren und zu implementieren, damit Sie die grundlegenden Routinen verstehen .

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 ]

Die rekursive Implementierung ist sehr einfach und leicht zu verstehen. Wenn ein Element ein Array ist, wird das Element weiterhin aufgerufen . Die Tiefe wird hier als Abflachungstiefe angegeben, da dieser Parameter jedes Element des Arrays beeinflusst und innerhalb der Schleife platziert wird.

Currying

Über das Currying von Funktionen wurde schlecht gesprochen. Jeder hat sein eigenes Verständnis und seine eigene Implementierungsmethode. Die Erklärung in einem Satz lautet: Wenn genügend Parameter vorhanden sind, wird sie ausgeführt. und wenn nicht genügend Parameter vorhanden sind, wird eine Funktion mit den zuvor gespeicherten Parametern zurückgegeben, bis diese ausreichen.

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]

Aus dem obigen Code ist nicht schwer zu erkennen, dass die Anzahl der Parameter jedes Mal mit der Anzahl der Curry-Funktionsparameter verglichen wird Ist sie kleiner als die Zahl, wird die Funktion weiterhin zurückgegeben, andernfalls wird sie ausgeführt.

Anti-Shake

Nach meinem Verständnis bedeutet Anti-Shake, dass, egal wie oft man es auslöst, es erst nach einem von Ihnen festgelegten Zeitraum nach dem letzten Auslösen ausgelöst wird. Schreiben Sie im Anschluss an diese Erklärung eine Basisversion.

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

Jetzt besteht die Anforderung, dass es zu Beginn und beim letzten Mal ausgelöst wird, und es kann konfiguriert werden. Schreiben Sie zunächst eine Testseite, um dies zu erleichtern Testen der Funktion Jedes Mal, wenn Sie die Leertaste drücken, wird die Zahl um 1 erhöht, um die Anti-Shake- und Throttling-Funktionen zu testen.

<!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>

Bestimmen Sie, ob der Anfang und das Ende durch die beiden Parameter „Leading“ und „Trailing“ ausgeführt werden Trailing ist Wenn true, wird der letzte Trigger jedes Mal ausgeführt, wenn er endet. Anti-Shake-Funktionsabstand: Wenn beide wahr sind, wird durch das erste Drücken der Leertaste 1 hinzugefügt, und dann wird durch schnelles Drücken der Leertaste die darin enthaltene getUserAction zu diesem Zeitpunkt nicht ausgeführt, sondern nach dem Loslassen , es wird nach dem Loslassen nicht ausgeführt.

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)
 }
 }
}

Erklären Sie, dass jedes Mal die Zeit des letzten Anrufs aufgezeichnet und mit der aktuellen Zeit verglichen wird. Wenn sie kleiner als das Intervall ist, wird dies nicht der Fall sein nach der ersten Ausführung ausgeführt wird, größer als das Intervall ist oder nach dem Intervall aufgerufen wird, wird das Flag zurückgesetzt. Sie können es mit der obigen Basisversion vergleichen.

Drosselung

Drosselung bedeutet, dass sie unabhängig von der Auslösung gemäß dem angegebenen Intervall ausgeführt wird. Es gibt auch eine Basisversion.

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)
 }
 }
}

fügt auch zwei Parameter wie die Anti-Shake-Funktion hinzu. Sie können das obige Beispiel auch zum Testen verwenden. Tatsächlich sind die Codes der beiden sehr ähnlich .

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
 }
 }
}

Objektkopie

Objektkopie wird bekanntermaßen in tiefe Kopie und flache Kopie unterteilt. Die Schwarztechnologiemethode ist die Verwendung von

JSON.parse(JSON.stringify(obj))

Eine andere Methode ist die Verwendung von Rekursion

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

Für Referenztypen direkt zurückkehren Rufen Sie die Klonmethode auf.

Zusammenfassung

Tatsächlich besteht die allgemeine Idee für die oben genannten Methoden in der Verwendung von Rekursion und Funktionen höherer Ordnung, einschließlich der Verwendung von Abschlüssen Am besten implementieren Sie es einfach selbst, um Ihr Verständnis zu verbessern.

Verwandte Empfehlungen:

Verschiedene gängige Methoden zur Funktionsdefinition in JavaScript_Javascript-Fähigkeiten

Zusammenfassung der Wissenspunkte im Zusammenhang mit JS-Funktionen Teilen

Erklärung der Wertübergabe von js-Funktionsparametern

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von fünf gängigen Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json 递归循环引用类型值传递闭包 JS 对象

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.js implementiert die Registrierungs-E-Mail-AktivierungsfunktionNächster Artikel：Node.js implementiert die Registrierungs-E-Mail-Aktivierungsfunktion

In Verbindung stehende Artikel

Mehr sehen