집 > 기사 > 웹 프론트엔드 > JavaScript의 5가지 공통 함수에 대한 자세한 설명

JavaScript의 5가지 공통 함수에 대한 자세한 설명

小云云원래의: 2018-03-26 09:07:521213검색

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 ]

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

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의 두 매개변수를 통해 시작과 끝이 실행되는지 확인합니다. 선행이 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)
 }
 }
}

설명하세요. 마지막 호출 시간이 기록될 때마다 현재 시간과 비교하세요. 간격보다 작으면 첫 번째 실행 이후에는 실행되지 않습니다. 간격을 두거나 간격 후에 호출한 다음 플래그를 재설정하고 위의 기본 버전과 비교하십시오.

Throttling

Throttling은 어떻게 트리거되든 지정된 간격에 따라 실행된다는 의미입니다. 기본 버전도 있습니다.

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

For 기본 유형 직접 참조 유형의 경우 복제 메소드를 순회하고 호출하여 재귀적으로 반환합니다.

요약

사실 위 방법의 경우 일반적인 아이디어는 클로저 사용을 포함하여 재귀 및 고차 함수를 사용하는 것입니다. 이러한 질문을 직접 구현하는 것이 가장 좋습니다. , 이해하는 데 도움이 될 것입니다.