每日一题

2022.1.12

1.定位中，absolute 与 fixed 共同点与不同点

相同点：改变行内元素的呈现方式，display被设置为inline—block. 元素脱离文档流，触发BFC
不同点：相对定位的元素不同，absolute是相对于离他最近的有定位的元素进行定位（一般使用“子绝父相”的方式），如果没有定位的父元素则相对于浏览器窗口. fixed是相对于浏览器窗口定位。在有滚动条的页面中，absolute会跟随页面滑动，fixed不会滑动，始终固定在同一位置

2.闭包的概念及特点

闭包就是可以访问其他函数内部变量的函数，利用闭包可以突破作用域链。
函数嵌套函数，内部函数引用外部函数的数据，并且外部函数执行就会产生闭包。使用闭包一般是为了设计私有的方法和属性，闭包可以避免全局变量的污染，缺点是闭包会常驻内存，增加内存使用量，使用不当容易造成内存泄漏。

3.力扣101.对称二叉树：给你一个二叉树的根节点root，检查它是否轴对称

var isSymmetric = function(root) {
    //使用递归遍历左右子树 递归三部曲
    // 1. 确定递归的参数 root.left root.right和返回值true false 
    const compareNode=function(left,right){
        //2. 确定终止条件 空的情况
        if(left===null&&right!==null||left!==null&&right===null){
            return false;
        }else if(left===null&&right===null){
            return true;
        }else if(left.val!==right.val){
            return false;
        }
        //3. 确定单层递归逻辑
        let outSide=compareNode(left.left,right.right);
        let inSide=compareNode(left.right,right.left);
        return outSide&&inSide;
    }
    if(root===null){
        return true;
    }
    return compareNode(root.left,root.right);
};

2022.1.13

1.箭头函数与普通函数的区别

箭头函数相比于普通函数更加简洁
箭头函数没有this不会改变this的指向
箭头函数没有prototype，agruements
箭头函数没有原型故不能作为构造函数
箭头函数不能作Generator函数，不能使用yeild关键字

2.this 指向哪里？

箭头函数没有this，this的指向取决于箭头函数外部的执行上下文
普通函数，this的指向取决于该函数运行时的执行上下文环境 - https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
详细this问题见上面链接，转自王红元老师

3.扩展运算符的作用及适用场景

扩展运算符（...）
将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]) //1,2,3
该运算符主要用于函数调用，可以将一个数组变为参数序列，后面还可以放置表达式
扩展运算符的应用
合并数组,与解构赋值结合

var arr1 = ['a','b'];
var arr2 = ['c'];  
var arr3 = ['d','e'];
[...arr1,...arr2,...arr3]  
//['a','b','c','d','e']

扩展运算符还可以将字符串转为真正的数组

[...'hello']
//['h','e','l','l','o']

2022.1.14

1.强缓存和协商缓存的区别

缓存的目的是使页面加载更快，缓存的是静态资源，如js,css,img等
强缓存和协商缓存如果命中缓存，服务器都不会返回资源，区别是强缓存不会发送请求到服务器，协商缓存会发送请求到服务器，强缓存返回的状态码200，协商缓存状态码304

2.如何解决跨域问题

1.jsonp
2.postMessage
3 .websocket
4cors 支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案，使用cors解决跨域问题，会在发送请求时出现两种情况，简单请求和复杂请求。

3.事件委托的理解及使用场景

事件委托，又称事件代理，就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听，利用的原理是DOM元素的事件冒泡，可以提高性能，大量节省内存占用，减少事件注册
使用场景：很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件

2022.1.17

1.解释一下JavaScript的同源策略

同源是指，协议域名端口三者相同，有任意一个不相同时，都不算同源
在跨域问题上，仅仅是通过URL的首部来识别而不会根据域名对应的IP地址是否相同来判断，所以及使IP地址相同，协议，域名，端口不同，也不能算同源

2.如何实现异步编程

通过回调函数
promise
事件监听
采用发布订阅方式
async await

3.事件模型的三个阶段

捕获阶段目标阶段冒泡阶段
捕获阶段（父级元素先触发，子级元素后触发）
冒泡阶段（子级元素先触发，父级元素后触发）

4 手写快速排序

快速排序1
function quickSort(arr){
  if(arr.length<2) return arr
  const mid = arr[0]
  const l = arr.filter((item,index) => item <=mid && index !==0)
  const r = arr.filter((item) => item >mid)
  return [...quickSort(l),mid,...quickSort(r)]
}
quickSort(arr)

快速排序2
arr = [1,23,4,3,5,4,5,6]
function qSort(arr){
  if(arr.length < 2) {return arr}
  const left = []
  const right = []
  const mid = arr[0]
  for(let i=1;i<arr.length;i++){
    if(arr[i]<mid){
      left.push(arr[i])
    }else{
      right.push(arr[i])
    }
  }
  return [...qSort(left),mid,...qSort(right)]
}

快速排序3
var sortArray = function(nums) {
    if (nums.length < 2) return nums;
    return  quickSort(nums, 0, nums.length - 1);
};

function quickSort(nums, left, right) {
    if (left >= right) return;
    let pivotIndex = partition(nums, left, right)
    quickSort(nums, left, pivotIndex - 1)
    quickSort(nums, pivotIndex + 1, right)
    return nums;
}

function partition (nums, left, right) {
    let pivot = right;
    let leftIndex = left;
    for (let i = left; i < right; i++) {
        if (nums[i] < nums[pivot]) {
            [nums[leftIndex], nums[i]] = [nums[i], nums[leftIndex]];
            leftIndex++;
        }
    }
    [nums[leftIndex], nums[pivot]] = [nums[pivot], nums[leftIndex]];
    return leftIndex;
}

2022.1.18

1. cookie sessionstorage localstorage 的区别

共同点：都是保存在浏览器端，并且是同源的,都是字符串类型的键值对
cookie数据始终在同源的http请求中携带，每次http请求都会携带cookie，cookie的数据大小不能超过4KB sessionstorage和localstorage可以达到5MB
sessionstorage:仅在浏览器窗口关闭前有效，不能长久保存
localstorage：数据始终有效，窗口或浏览器关闭也一直存在

2.浏览器的渲染过程

解析HTML构建DOM树，并行请求CSS，JS，img
CSS文件下载完成开始构建CSSOM树
CSSOM树构建完成和DOM树一起生成Render tree
计算每个节点在屏幕中的位置，调用GPU绘制合成图层，显示在屏幕上

3.渐进增强和优雅降级

渐进增强:是针对低版本浏览器构建页面，保证最基本的功能，然后针对高版本浏览器进行效果，交互等改进并追加功能，达到更好的用户体验
优雅降级：一开始就构建完整功能，然后对低版本浏览器进行兼容适配

4 手写斐波那契数列

fib = function(n) {
    let dp = [0, 1]
    for(let i = 2; i <= n; i++) {
        dp[i] = dp[i - 1] + dp[i - 2]
    }
    console.log(dp)
    return dp[n]
};

前端面试知识整理，每日一题