本文记录自己每日的一些学习情况，仅用于自身

2022/04/18

new Set(arr) 他是es6推出的一种数据结构，她的成员要求不能重复并且唯一

举个例子

let arr = [1,1,2,3,3,4];

const setArr=new Set(arr);

console.log(setArr); //[1,2,3,4]

利用这个特性，遇到数组去重的题型直接使用结果再[...arr]即可，方便好用。

常用的api：

size：setArr.size //4 返回set数据结构的所有成员数量

has：setArr.has() //Boolean 返回是否含有的Boolean结果

add：setArr.add() //Boolean 返回向setArr添加成员的Boolean结果

delete：setArr.delete(*) //Boolean 同add

clear: setArr.clear() //清除所有成员，无返回值

利用上诉api，遇到数组交集题型可直接使用，以下为具体例子：

const intersection = (num1: any[], num2: any[]) => {
  if (num1.length < num2.length) {
    [num1, num2] = [num2, num1]
  }
  const num1Set = new Set(num1);
  const resSet = new Set();
  for (let i = 0; i < num2.length; i++) {
    const cur = num2[i];
    num1Set.has(cur) && resSet.add(cur)
  }
  console.log([...resSet]);
  return [...resSet];
}

let a = [1, 2, 3]
let b = [1, 2, 3, 4, 4, 4]

intersection(a, b)

Event loop定式

由于本人理解能力超群，于是给自己做了一个Event loop八股文

通常情况下分为两种Event loop

1.浏览器

浏览器的Event loop：

1个宏任务队列，一个微任务队列。
先执行全局script代码，执行完同步代码调用栈清空后
从微任务队列中依次取出所有的任务放入调用栈执行，微任务队列清空后
从宏任务队列中只取位于队首的任务放入调用栈执行
执行微队列中的所有任务，再去宏队列取一个，以此构成事件循环。

2.Node JS （暂不定式）

回文字符串的答题

如果是TS则会省事儿很多，直接上JS吧

思路就是

将参数转大/小写，防止字母问题。
将参数转字符串，防止其他参数类型。
将参数转为数组然后反转再转回字符串
对比return结果

  const isReverse = (str1: string, str2: string) => {
    const normalize = (str: string) => 
    str.toLowerCase().
    normalize('NFD').
    split('').
    reverse().
    join('')
    return normalize(str1) === str2;
  }

玻璃拟态（毛玻璃效果）

backdrop-filter: blur(6px);

但是有缺陷，各个版本的浏览器支持程度不一致。

懒加载

如果考点在优化之类的，那么懒加载是一定可以答的。

vue针对图片懒加载插件：vue-lazyload

react针对组件懒加载：

import { lazy } from 'react';
const Home = lazy(() => import('@/pages/home'))

虚拟滚动

针对给你10000条数据，你如何处理，诸如之类的问题

RN:自带解决方案

Vue:比较好一点的插件，后者能在触发下一页时添加loading。vue-virtual-scroller、vue-virtual-scroll-list

React：

手撕一波：

  前提准备:
      当前列表容器的可视高度
      列表每项的高度
      可视区域内能容纳的最大数量(使用向上取整)
      当前可视元素的下标
  实际(要处理是否存在，思路中不涉及处理--?处理即可)：
      使用ref.current.offestHeight拿到计算高度
      同理单个元素高度：ref.current.children[1].offestHeight
      当前顶部可视元素的下标：Math.floor(listRef.current.scrollTop / 单个元素高度)
      渲染元素：listDom.slice(currentIndex, currentIndex + domCount)
      给scroll添加监听事件(addEventListener)handleChangeConf()
      const handleChangeConf = () => {
        const domHeight = listRef.current.children[0].offsetHeight || 0
        const domCount = Math.ceil(listRef.current?.offsetHeight / domHeight)
        const currentIndex = Math.floor(listRef.current.scrollTop / domHeight)
        document和currentIndex是核心
      }
      ******下集待续

前端备忘指南（长期更新）