手写 JavaScript 部分常见方法的代码

发表于 | 分类于 | 评论数： | 热度： ℃ | 热度： ℃

  最近在复习 js 的基础知识，记录一些常见方法的实现，保持保持写代码的能力。

一、深拷贝

  可查看之前关于深拷贝的一篇随笔：深拷贝（DeepCopy），本小节代码见： github。

1、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
function deepCopy (obj) {
  let result
  if (obj !== null && typeof obj === 'object') {
    result = Array.isArray(obj) ? [] : {}
    for (var i in obj) {
      result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i]
    }
  } else {
    result = obj
  }
  return result
}

2、验证

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1、数组拷贝
let arr = [{ a: 1 }, { b: 2 }]
let arr1 = arr
let arr2 = deepCopy(arr)
console.log(arr1[0] === arr[0]) // true，浅拷贝，赋址
console.log(arr2[0] === arr[0]) // false，深拷贝，赋值

// 2、对象拷贝
let obj = { a: { b: 1 } }
let obj1 = obj
let obj2 = deepCopy(obj)
console.log(obj1.a === obj.a) // true，浅拷贝，赋址
console.log(obj2.a === obj.a) // false，深拷贝，赋值

3、判断是否数组的两种写法

1
2
3
let arr = []
arr.constructor === Array // true
Array.isArray(arr) // true

二、防抖

  多次操作只触发最后一次操作，可查看之前关于防抖的一篇随笔：防抖-debounce，本小节代码见： github。

1、代码实现

1
2
3
4
5
6
7
8
9
function debounce (func, delay = 600) {
  let timer = null
  return function () {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      func()
    }, delay)
  }
}

2、验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>防抖</title>
    <button id="btn">点击</button>
    <script>
      // 验证
      document.getElementById('btn').addEventListener('click', debounce(() => { console.log('执行函数') }, 2000))

      // 实现
      function debounce (func, delay = 600) {
        let timer = null
        return function () {
          timer && clearTimeout(timer)
          timer = setTimeout(() => {
            func()
          }, delay)
        }
      }
    </script>
  </head>
  <body></body>
</html>

三、节流

  n 秒内触发事件仅执行一次函数，可查看之前关于节流的一篇随笔：节流-throttle，本小节代码见： github。

1、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
 function throttle (func, delay = 600) {
  let timer = null
  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      timer = null
      func()
    }, delay)
  }
}

2、验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>节流</title>
    <button id="btn">点击</button>
    <script>
      // 验证
      document.getElementById('btn').addEventListener('click', throttle(() => { console.log('执行函数') }, 2000))

      // 实现
      function throttle (func, delay = 600) {
        let timer = null
        return function () {
          if (timer) {
            return
          }
          timer = setTimeout(() => {
            timer = null
            func()
          }, delay)
        }
      }
    </script>
  </head>
  <body></body>
</html>
以上

随笔标题:手写 JavaScript 部分常见方法的代码

随笔作者:刘先玉

发布时间:2021年03月31日 - 10:10:17

最后更新:2021年03月31日 - 10:10:17

原文链接:https://liuxianyu.cn/article/js-code.html