집 > 기사 > 웹 프론트엔드 > JavaScript 학습의 5가지 일반적인 기능

JavaScript 학습의 5가지 일반적인 기능

青灯夜游원래의: 2018-09-12 17:31:59993검색

JavaScript에는 자주 논의되는 몇 가지 문제(예: 조절 기능, 흔들림 방지 기능, 재귀 기능 등)가 있습니다. 이 장에서는 JavaScriptz 사용법을 배우는 과정에서 흔히 볼 수 있는 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씩 증가시킵니다.

<html>
<head>
    <style>
        #container{text-align: center; color: #333; font-size: 30px;}
    </style>
</head>
<body>
    <div id="container"></div>
    <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
    }
  }
}

객체 복사

우리 모두는 객체 복사가 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)로 나누어진다는 것을 알고 있습니다. 블랙 기술 방식은

JSON.parse(JSON.stringify(obj))

또 다른 방법은 재귀(recursion)

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

를 사용하는 것입니다.

기본 유형은 직접 복사입니다. return, 참조의 경우 clone 메소드를 재귀적으로 입력하고 트래버스하고 호출합니다.

요약

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

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

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

성명：

이전 기사：JavaScript의 Web Worker에 대한 자세한 소개다음 기사：JavaScript의 Web Worker에 대한 자세한 소개