前端面试总结-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

代码搬运工

1803

文章

1038125

访问

+关注

分类

暂无分类

日期归档

2023-05(5)

2023-06(6)

前端面试总结

发布于2021-04-09 07:09 阅读(250) 评论(0) 点赞(28) 收藏(4)

1. 防抖和节流
在这里插入图片描述
什么是防抖和节流，他们的应用场景有哪些？

//防抖第一次立即执行
function debounceImmediate(f, wait){
    let timer;
    let flag = true;
    return (...args) => {
        clearTimeout(timer);
        if (flag) {
            f(...args);
            flag = false;
        }
        timer = setTimeout(() => {
            flag = true;
        }, wait);
    }
}
//防抖合并实现（通过传参判断是否需要第一次立即执行）
function debounceMerge(f, wait, isImmediate) {
    let timer;
    let flag = true;
    return (...args) => {
        clearTimeout(timer);
        if (flag) {
            flag = false;
            isImmediate && f(...args);
        }
        timer = setTimeout(() => {
            !isImmediate && f(...args);
            flag = true;
        }, wait);
    }
}
//节流第一次立即执行
function throttleImmediate(f, wait) {
    let timer;
    let flag = true;
    return (...args) => {
        if (timer) return;
        if (flag) {
            f(...args);
            flag = false;
            timer = setTimeout(() => {
                flag = true;
                timer = null;
            }, wait);
        }
    } 
}
//节流合并实现（通过传参判断是否需要第一次立即执行）
function throttleMerge(f, wait, isImmediate) {
    let timer;
    let flag = true;
    return (...args) => {
        if (timer) return;
        if (flag) {
            isImmediate && f(...args);
            flag = false;
            timer = setTimeout(() => {
                !isImmediate && f(...args);
                flag = true;
                timer = null;
            }, wait);
        }
    }
}

2. HTTP缓存
在这里插入图片描述
彻底弄懂HTTP缓存机制及原理

3. 浏览器同源策略
在这里插入图片描述
浏览器同源政策及其规避方法
 跨域资源共享 CORS 详解

4. 前端安全
在这里插入图片描述

前端安全美团技术团队

5. HTTP 2.0有哪些特性
在这里插入图片描述
HTTP----HTTP2.0新特性

6. 原型、原型链
在这里插入图片描述
一张图搞定JS原型&原型链

7. 闭包
在这里插入图片描述
深入理解javascript原型和闭包系列
 闭包，看这一篇就够了——带你看透闭包的本质，百发百中

8. 作用域、作用域链
在这里插入图片描述
深入理解JavaScript作用域和作用域链

9. JS 继承方式
在这里插入图片描述
js继承的6种方式

10. JS 深拷贝、浅拷贝
在这里插入图片描述
深拷贝与浅拷贝的区别，实现深拷贝的几种方法
 JavaScript 如何完整实现深度Clone对象？

11. JS 对象的遍历方法
在这里插入图片描述
js遍历对象的几种方法

12.Promise函数、async/await
在这里插入图片描述
Promise对象
 简单实现Promise
async/await 原理及执行顺序分析

13. 用 setTimeout 实现 setInterval、clearInterval
如何用setTimeout实现setInterval、clearInterval

14. JS 事件循环机制

15. 八大排序
代码实现
时间复杂度
最好/最坏时间复杂度
空间复杂度
稳定性

16. 用 Promise 函数实现 Ajax 请求

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject) {
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText()));
      }
    };
    const client = new XMLHttpRequest();
    client.open('GET', 'url');
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
  });
  return promise;
}

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});