Résumé de cinq fonctions JavaScript courantes-js tutoriel-php.cn

Table des matières

Aplatissement des tableaux

Currying

Anti-shake

节流

对象拷贝

总结

Maison

interface Web

js tutoriel

Résumé de cinq fonctions JavaScript courantes

零到壹度

Apr 02, 2018 am 09:13 AM

javascript 函数

Certains problèmes liés à JavaScript sont souvent 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. Dites : Passons aux choses sérieuses. Cet article partage avec vous un résumé de cinq fonctions JavaScript courantes. Le contenu est assez bon. J'espère qu'il pourra aider les amis dans le besoin.

Aplatissement des tableaux

Il existe de nombreuses façons d'aplatir les tableaux, mais en fin de compte, le meilleur moyen est de faire une récursivité, d'implémenter une méthode d'aplatissement avec une profondeur spécifiée, ceci est la routine de base que tout le monde comprendra.

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 ]

Copier après la connexion

L'implémentation récursive est très simple et facile à comprendre, c'est-à-dire parcourir chaque élément, et si un élément est un tableau, laissez l'élément continuent d'être appelés, ici Depth est spécifié comme profondeur d'aplatissement. Parce que 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 d'implémentation : Exécuter lorsque les paramètres sont suffisants. pas assez de paramètres, une fonction est renvoyée et les paramètres précédents sont 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]

Copier après la connexion

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

Anti-shake

D'après ma compréhension, l'anti-shake est 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 la dernière déclencheur. 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)
  }
}

Copier après la connexion

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 un test. page pour faciliter le test de 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>

Copier après la connexion

Déterminez si le début et la fin sont exécutés via les paramètres de début et de fin. Si le début est vrai, il sera exécuté à chaque fois que l'espace est. Si trail est 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)
    }
  }
}

Copier après la connexion

解释一下，每次记录上次调用的时间，与现在的时间对比，小于间隔的话，第一次执行后之后就不会执行，大于间隔或在间隔时间后调用了，则重置 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)
    }
  }
}

Copier après la connexion

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

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

Copier après la connexion

对象拷贝

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

```
JSON.parse(JSON.stringify(obj))
```
Copier après la connexion

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

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

Copier après la connexion

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

总结

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

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7326

Tutoriel Java

1625

Tutoriel CakePHP

1350

Tutoriel Laravel

1262

Tutoriel PHP

1209

Afficher plus

Related knowledge

Conseils pour créer dynamiquement de nouvelles fonctions dans les fonctions Golang Apr 25, 2024 pm 02:39 PM

Le langage Go propose deux technologies de création de fonctions dynamiques : la fermeture et la réflexion. les fermetures permettent d'accéder aux variables dans la portée de la fermeture, et la réflexion peut créer de nouvelles fonctions à l'aide de la fonction FuncOf. Ces technologies sont utiles pour personnaliser les routeurs HTTP, mettre en œuvre des systèmes hautement personnalisables et créer des composants enfichables.

Considérations relatives à l'ordre des paramètres dans la dénomination des fonctions C++ Apr 24, 2024 pm 04:21 PM

Dans la dénomination des fonctions C++, il est crucial de prendre en compte l’ordre des paramètres pour améliorer la lisibilité, réduire les erreurs et faciliter la refactorisation. Les conventions courantes d'ordre des paramètres incluent : action-objet, objet-action, signification sémantique et conformité de la bibliothèque standard. L'ordre optimal dépend de l'objectif de la fonction, des types de paramètres, de la confusion potentielle et des conventions du langage.

Comment écrire des fonctions efficaces et maintenables en Java ? Apr 24, 2024 am 11:33 AM

La clé pour écrire des fonctions Java efficaces et maintenables est la suivante : restez simple. Utilisez un nom significatif. Gérer des situations particulières. Utilisez une visibilité appropriée.

Collection complète de formules de fonctions Excel May 07, 2024 pm 12:04 PM

1. La fonction SOMME permet de sommer les nombres d'une colonne ou d'un groupe de cellules, par exemple : =SOMME(A1:J10). 2. La fonction MOYENNE permet de calculer la moyenne des nombres dans une colonne ou un groupe de cellules, par exemple : =AVERAGE(A1:A10). 3. Fonction COUNT, utilisée pour compter le nombre de nombres ou de texte dans une colonne ou un groupe de cellules, par exemple : =COUNT(A1:A10) 4. Fonction IF, utilisée pour effectuer des jugements logiques basés sur des conditions spécifiées et renvoyer le résultat correspondant.

Comparaison des avantages et des inconvénients des paramètres par défaut et des paramètres variables des fonctions C++ Apr 21, 2024 am 10:21 AM

Les avantages des paramètres par défaut dans les fonctions C++ incluent la simplification des appels, l’amélioration de la lisibilité et l’évitement des erreurs. Les inconvénients sont une flexibilité limitée et des restrictions de dénomination. Les avantages des paramètres variadiques incluent une flexibilité illimitée et une liaison dynamique. Les inconvénients incluent une plus grande complexité, des conversions de types implicites et des difficultés de débogage.

Quels sont les avantages des fonctions C++ renvoyant des types référence ? Apr 20, 2024 pm 09:12 PM

Les avantages des fonctions renvoyant des types référence en C++ incluent : Améliorations des performances : le passage par référence évite la copie d'objets, économisant ainsi de la mémoire et du temps. Modification directe : L'appelant peut modifier directement l'objet de référence renvoyé sans le réaffecter. Simplicité du code : le passage par référence simplifie le code et ne nécessite aucune opération d'affectation supplémentaire.

Utilisation avancée des paramètres de référence et des paramètres de pointeur dans les fonctions C++ Apr 21, 2024 am 09:39 AM

Les paramètres de référence dans les fonctions C++ (essentiellement les alias de variable, la modification de la référence modifie la variable d'origine) et les paramètres de pointeur (stockage de l'adresse mémoire de la variable d'origine, modification de la variable en déréférençant le pointeur) ont des utilisations différentes lors du passage et de la modification de variables. Les paramètres de référence sont souvent utilisés pour modifier les variables d'origine (en particulier les grandes structures) afin d'éviter une surcharge de copie lorsqu'elles sont transmises aux constructeurs ou aux opérateurs d'affectation. Les paramètres de pointeur sont utilisés pour pointer de manière flexible vers des emplacements de mémoire, implémenter des structures de données dynamiques ou transmettre des pointeurs nuls pour représenter des paramètres facultatifs.

Quelle est la différence entre les fonctions PHP personnalisées et les fonctions prédéfinies ? Apr 22, 2024 pm 02:21 PM

La différence entre les fonctions PHP personnalisées et les fonctions prédéfinies est la suivante : Portée : les fonctions personnalisées sont limitées à la portée de leur définition, tandis que les fonctions prédéfinies sont accessibles tout au long du script. Comment définir : les fonctions personnalisées sont définies à l'aide du mot-clé function, tandis que les fonctions prédéfinies sont définies par le noyau PHP. Passage de paramètres : les fonctions personnalisées reçoivent des paramètres, tandis que les fonctions prédéfinies peuvent ne pas nécessiter de paramètres. Extensibilité : des fonctions personnalisées peuvent être créées selon les besoins, tandis que les fonctions prédéfinies sont intégrées et ne peuvent pas être modifiées.

See all articles