Dans le développement frontal JavaScript, la question des fonctions js est souvent discutée. Ce problème est une question d'opinions différentes. Ce qui suit est une introduction aux cinq fonctions js courantes à travers un exemple de code. Les amis intéressés peuvent en prendre connaissance. regardez ensemble
Il y a certains problèmes en JavaScript qui sont fréquemment discutés. Tout le monde a des idées différentes sur ces problèmes, si vous voulez comprendre ces problèmes, le meilleur moyen est de les implémenter vous-même. jusqu'au sujet.
Il existe de nombreuses façons d'aplatir les tableaux, mais en fin de compte, la meilleure méthode est la récursivité pour atteindre une profondeur d'aplatissement spécifiée Méthode, pour 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é ici comme la profondeur de. aplatissement, car ce paramètre Il a un effet sur chaque élément du tableau, il est donc placé à l'intérieur de la boucle.
On a mal parlé du currying des fonctions. Chacun a sa propre compréhension et sa propre méthode de mise en œuvre. En une phrase, l'explication est. que s'il y a suffisamment de paramètres, il sera exécuté s'il n'y a pas assez de paramètres, une fonction sera renvoyée. Les paramètres précédents seront stockés jusqu'à ce qu'il y en ait suffisamment.
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. S'il est inférieur au nombre, la fonction. continuera à être renvoyé, sinon il sera exécuté.
D'après ma compréhension, l'anti-shake signifie que peu importe le nombre de fois que vous le déclenchez, il attendra jusqu'à ce que 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)
}
}Il est désormais 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 le test de la fonction. 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('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>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é une fois à chaque fois que vous appuyez sur espace. Si le début est vrai, le dernier le sera. être exécuté à chaque fois que vous terminez. Déclenchez l'exécution une fois. 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, comparez-la avec l'heure actuelle Si elle est inférieure à l'intervalle, elle ne sera pas exécutée après la première exécution. supérieur à l'intervalle ou appelé après l'intervalle , réinitialisez l'indicateur et comparez-le avec la version de base ci-dessus.
La limitation signifie que peu importe la façon dont elle est déclenchée, elle sera exécutée selon l'intervalle spécifié. Nous donnons également une base. 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)
}
}
}Il 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
}
}
}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 !== '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) // falsePour les types de base, retournez directement Pour les types de référence, parcourez et appelez la méthode clone de manière récursive.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.
Articles associés :
Présentation des fonctions de partage de temps pour l'optimisation des performances javascript
Vérification du format d'adresse e-mail en JavaScript
Comment introduire l'icône icône dans le projet Vue
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
