跳至主要內容
yyshino blog

yyshino blog

欢迎各位小伙伴

国社科区块链
【国社科-区块链】烛光之窗
面试题总结
面试题、面经总结
读书笔记
读后感
我的博客预览
前端知识 | 整体了解 | 深入学习 | 复习
friend：芈渡
friend：芈渡
开发日常
WeakMap与Map的区别

WeakMap与Map的区别

WeakMap

  1. key必须是对象
  2. key是弱引用
弱引用与强引用

  • 弱引用：不会影响垃圾回收机制。即： WeakMap 的 key 不再存在任何引用时，会被直接回收。

  • 强引用：会影响垃圾回收机制。存在强应用的对象永远不会被回收。

对比示例

<script>

    let obj1 = {
        name: '张三'
    }
    let obj2 = {
        name: '张三'
    }

    // 强引用
    const map = new Map()
    // 弱引用
    const weakMap = new WeakMap()
    map.set(obj1,'value')
    weakMap.set(obj2,'value')

    obj1 = null
    obj2 = null

    console.log('map',map) // Map(1) {{…} => 'value'}
    console.log('weakMap',weakMap) // WeakMap {} 空
    
    /**
    此时 WeakMap 中不存在任何值，即: obj2不存在其他引用时， WeakMap 不会阻止垃圾回收，基于obj2的引用将会被清除。这就证明了 WeakMap 的 弱引用特性。
    */
</script>
yyshino小于 1 分钟FrontEndJS
手写reduce

MDN参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

语法

reduce(callbackFn)
reduce(callbackFn, initialValue)
yyshino大约 2 分钟FrontEndJS手写系列
手写call、apply、bind

手写call、apply、bind

总结

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
  • 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
  • bind是返回绑定this之后的函数，apply、call 则是立即执行
yyshino大约 2 分钟FrontEndJS手写系列
Vue响应式实现

原理

Proxy与Object.defineProperty

  1. Proxy
    1. Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。
    2. 当想要修改对象的指定属性时,我们应该使用代理对象进行修改
    3. 代理对象 的任何一个属性都可以触发 handler 的 getter 和 setter
  2. Object.defineProperty
    1. Object.defineProperty 为指定对象的指定属性设置属性描述符
    2. 当想要修改对象的指定属性时，可以使用原对象进行修改
    3. 通过属性描述符，只有 被监听 的指定属性，才可以触发 getter 和 setter
yyshino大约 6 分钟FrontEndJS
Vue源码分析

Vue3源码

框架的基本概念

在本章中，我们对整个 vue 框架设计中的一些基本概念都做了一个了解。明确了如下基本概念：

  1. 命令式
  2. 声明式
  3. 心智负担
  4. 框架设计与取舍之间的关系
  5. 运行时
  6. 编译时
  7. 运行时 + 编译时
  8. 副作用
  9. reactivity、 runtime、compiler 三者之间的运行关系
  10. 扩展：良好的 ts 支持

当我们把这些基本概念了解清楚之后，那么下一章我们就可以准备开始构建我们的 vue 3 框架了。

yyshino大约 4 分钟FrontEndVue2
手写Promise相关方法

Promise.all

特点：

  • Promise.all() 方法接收一个promise的iterable类型（MDN）
  • 只返回一个promise实例
  • 当传入的参数promise全部成功时，最后的结果才会成功（成功的结果是所有的promise的成功的结果组成的数组），只要有一个promise失败，all返回的实例就是一个失败的promise（失败的结果是传入的参数中的第一个失败的promise的结果）
let p1 = new Promise(resolve => {
    setTimeout(resolve, 200, 1)
});
let p2 = new Promise((resolve, reject) => reject(2));
let p3 = 3;
console.log(Promise.all([p1, p2, p3]));//all方法
let myAll = function(parr) {
    let result = [],//最后成功的结果
        count = 0,//累加器，与len比较判断是否全部成功了
        len = parr.length;
    return new Promise((resolve, reject) => {
        for (let p of parr) {// 依次测试传入的参数（转化为promise）是否是成功的
            Promise.resolve(p).then(res => {
                result[count] = res;// 成功就加入到结果中
                count++;// 累加器加一
                if (count == len) {// 如果相等，说明都成功了，可以走成功resolve
                    resolve(res);
                }
            }, err => {
            // 只要有一个失败了，直接走失败reject
                reject(err);
            })
        }
    })
}
console.log(myAll([p1, p2, p3]));
yyshino大约 3 分钟FrontEndJS手写系列
文件上传难点分析

文件上传

  • 断点续传

  • 大文件分包上传

    • 遇到问题

      1. 前后端上传请求超时限制，一次性传输大小限制。

      2. 网络抖动等，失败后需要重新上传。

      3. http1.1版本， TCP连接默认是open的，所有请求都通过同一个连接进行数据传输，如果前面的请求被阻塞了，后面的请求也得不到响应，也叫HTTP/1.1 中的队头阻塞问题，除非建立多个连接，但是多个连接会浪费资源。

      4. 无进度条，用户体验极差。

yyshino大约 5 分钟面经功能难点面经
style-scoped原理与作用

作用：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

原理：scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。

yyshino小于 1 分钟FrontEndVue