前端面试笔记

const arr = [1,2,[2,3],[5,6],7,0]
const fn = (arr, newArr) => {
    arr.forEach(item => {
      if(Array.isArray(item)) {
        fn(item, newArr)
      } else {
        newArr.push(item)
    }
  })
  return newArr
}
console.log(fn(arr, [])) //  [1, 2, 2, 3, 5, 6, 7, 0]

方法2：flat()
flat()接受一个数值参数，表示需要拉平的层级，Infinity表示无限层级的拉平。

[1, 2, [3, [4, 5]]].flat()  // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
arr.flat(Infinity)          // [1, 2, 2, 3, 5, 6, 7, 0]

方法3：reduce() 函数：遍历数组，每次返回上一次的处理后的值。reduce(function(prev，next){}, initVal), initVal 为prev的初始值，不传initVal，prev的初始值为数组的第一个元素，next为第二个数组元素。

// reduce 每次的prev都是[],所以采用数组的concat()
const fn2 = arr =>  {
    return arr.reduce((prev,next) => { 
        return prev.concat(Array.isArray(next) ? fn2(next) : next)
    },[])
}
  • 防抖debounce
    触发高频事件后n秒内会执行一次,如果n秒内再次触发,则重新计算时间进行执行。
    即：触发高频事件每隔一定时间执行一次。
    场景：防抖常应用于用户进行搜索输入节约请求资源，滚动事件等
const debounce = (fn,time = 500) => {
   let timer = 0
   return function() {
      if(timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this)
      }, time)
    }
  }
// 高频触发函数mousemove  
const box = document.getElementsByClassName('box')[0]
const fn4 = () => console.log('触发函数')
box.addEventListener('mousemove', debounce(fn4))
  • 节流throttle
    n秒内触发高频事件只会执行一次, 所以节流会稀释函数的执行频率。
    场景：节流常应用于防重复点击。
const throttle = (fn, time = 100) => {
    let isFinished = false
    return function() {
      if(isFinished) {
            clearTimeout(timer)
            return 
      }
      timer = setTimeout(() => {
        fn.apply(this)
        isFinished = true
      }, time)
  }
}
// 防重复点击
const box = document.getElementsByClassName('box')[0]
const fn4 = () => console.log('触发函数')
box.addEventListener('click', throttle(fn4))
  • arguments.callee
    在函数内部，有两个特殊的对象：arguments 和 this。其中， arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。
    场景：使用递归的过程中会根据条件来调用函数本身，这样会导致一个问题，函数内部存在一个我们自定义的函数名，不利于再次封装。
// 使用函数名
const fn = function(num) {
    if(num > 1) {
      return num * fn(num - 1)
    } else {
        return 1
    }
 }
// 使用arguments.callee
const fn = function(num) {
  if(num > 1) {
      return num * arguments.callee(num - 1)
  } else {
    return 1
  }
}
  • 函数珂里化
    指的是将一个接受多个参数的函数变为接受一个参数，返回一个函数的固定形式，便于再次调用。
// 求和：curry(1)(2)(3)(4) 及curry(2)(2,3,4)(5)
const curry = function() {
  const _arg = [...arguments]
  const fn = function() {
      _arg.push(...arguments)
      return fn
  }
  fn.toString = () => _arg.reduce((prev, next) => prev + next)
  return fn
}
  • 原型（prototype）、原型链和原型继承
    image.png
  1. 所有引用类型（函数，数组，对象）都拥有proto属性（隐式原型）
  2. 所有函数拥有prototype属性（显式原型）（仅限函数）
  3. 原型链的实现：查找属性，如果本身没有，则会去__ proto __ 中查找，也就是构造函数的显式原型中查找，如果构造函数中也没有该属性，因为构造函数也是对象，也有 __ proto __，那么会去它的显式原型中查找，一直到null，如果没有则返回undefined。
  4. 构造函数都有一个prototype属性指向原型对象，原型对象通过constructor属性指向构造函数本身。
    实例对象都有一个__ proto __属性指向原型对象
  5. 实例对象的__ proto __指向构造函数的prototype，从而实现继承。
    prototype对象相当于特定类型所有实例对象都可以访问的公共容器
  6. 继承：
    （1）原型链继承
    （2）call和apply。区别call(this,p1,p2,p3,...)，apply(this.[...params])第二个开始为参数集合
    （3）方法继承：深度拷贝原型，然后更改constructor属性
  person._ proto _ = Object.create(People.prototype)
  peson.constructor = Person
  或者
  Person.prototype = Object.create(People.prototype)
  peson.constructor = Person

https://blog.csdn.net/yucihent/article/details/79424506
https://zhuanlan.zhihu.com/p/35790971

  • new 操作符的实现
    思路：新创建一个空对象，新对象原型赋值构造函数的原型，执行构造函数并绑定this到新对象。（新对象拥有构造函数及原型上的属性和方法）
function _MyNew(obj) {
    // 创建一个空对象
    let newObj = Object.create()
    // 设置空对象的原型
    newObj.__proto__ = obj.prototype
    // 使用apply绑定this，执行构造函数
    const res = obj.apply(newObj)
    const isObject = typeof res === 'object' && res !== null;
    const isFunction = typeof res === 'function';
    return isObject || isFunction ? res : obj;
}
  • 宏任务与微任务
    Javascript 是单线程脚本语言。分为同步任务（立即执行）、异步任务（不会立即执行），异步任务分为宏任务、微任务，异步任务进过事件注册模块将回调添加到任务队列进行处理。
    （1）宏任务
    常见的有：
    setTimeout
    setInterval
    requireAnimationFrame请求动画帧（浏览器独有）
    UI render（浏览器独有）
    setImmediate（node独有）
    I/O
    （2）微任务
    常见的有：
    Promise.then()
    Process.nextTick（node独有）
    Object.observe
    MutationObserve
    （1）当一个异步任务进入栈的时候，主线程会判断是同步还是异步任务，如果是同步任务，则立即执行；如果是异步任务，则将该任务交给异步处理模块处理，当异步处理完到触发条件的时候，根据任务的类型，将回调压入队列之中。如果是宏任务，则新增一个宏任务，任务队列中的宏任务可以有多个；如果是微任务，则直接压入微任务队列。
    （2）当两个宏任务队列的时候，第一个宏任务队列中有一个微任务：即当在执行宏任务的时候，遇到微任务则将微任务加入微任务队列，最后剩下一个微任务和一个宏任务，此时会先执行微任务，再执行宏任务。
    （3）宏任务与微任务在浏览器和node中的执行有所差异
    浏览器：执行宏任务，然后执行宏任务对应的微任务，重复进行。由于执行栈的入口为script，而全局任务为宏任务，所以当栈为空的时候，同步任务执行完毕，会先执行微任务队列。微任务执行完毕，会读取宏任务队列中最前的任务，执行宏任务的过程中，如果遇到微任务，则依次加入微任务队列，栈空后，再次读取微任务,依次类推。
    node：执行完全部的宏任务，然后执行微任务。
      console.log('1')
      setTimeout(()=>{
          console.log('2');
          new Promise(resolve=>{
            console.log('3')
            resolve();
          }).then(()=>{
            console.log('4')
          })
      },0)
      new Promise(resolve=>{
            console.log('5')
            resolve();
          }).then(()=>{
            console.log('6')
          }) 
      setTimeout(()=>{
          console.log('7');
      },0)   
      setTimeout(()=>{
          console.log('8');
          new Promise(resolve=>{
            console.log('9')
            resolve();
          }).then(()=>{
            console.log('10')
          })
      },0)
      new Promise(resolve=>{
            console.log('11')
            resolve();
          }).then(()=>{
            console.log('12')
          })
      console.log('13');

答案：//1， 5，11，13，6，12，2，3，4，7，8，9，10
转 https://blog.csdn.net/qq_42833001/article/details/87252890

  • 渲染几万条数据不卡住页面借助请求动画帧requestAnimationFrame
/**
        功能: 匀速滚动到页面顶部
        @dom: 事件源DOM,
        @speed: 总份数
      */
      function scrollTopHandler(dom, speed = 500) {
        // 滚动的高度
        let doc_scrollTop
        let i = 0
        // requestAnimationFrame 的执行函数
        const gotoTop = function() {
          // 将滚动高度分为1000份, 每份为unit的高度
          const unit = doc_scrollTop / speed
          // 每次执行10份unit的距离
          i += 10
          // 计算每次滚动的高度
          const scrollTop = doc_scrollTop - i * unit > 0 ? doc_scrollTop - i * unit : 0
          document.documentElement.scrollTop = scrollTop
          // 判断执行分数i小于speed 总分数，则继续执行
          if (i <= speed) {
            window.requestAnimationFrame(gotoTop)
          } else {
            // 重置
            i = 0
          }
        }
        // 点击事件监听
        const handler = function() {
          doc_scrollTop = document.documentElement.scrollTop
          window.requestAnimationFrame(gotoTop)
        }
        dom.addEventListener('click',handler,false)
      }
      // 调用方法
      const dom = document.querySelector('#gotoTop')
      scrollTopHandler(dom)

    function bubbleSort(arr) {
        for(let i = 0; i < arr.length - 1; i++){ 
          for(let j = i + 1; j <= arr.length - 1; j++) { 
            if(arr[i] > arr[j]) {
              const tempVal = arr[i]
              arr[i] = arr[j]
              arr[j] = tempVal
            }
          }
        }
        return arr
      }

双指针-快速排序
思想：来自于快速排序，在一个有序的数组（从小到大）中最左边一定是最小值，最右边是最大值。我们可将最小值与最大值相加与目标值进行比较，如果两数之和大于目标值，我们就让最大值小一点（读取第二个最大值），如果两数之和小于目标值，我们就让最小值大一点（读取第二个最小值），如果两数之和刚好等于目标值，保存最大值，最小值，并且让最大值小一点，最小值大一点。需要注意的是前提条件是数组必须有序！

  function sum2(arr,tartgetVal) {
        const resulutArr = []
        const sortArr = arr.sort(function(a,b){
          return a - b
        })
        let start = 0 
        let end = sortArr.length - 1
        while(start < end) {
          if (sortArr[start] + sortArr[end] === tartgetVal) {
            resulutArr.push([sortArr[start], sortArr[end]])
            start += 1
            end -= 1
          } else if (sortArr[start] + sortArr[end] >= tartgetVal) {
            end -= 1
          } else {
            start += 1
          }
        }
        console.log(resulutArr)
        return resulutArr
      }
  const arr = [1, 4, 3, 2, 6, 5]
  sum2(arr,6)
function sum3(arr, targetVal) {
        const sortArr  = arr.sort((a,b) => {
          return a - b; 
        })
        console.log(sortArr)
        let result = []
        const len = sortArr.length - 3
        for(let i = 0; i < sortArr.length -3; i++) {
          let left = i + 1, right = sortArr.length - 1
          while(left < right) {
            if(sortArr[i] + sortArr[left] + sortArr[right] === targetVal) {
              result.push([sortArr[i], sortArr[left], sortArr[right]])
              left += 1
              right -= 1
            } else if (sortArr[i] + sortArr[left] + sortArr[right] > targetVal) {
              right -= 1
            } else {
              left += 1
            }
          }
        }
        console.log(result)
        return result
      }
    const arr = [1, 4, 3, 2, 6, 5, 9, 8, 21, 22, 34, 10, 14]
    sum3(arr, 10)
// 
 [Array(3), Array(3), Array(3)]
  0:  [1, 3, 6]
  1: [1, 4, 5]
  2: [2, 3, 5]
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349