前端面试高概率会问到的知识点

周末时刻，开心学习

• 常见算法题 这些都是我在开发工具打印过的 可以运行

//冒泡排序
bubbleSort(arr){
      for(let i=0;i<arr.length;i++){
        for(let j=i+1;j<arr.length;j++){
          if(arr[i]>arr[j]){
            let tem = arr[i]
            arr[i] = arr[j]
            arr[j] = tem
          }
        }
      }
      // return arr
      return console.log(arr)

  //快速排序
    quickSort(arr){
      console.log(arr)
      debugger
      if(arr.length<=1){
        return arr
      }
      let leftArr =[]
      let rightArr =[]
      // let q =arr.splice(Math.floor(arr.length/2),1)[0]
      let q = arr[Math.floor(arr.length/2)]
      for(let i in arr){
        if(arr[i]<q){
          leftArr.push(arr[i])
        }else{
          rightArr.push(arr[i])
        }
      }
      //retuen的疑问
      // return console.log([...this.quickSort(leftArr),q,...this.quickSort(rightArr)])
      // return console.log([...leftArr,...rightArr])
      // return this.quickSort(leftArr).concat([q],this.quickSort(rightArr))
    },

//统计一个字符串出现最多的字母
    findMaxDupliChar(str){
     //判断字符串
     if (str.length==1){
       return str
     }
     //给字符串每个字母赋值（出现的次数）
     let charObj = {}
     for(let i =0; i<str.length;i++){
       if(!charObj[str.charAt(i)]){
         charObj[str.charAt(i)]=1
       }else{
         charObj[str.charAt(i)]+=1
       }
     }

 //   //取出最大的数对应的字符串
      let MaxChar = ''
      let maxValue = 1
      for(let k in charObj){
        if(charObj[k]>=maxValue){
          MaxChar = k
          maxValue = charObj[k]
        }
      }
      // return MaxChar
      return console.log(MaxChar)
    },

 //斐波那契数列
    getFibonaci(n){
      debugger
      let i = 0
      let fibo = []
      while(i<n){
        if(i<=1){
          fibo.push(i)
        }else{
          fibo.push(this.getFibonaci(i-1)+this.getFibonaci(i-2))
        }
        i++
      }
      return console.log(fibo)
    },

//找出数组中最大值和最小值并且计算它们的差值
  minMax(){
      let arr = [1,2,3,8,8,9,98,8]
      let arr2 = [2,7]
      console.log(arr.sort((a,b)=>{
        return a-b
      }))//对数组进行排序
      let min = Math.min(...arr)//es6方法取得最小值
      console.log(Math.min.apply(null,arr))//es5取出最小值
      console.log(new Set(arr))//数组去重
      console.log(min)
      let max = Math.max(...arr)
      console.log(max)
      let max_min = max-min
      console.log(max_min)
      console.log([...arr,...arr2])//合并数组
    },

  //字符串的一些方法
    stri(){
      let str = 'asdgjkjkkk'
      let str2 = 'ghhjj'
      console.log(str)
      console.log(str.split(''))//拆分字符串
      console.log(str.split('').reverse().join(''))//字符串反转之后再合并字符串
      console.log([...str])//拆分字符串...运算符
      console.log(str.charAt(1))//打印出下标为1的字符
      console.log(str.concat(str2))//连接两个字符串
      console.log([...str,...str2].join(''))//es6先拆分再连接再合并
    }
  }

   //取出最大的数对应的字符串
      let MaxChar = ''
      let maxValue = 1
      for(let k in charObj){
        if(charObj[k]>=maxValue){
          MaxChar = k
          maxValue = charObj[k]
        }
      }
      // return MaxChar
      return console.log(MaxChar)
    },

• css
  垂直居中 ：
  1、通过verticle-align:middle实现CSS垂直居中。
  通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
  2、通过display:flex实现CSS垂直居中。
  随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3、通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。
4、通过display:table-cell实现CSS垂直居中。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。
5、通过隐藏节点实现CSS垂直居中。
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。
这种方法也适用于CSS水平居中，原理一样。

6、已知父元素高度通过transform实现CSS垂直居中。
给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。
7.可以通过text-aligin:center的方式实现。
8、通过line-height实现CSS垂直居中。
设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况
圆角
border-radius:50% 或者接像素都是可以的。

定位

css画一个三角形

- http 和https的区别

- 怎样实现双向绑定

**

- webpack打包原理

• 防抖节流
• 
  

闭包在实际场景中的应用





以下列出的就不全部举出了，有时间会在其他文章写，这些都是我自己的面试经历总结下来的，非常实用的噢。

• 基础数据结构
• 堆，栈，树
• es6数组的相关方法
• 宏任务和微任务
• 继承
• 模块
• axios
• 接口请求的前后端整体架构和流程
• ts是什么，为什么要用ts
• 预加载
• 分布式，响应式编程