recherche

Maison >interface Web >js tutoriel >Résumé de cinq fonctions JavaScript courantes

Résumé de cinq fonctions JavaScript courantes

零到壹度
零到壹度original
2018-04-02 09:13:551146parcourir

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. 

  1. 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, 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 . 

  1. 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 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. 

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

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. 

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

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. 

  1. 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，可以与上面那个基本版的对比着看。

节流

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

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

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

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

对象拷贝

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

  1. JSON.parse(JSON.stringify(obj))

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

  1. 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 方法。

总结

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

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!

JavaScript 递归 循环 引用类型 闭包 对象
Déclaration：
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
Article précédent：Créez des composants de pagination réutilisables avec VueArticle suivant：Créez des composants de pagination réutilisables avec Vue

Articles Liés

Voir plus