집 > 기사 > 웹 프론트엔드 > 다섯 가지 일반적인 JavaScript 함수

다섯 가지 일반적인 JavaScript 함수

亚连원래의: 2018-05-29 12:03:191483검색

JavaScript 프론트 엔드 개발에서 js 함수 문제는 종종 논의됩니다. 이 문제는 다양한 의견의 문제입니다. 아래에서는 샘플 코드를 통해 js의 5가지 공통 기능을 소개합니다.

자바스크립트에는 몇 가지 문제가 있습니다. 사람마다 생각이 다릅니다. 이러한 문제를 이해하고 싶다면 더 이상 고민하지 않고 직접 구현해 보는 것이 가장 좋습니다.

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>

선행 및 후행 매개변수는 시작 및 끝 실행 여부를 결정하는 데 사용됩니다. 선행이 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

, 참조 유형의 경우 clone 메소드가 재귀적으로 호출됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.