집 >웹 프론트엔드 >JS 튜토리얼 >다섯 가지 일반적인 JavaScript 함수 요약

다섯 가지 일반적인 JavaScript 함수 요약

零到壹度원래의: 2018-04-02 09:13:551147검색

자바스크립트에는 자주 논의되는 몇 가지 문제가 있습니다. 이러한 문제에 대해 사람마다 생각이 다릅니다. 이러한 문제를 이해하고 싶다면 더 이상 고민하지 않고 직접 구현해 보는 것이 가장 좋습니다. 이 기사에서는 다섯 가지 일반적인 JavaScript 기능을 요약하여 공유합니다. 내용이 도움이 필요한 친구들에게 도움이 되기를 바랍니다. Array flattening

배열을 평면화하는 방법에는 여러 가지가 있지만 결국 가장 좋은 방법은 지정된 깊이의 평면화 방법을 반복해서 구현하여 기본 루틴을 이해하는 것입니다.

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 ]

재귀 구현은 매우 간단하고 이해하기 쉽습니다. 즉, 각 항목을 순회하고, 항목이 배열인 경우 항목이 계속 호출되도록 여기서는 평탄화 깊이로 지정합니다. 이 매개변수는 배열에 매우 중요하기 때문에 의 모든 항목에는 역할이 있으므로 루프 내부에 배치됩니다.

Currying

함수 커링에 대한 이야기는 다들 각자의 이해와 구현 방법이 있습니다. 한 문장으로 설명하면

매개변수가 충분하지 않으면 실행됩니다. 함수를 반환합니다. 이전 매개변수가 충분할 때까지 저장하세요

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]

위 코드에서 보는 것은 어렵지 않습니다. 매개변수 개수를 판단할 때마다 커리된 함수 매개변수 개수와 비교하여 그 개수보다 작으면 계속됩니다. 함수를 반환하고 그렇지 않으면 실행됩니다.

손떨림 방지

제가 이해한 바에 따르면 손떨림 방지는 몇 번이나 트리거하더라도 마지막 트리거 이후 지정한 시간까지 트리거되지 않는다는 의미입니다

. 이 설명에 따라 기본 버전을 작성하십시오.

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

이제 처음과 마지막에 실행되어야 한다는 요구사항이 있으며 이를 구성할 수 있습니다. 먼저 스페이스바를 누를 때마다 기능을 쉽게 테스트할 수 있도록 테스트 페이지를 작성하세요. , 숫자가 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>

Leading과 Trailing의 두 매개변수는 시작과 끝의 실행 여부를 결정하는 데 사용됩니다. Leading이 true인 경우, trailing이 true인 경우 마지막 트리거가 실행될 때마다 실행됩니다. 구현이 끝날 때마다 트리거됩니다. 흔들림 방지 기능 거리, 둘 다 true인 경우 처음으로 스페이스바를 누르면 1이 추가되고, 이후 빠르게 스페이스바를 누르면 내부의 getUserAction이 이때 실행되지 않고, 후행을 false로 추가한 후 실행됩니다. , 놓으면 실행되지 않습니다.

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

总结

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

위 내용은 다섯 가지 일반적인 JavaScript 함수 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：Vue로 재사용 가능한 페이지 매김 구성 요소 구축다음 기사：Vue로 재사용 가능한 페이지 매김 구성 요소 구축