Heim > Artikel > Web-Frontend > Zusammenfassung von fünf gängigen JavaScript-Funktionen

Zusammenfassung von fünf gängigen JavaScript-Funktionen

零到壹度Original: 2018-04-02 09:13:551128Durchsuche

Es gibt einige Probleme in JavaScript, die oft diskutiert werden. Wenn Sie diese Probleme verstehen möchten, gibt es nicht viel zu sagen. Sagen Sie: Kommen wir zur Sache. Dieser Artikel gibt Ihnen eine Zusammenfassung von fünf gängigen JavaScript-Funktionen. Ich hoffe, er kann Freunden in Not helfen.

Array-Reduzierung

Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber letztendlich ist der beste Weg eine Rekursion, um eine Reduzierungsmethode mit einer bestimmten Tiefe zu implementieren ist die Grundroutine, die jeder verstehen wird.

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, das heißt, jedes Element wird durchlaufen, und wenn ein Element ein Array ist, lassen Sie das Element weiterhin aufgerufen werden, hier wird Depth als Abflachungstiefe angegeben. Da sich dieser Parameter auf jedes Element des Arrays auswirkt, wird er innerhalb der Schleife platziert.

Currying

Über das Currying von Funktionen wurde schlecht gesprochen. Die Erklärung in einem Satz lautet: Ausführen, wenn die Parameter ausreichen Wenn nicht genügend Parameter vorhanden sind, wird eine Funktion zurückgegeben und die vorherigen Parameter werden gespeichert, bis genügend 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 jedes Mal, wenn die Anzahl der Parameter beurteilt wird, sie mit der Anzahl der Curry-Funktionen verglichen wird Wenn es kleiner als ist, geben Sie die Funktion einfach weiter zurück, andernfalls führen Sie sie aus.

Anti-Shake

Nach meinem Verständnis ist Anti-Shake egal wie oft Sie es auslösen, es wird erst nach einem von Ihnen angegebenen Zeitraum nach dem letzten Mal ausgelöst auslösen. 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 am Anfang und beim letzten Mal ausgelöst werden soll, und es kann konfiguriert werden. Schreiben Sie zunächst einen Test Seite, um das Testen der Funktion zu erleichtern. Jedes Mal, wenn Sie die Leertaste drücken, erhöht sich die Zahl um 1, um die Anti-Shake- und Drosselungsfunktionen 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 führenden und nachgestellten Parameter ausgeführt werden. Wenn der Zeilenabstand wahr ist, wird er jedes Mal ausgeführt, wenn das Leerzeichen vorhanden ist gedrückt. Wenn das Trailing wahr ist, 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)
    }
  }
}

解释一下，每次记录上次调用的时间，与现在的时间对比，小于间隔的话，第一次执行后之后就不会执行，大于间隔或在间隔时间后调用了，则重置 flag，可以与上面那个基本版的对比着看。

节流

节流就是，不管怎么触发，都是按照指定的间隔来执行，同样给个基本版。

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

同样和防抖函数一样加上两个参数，也可使用上面的例子来测试，其实两者的代码很类似。

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

对象拷贝

对象拷贝都知道分为深拷贝和浅拷贝，黑科技手段就是使用

```
JSON.parse(JSON.stringify(obj))
```

还有个方法就是使用递归了

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

对于基本类型直接返回，对于引用类型，遍历递归调用 clone 方法。

总结

其实对于上面这些方法，总的来说思路就是递归和高阶函数的使用，其中就有关于闭包的使用，前端就爱问这些问题，最好就是自己实现一遍，这样有助于理解。

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

JavaScript 递归循环引用类型闭包对象

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：Erstellen Sie mit Vue wiederverwendbare PaginierungskomponentenNächster Artikel：Erstellen Sie mit Vue wiederverwendbare Paginierungskomponenten

In Verbindung stehende Artikel

Mehr sehen