防抖

原理

事件高频触发后，n秒内函数只会执行一次，若n秒内事件再次触发，则重新计时，总之就是要等触发完事件 n 秒内不再触发事件，函数才执行

实现
  1. // 基本逻辑
  2. function debounce(){
  3.   let timer = null; // 消除之前可能存在的定时任务
  4.   if(timer) timer = null
  5.   timer = setTimeout(()=>{
  6.     console.log('function called')
  7.     timer = null // 执行完毕后，清楚定时任务
  8.   },500)
  9. }
  11. // 封装防抖函数
  12. function(callback, waitingTime = 500){
  13.   let timer = null;
  14.   return function (){
  15.     if(timer) timer = null // 消除之前可能存在的定时任务
  16.     timer = setTimeout(()=>{
  17.       callback.apply(this,...arguments)
  18.       timer = null // 执行完毕后，清楚定时任务
  19.     },waitingTime)
  20.   }
  21. }

节流

原理

用户操作过程中，某段时间内只触发一次

实现

  1. function throttle(callback,waitingTime,callImmediately){
  2.   let timer = null,
  3.        isFirstTime = true;
  4.   return function(){
  5.     if(isFisrtTime){
  6.       callback.aplly(this,arguments)
  7.     }else{
  8.       if(timer) return
  9.       timer = setTimeout(()=>{
  10.         callback.aplly(this,arguments)
  11.         timer = null
  12.       },waitingTime)
  13.     }
  14.   }
  15. }

模拟new运算符

原理

  1.   - 新建一个空对象
  2.   - 链接到原型
  3.   - 绑定this
  4.   - 返回该对象

实现

  1. function myNew() {
  2. // 1.新建一个空对象
  3. let obj = {}
  4. // 2.获得构造函数
  5. let con = [].shift.call(arguments)
  6. // 3.链接原型,实例的 __proto__ 属性指向构造函数的 prototype
  7. obj.__proto__ = con.prototype
  8. // 4.绑定this，执行构造函数
  9. let res = con.apply(obj, arguments)
  10. // 5.返回新对象
  11. return typeof res === 'object' ? res : obj
  12. }
  14. function Person(name) {
  15.     this.name = name
  16. }
  17. let person = myNew(Person,'nanjiu')
  18. console.log(person) //{name: "nanjiu"}
  19. console.log(typeof person === 'object') //true
  20. console.log(person instanceof Person) // true

模拟instanceof

instanceof 用于检测构造函数的prototype是否在实例的原型链上，需要注意的是instanceof只能用来检测引用数据类型，对于基本数据检测都会返回false

原理

通过循环检测实例的proto属性是否与构造函数的prototype属性相等

实现

  1. /**
  2.  * instanceof 用于检测构造函数的prototype是否在实例的原型链上
  3.  */
  4. function myInstanceof(left, right) {
  5.     // 先排除基本数据类型
  6.     if(typeof left !== 'object' || left === null) return false
  7.     let proto = left.__proto__
  8.     while(proto) {
  9.         if(proto === right.prototype) return true
  10.         proto = proto.__proto__
  11.     }
  12.     return false
  13. }
  15. function Person() {}
  16. let person = new Person()
  17. console.log(myInstanceof(person,Person)) // true

模拟Function.prototype.apply()

实现

  1. Function.prototype.myApply = function(context) {
  2.     var context = context || window // 获取需要绑定的this
  3.     context.fn = this // 获取需要改变this的函数
  4.     const arg = arguments[1] // 获取传递给函数的参数
  6.     if(!(arg instanceof Array)) {
  7.         throw Error('参数需要是一个数组')
  8.     }
  9.     const res = context.fn(...arg) // 执行函数
  10.     delete context.fn // 删除该方法
  11.     return res // 返回函数返回值
  12. }
  13. function say(a,b,c) {
  14.     console.log(this.name,a,b,c)
  15. }
  16. say.myApply({name:'nanjiu'},[1,2,3]) //nanjiu 1 2 3
  17. say.apply({name:'nanjiu'},[1,2,3]) //nanjiu 1 2 3

模拟Function.prototype.call()

实现

  1. Function.prototype.myCall = function(context) {
  2.     var context = context || window // 获取需要改变的this
  3.     context.fn = this // 获取需要改变this的函数
  4.     const args = [...arguments].slice(1) // 获取参数列表
  5.     const res = context.fn(...args) // 将参数传给函数并执行
  6.     delete context.fn // 删除该方法
  7.     return res // 返回函数返回值
  8. }
  10. function say(a,b,c) {
  11.     console.log(this.name,a,b,c)
  12. }
  13. say.myCall({name:'nanjiu'},1,2,3) //nanjiu 1 2 3
  14. say.call({name:'nanjiu'},1,2,3) //nanjiu 1 2 3

模拟Function.prototype.bind()

实现

  1. Function.prototype.myBind = function(context) {
  2.     var context = context || window //获取需要改变的this
  3.     context.fn = this  // 获取需要改变this的函数
  5.     //获取函数参数
  6.     const args = [...arguments].slice(1)
  7.     // 与apply，call不同的是这里需要返回一个函数
  8.     return () => {
  9.         return context.fn.apply(context,[...args])
  10.     }
  12. }
  14. function say(a,b,c) {
  15.     console.log(this.name,a,b,c)
  16. }
  17. say.bind({name: 'nanjiu'},1,2,3)() //nanjiu 1 2 3
  18. say.myBind({name: 'nanjiu'},1,2,3)() //nanjiu 1 2 3

模拟Array.prototype.forEach()

实现

  1. Array.prototype.myForEach = function(callback, context) {
  2.     const arr = this // 获取调用的数组
  3.     const len = arr.length || 0
  5.     let index = 0  // 数组下标
  6.     while(index < len) {
  7.         callback.call(context ,arr[index], index)
  8.         index++
  9.     }
  10. }
  12. let arr = [1,2,3]
  13. arr.forEach((item,index) => {
  14.     console.log(`key: ${index} - item: ${item}`)
  15. })
  16. console.log('----------')
  17. arr.myForEach((item,index) => {
  18.     console.log(`key: ${index} - item: ${item}`)
  19. })
  20. /**
  21.  * key: 0 - item: 1
  22. key: 1 - item: 2
  23. key: 2 - item: 3
  24. ----------
  25. key: 0 - item: 1
  26. key: 1 - item: 2
  27. key: 2 - item: 3
  28.  */

模拟Array.prototype.map()

实现

  1. /**
  2.  * map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
  3.  */
  4. Array.prototype.myMap = function(callback, context) {
  5.     const arr = this,res = []
  6.     const len = arr.length || 0
  7.     let index = 0
  8.     while(index < len) {
  9.         res.push(callback.call(context, arr[index], index))
  10.         index ++
  11.     }
  12.     return res  // 与forEach不同的是map有返回值
  13. }
  14. const arr = [1,2,3]
  15. let res1 = arr.map((item,index) => {
  16.     return `k:${index}-v:${item}`
  17. })
  18. let res2 = arr.myMap((item,index) => {
  19.     return `k:${index}-v:${item}`
  20. })
  21. console.log(res1) // [ 'k:0-v:1', 'k:1-v:2', 'k:2-v:3' ]
  22. console.log(res2) // [ 'k:0-v:1', 'k:1-v:2', 'k:2-v:3' ]

模拟Array.prototype.filter()

实现

  1. /**
  2.  * `filter()` 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
  3.  */
  5. Array.prototype.myFilter = function(callback, context) {
  6.     const arr = this,res = []
  7.     const len = arr.length
  8.     let index = 0
  9.     while(index < len) {
  10.         if(callback.call(context,arr[index],index)) {
  11.             res.push(arr[index])
  12.         }
  13.         index ++   
  14.     }
  15.     return res
  16. }
  18. const arr = [1,2,3]
  19. let res1 = arr.filter((item,index) => {
  20.     return item<3
  21. })
  22. let res2 = arr.myFilter((item,index) => {
  23.     return item<3
  24. })
  26. console.log(res1) // [ 1, 2 ]
  27. console.log(res2) // [ 1, 2 ]

函数柯里化

柯理化后的函数会在参数传够了才执行函数体

实现

  1. function curry(fn, curArgs) {
  2.     const len = fn.length  // 需要柯里化函数的参数个数
  3.     curArgs = curArgs || []
  5.     return function() {
  6.         let args = [].slice.call(arguments) // 获取参数
  7.         args = curArgs.concat(args) //拼接参数
  8.         // 基本思想就是当拼接完的参数个数与原函数参数个数相等才执行这个函数，否则就递归拼接参数
  9.         if(args.length < len) {
  10.             return curry(fn, args)
  11.         }else{
  12.             return fn.apply(this, args)
  13.         }
  14.     }
  15. }
  17. let fn = curry(function(a,b,c){
  18.     console.log([a,b,c])
  19. })
  20. fn(1,2,3) // [ 1, 2, 3 ]
  21. fn(1,2)(3) // [ 1, 2, 3 ]
  22. fn(1)(2,3) // [ 1, 2, 3 ]
  23. fn(1)(2)(3) // [ 1, 2, 3 ]

类数组转数组

类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。

实现

  1. function translateArray() {
  2.     //方法一：Array.from
  3.     const res1 = Array.from(arguments)
  4.     console.log(res1 instanceof Array, res1) // true [ 1, 2, 3 ]
  6.     // 方法二：Array.prototype.slice.call
  7.     const res2 = Array.prototype.slice.call(arguments)
  8.     console.log(res2 instanceof Array, res2) // true [ 1, 2, 3 ]
  10.     // 方法三：concate
  11.     const res3 = [].concat.apply([],arguments)
  12.     console.log(res3 instanceof Array, res3) // true [ 1, 2, 3 ]
  14.     // 方法四：扩展运算符
  15.     const res4 = [...arguments]
  16.     console.log(res4 instanceof Array, res4) // true [ 1, 2, 3 ]
  17. }
  19. translateArray(1,2,3)

实现深拷贝

  1. const isComplexDataType = (obj) => (typeof obj === 'object' && obj !== null);
  2. function deepClone(origin , hash = new WeakMap()){
  3.     if(isComplectDataType(obj)){
  4.       //判断date、RegExp类型对象
  5.     if(instanceof Date){
  6.         return new Date(obj)
  7.     }
  8.     if(instanceof Regxp){
  9.         return new Regxp(obj)
  10.     }
  11.     // 判断hash表中是否已有缓存，避免自身引用导致的循环递归
  12.     if(hash.get(obj)) return hash.get(obj)
  13.     //获取属性描述符，然后创建新对象
  14.     let descriptors = Object.getOwnPropertyDescriptors(obj);
  15.     let newObj = Object.create(Object.getPrototypeOf(obj) ,descriptors);//可以创建对象和数组
  16.     hash.set(obj, newObj);
  17.     for(let key of Reflect.ownKeys(obj)){
  18.         newObj[key] = isComplexDataType(origin[key]) ? deepClone(origin[key]) : origin[key]
  19.     }
  20.     return newObj
  21.   }else{
  22.       return obj
  23.   }
  24. }

实现AJAX

过程

  • 创建XMLHttpRequest对象
  • 打开链接 （指定请求类型，需要请求数据在服务器的地址，是否异步i请求）
  • 向服务器发送请求（get类型直接发送请求，post类型需要设置请求头）

  • 接收服务器的响应数据（需根据XMLHttpRequest的readyState属性判定调用哪个回调函数）

    实现

    1. function ajax(url, method, data=null) {
    2. const xhr = XMLHttpRequest() // 咱们这里就不管IE低版本了
    3. // open()方法，它接受3个参数：要发送的请求的类型，请求的url和是否异步发送请求的布尔值。
    4. xhr.open(method, url ,false) // 开启一个请求，当前还未发送
    6. xhr.onreadyStatechange = function() {
    7.    if(xhr.readyState == 4) {
    8.        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    9.            alert(xhr.responseText);
    10.        } else {
    11.            console.log("Request was unsuccessful: " + xhr.status);
    12.        }
    13.    }
    14. }
    15. if(method === 'post') {
    16.    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    17. }
    18. xhr.send(data) // get请求，data应为null，参数拼接在URL上
    19. }

多维数组扁平化

  1. function flat(arr) {
  2.     const res = []
  3.     // 递归实现
  4.     const stack = [...arr] // 复制一份
  5.     while(stack.length) {
  6.         //取出复制栈内第一个元素
  7.         const val = stack.shift()
  8.         if(Array.isArray(val)) {
  9.             // 如果是数组，就展开推入栈的最后
  10.             stack.push(...val)
  11.         }else{
  12.             // 否则就推入res返回值
  13.             res.push(val)
  14.         }
  15.     }
  16.     return res
  17. }
  18. const arr = [1,[2],[3,4,[5,6,[7,[8]]]]]
  19. console.log(flat(arr)) //[1, 2, 3, 4, 5, 6, 7, 8]
  21. // 调用flat
  22. const arr = [1,[2],[3,4,[5,6,[7,[8]]]]]
  23. console.log(arr.flat(Infinity)) //[1, 2, 3, 4, 5, 6, 7, 8]

setTimeout 模拟 setInterval

递归调用setTimeout

  1. function mySetInterval(callback, delay) {
  2.     let timer = null
  3.     let interval = () => {
  4.         timer = setTimeout(()=>{
  5.             callback()
  6.             interval() // 递归
  7.         }, delay)
  8.     }
  9.     interval() // 先执行一次
  10.     return {
  11.         id: timer,
  12.         clear: () => {
  13.             clearTimeout(timer)
  14.         }
  15.     }
  16. }
  18. let time = mySetInterval(()=>{
  19.     console.log(1)
  20. },1000)
  21. setTimeout(()=>{
  22.     time.clear()
  23. },2000)

setInterval 模拟 setTimeout

setInterval执行一次后将setInterval清除即可

  1. function mySetTimeout(callback, delay) {
  2.     let timer = null
  3.     timer = setInterval(()=>{
  4.         callback()
  5.         clearInterval(timer)
  6.     },delay)
  7. }
  9. mySetTimeout(()=>{
  10.     console.log(1)
  11. },1000)

sleep

实现一个函数，n秒后执行指定函数

  1. function sleep(func, delay) {
  2.     return new Promise((resolve, reject) => {
  3.         setTimeout(() => {
  4.             resolve(func())
  5.         }, delay)
  6.     })
  7. }
  9. function say(name) {
  10.     console.log(name)
  11. }
  12. async function go() {
  13.     await sleep(()=>say('nanjiu'),1000) //过一秒打印nanjiu
  14.     await sleep(()=>say('前端南玖'),2000) // 再过两秒打印前端南玖
  15. }
  16. go()

数组去重的多种实现方式

set

  1. let arr = [1,2,3,2,4,5,3,6,2]
  2. function arrayToHeavy1(arr) {
  3.     return [...new Set(arr)]
  4. }
  5. console.log(arrayToHeavy1(arr)) //[ 1, 2, 3, 4, 5, 6 ]

indexOf

  1. function arrayToHeavy2(arr) {
  2.     let newArr = []
  3.     for(let i=0; i<arr.length; i++) {
  4.         if(newArr.indexOf(arr[i]) == -1){
  5.             newArr.push(arr[i])
  6.         }
  7.     }
  8.     return newArr
  9. }
  10. console.log(arrayToHeavy2(arr)) //[ 1, 2, 3, 4, 5, 6 ]

filter

  1. function arrayToHeavy3(arr) {
  2.     return arr.filter((item, index) => {
  3.         return arr.indexOf(item) == index
  4.     })
  5. }
  7. console.log(arrayToHeavy3(arr)) //[ 1, 2, 3, 4, 5, 6 ]

include

  1. function arrayToHeavy5(arr) {
  2.     let res = []
  3.     for(let i=0; i<arr.length; i++) {
  4.         if(!res.includes(arr[i])) {
  5.             res.push(arr[i])
  6.         }
  7.     }
  8.     return res
  9. }
  10. console.log(arrayToHeavy5(arr)) //[ 1, 2, 3, 4, 5, 6 ]

解析url参数

  1. function queryData(key) {
  2.     let url = window.location.href,obj = {}
  3.     let str = url.split('?')[1] // 先拿到问号后面的所有参数
  4.     let arr = str.split('&') // 分割参数
  5.     for(let i=0; i< arr.length; i++) {
  6.         let kv = arr[i].split('=')
  7.         obj[kv[0]] = decodeURIComponent(kv[1])
  8.     }
  9.     console.log(url,obj)
  10.     // {a: '1', b: '2', c: '3', name: '南玖'}
  11.     return obj[key]
  13. }
  14. //http://127.0.0.1:5500/src/js/2022/%E6%89%8B%E5%86%99/index.html?a=1&b=2&c=3
  15. console.log(queryData('name')) // 南玖
  17. function getURL(){
  18.   let queryStr = window.location.href.split('?')[1],
  19.        queryObj = {};
  20.   let arr = queryStr.split('&');
  21.   for(let i = 0;i < arr.length; i++){
  22.     let singleQueryArr = arr[i].split('=');
  23.     queryObj[singleQueryArr[0]] = singleQueryArr[1]
  24.   }
  25.   return queryObj
  26. }

斐波那契数列

基础版

  1. function fib(n) {
  2.     if(n == 0) return 0
  3.     if(n == 1 || n == 2) return 1
  4.     return fib(n-1) + fib(n-2)
  5. }
  7. // console.log(fib(4)) //F(4)=F(3)+F(2)=F(2)+F(1)+F(2)=1+1+1=3
  8. let t = +new Date()
  9. console.log(fib(40)) //102334155
  10. console.log(+new Date()-t) //783ms

优化版

  1. function fib2(n) {
  2.     if(fib2[n] !== undefined) return fib2[n]
  3.     if(n == 0) return 0
  4.     if(n == 1 || n == 2) return 1
  6.     const res = fib2(n-1) + fib2(n-2)
  7.     fib2[n] = res
  8.     return res
  9. }
  10. let t1 = +new Date()
  11. console.log(fib2(40)) //102334155
  12. console.log(+new Date()-t1)  //5ms