suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung allgemeiner Funktionen in JS

Detaillierte Erläuterung allgemeiner Funktionen in JS

php中世界最好的语言
php中世界最好的语言Original
2018-05-09 09:30:221774Durchsuche

Dieses Mal werde ich Ihnen die Verwendung gängiger JS-Funktionen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung gängiger JS-Funktionen?

Array-Reduzierung

Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber am Ende ist die Rekursion die beste, um eine bestimmte Tiefe der Reduzierung zu erreichen Methode, damit Sie die Grundabläufe 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 es sich bei einem Element um ein Array handelt, wird die Tiefe des Elements hier weiterhin als Abflachungstiefe angegeben Dieser Parameter ist für Arrays wichtig. Jedes Element spielt eine Rolle und wird daher in die Schleife eingefügt.

Currying

Über das Currying von Funktionen wurde schlecht gesprochen. Jeder hat sein eigenes Verständnis und seine eigene Implementierungsmethode Wenn genügend Parameter vorhanden sind, wird eine Funktion zurückgegeben. Die vorherigen Parameter werden gespeichert, bis genügend Parameter vorhanden sind. 

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 Geben Sie die Funktion weiterhin zurück, andernfalls wird sie ausgeführt.

Anti-Shake

Nach meinem Verständnis bedeutet Anti-Shake, dass egal wie oft man es auslöst, es wartet bis ein Zeitraum, den Sie nach dem Auslösen des letzten Auslösers angeben. 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 ist es erforderlich, dass es zu Beginn und beim letzten Mal ausgelöst wird. Schreiben Sie zunächst eine Testseite, um das Testen der Funktion zu erleichtern , die Zahl erhöht sich um 1. Testen Sie hier die Entprell- und Drosselungsfunktionen. 

<!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('container')
  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 Start und das Ende durch die beiden Parameter Leading und Trailing ausgeführt werden. Wenn Leading wahr ist, wird es jedes Mal ausgeführt, wenn Sie die Leertaste drücken. Wenn Trailing wahr ist, wird der letzte Trigger ausgelöst jedes Mal, wenn es 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 die Zeit des letzten Anrufs jedes Mal mit der aktuellen Zeit verglichen wird. Wenn sie kleiner als das Intervall ist, wird sie nach der ersten Ausführung nicht ausgeführt das Intervall oder wird nach dem Intervall aufgerufen. Setzen Sie dann das Flag zurück und vergleichen Sie es mit der obigen Basisversion.

Drosselung

Drosselung bedeutet, dass sie unabhängig von der Auslösung gemäß dem angegebenen Intervall ausgeführt wird. Wir geben auch eine Grundvoraussetzung Version. 

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

Es ist bekannt, dass Objektkopien in tiefe Kopien und flache Kopien unterteilt werden. Die Schwarztechnologiemethode ist

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 !== 'object') 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: { 'a': 1, e: [1, {f: 2}] }, d: { 'b': 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 Basistypen direkt zurückkehren. Für Referenztypen die Klonmethode durchlaufen und rekursiv aufrufen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Angular integriertes UI-Framework von Drittanbietern und detaillierte Erläuterung der Verwendung von Steuerelementen

Yuansheng Node .js-Registrierungs-E-Mail-Aktivierung Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung allgemeiner Funktionen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung der Formatierungsmethode des Vue-FiltersNächster Artikel：Detaillierte Erläuterung der Formatierungsmethode des Vue-Filters

In Verbindung stehende Artikel

Mehr sehen