阿里前端常见面试题总结

//  一个Map对象在迭代时会根据对象中元素的插入顺序来进行// 新添加的元素会被插入到map的末尾，整个栈倒序查看class LRUCache {  constructor(capacity) {    this.secretKey = new Map();    this.capacity = capacity;  }  get(key) {    if (this.secretKey.has(key)) {      let tempValue = this.secretKey.get(key);      this.secretKey.delete(key);      this.secretKey.set(key, tempValue);      return tempValue;    } else return -1;  }  put(key, value) {    // key存在，仅修改值    if (this.secretKey.has(key)) {      this.secretKey.delete(key);      this.secretKey.set(key, value);    }    // key不存在，cache未满    else if (this.secretKey.size < this.capacity) {      this.secretKey.set(key, value);    }    // 添加新key，删除旧key    else {      this.secretKey.set(key, value);      // 删除map的第一个元素，即为最长未使用的      this.secretKey.delete(this.secretKey.keys().next().value);    }  }}// let cache = new LRUCache(2);// cache.put(1, 1);// cache.put(2, 2);// console.log("cache.get(1)", cache.get(1))// 返回  1// cache.put(3, 3);// 该操作会使得密钥 2 作废// console.log("cache.get(2)", cache.get(2))// 返回 -1 (未找到)// cache.put(4, 4);// 该操作会使得密钥 1 作废// console.log("cache.get(1)", cache.get(1))// 返回 -1 (未找到)// console.log("cache.get(3)", cache.get(3))// 返回  3// console.log("cache.get(4)", cache.get(4))// 返回  4

vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度集成，让构建但页面应用变得易如反掌
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。
<keep-alive> 组件是一个用来缓存组件
router.beforeEach
router.afterEach
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
介绍了路由守卫及用法，在项目中路由守卫起到的作用等等

<div id="div1">  <div id="div2"></div></div>
<script>    let div1 = document.getElementById('div1');    let div2 = document.getElementById('div2');
    div1.onClick = function(){        alert('1')    }
    div2.onClick = function(){        alert('2');    }
</script>

node.addEventListener('click',(event) =>{    event.stopImmediatePropagation()    console.log('冒泡')},false);// 点击 node 只会执行上面的函数，该函数不会执行node.addEventListener('click',(event) => {    console.log('捕获 ')},true)

<ul id="ul">    <li>1</li>    <li>2</li>    <li>3</li></ul><script>  window.onload = function(){    var ulEle = document.getElementById('ul');    ul.onclick = function(ev){        //兼容IE        ev = ev || window.event;        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){            alert( target.innerHTML);        }
    }  }</script>

// scr 加载默认图片，data-src 保存实施懒加载后的图片// <img src="./default.jpg" data-src="https://xxx.jpg" alt="" />let imgs = [...document.querySelectorAll("img")];const len = imgs.length;
let lazyLoad = function() {    let count = 0;    let deleteImgs = [];    // 获取当前可视区的高度    let viewHeight = document.documentElement.clientHeight;    // 获取当前滚动条的位置(距离顶部的距离,等价于document.documentElement.scrollTop)    let scrollTop = window.pageYOffset;    imgs.forEach((img) => {        // 获取元素的大小，及其相对于视口的位置，如 bottom 为元素底部到网页顶部的距离        let bound = img.getBoundingClientRect();        // 当前图片距离网页顶部的距离        // let imgOffsetTop = img.offsetTop;
        // 判断图片是否在可视区内，如果在就加载（两种判断方式）        // if(imgOffsetTop < scrollTop + viewHeight)         if (bound.top < viewHeight) {            img.src = img.dataset.src;  // 替换待加载的图片 src            count++;            deleteImgs.push(img);            // 最后所有的图片加载完毕后需要解绑监听事件            if(count === len) {                document.removeEventListener("scroll", imgThrottle);            }        }    });    // 图片加载完会从 `img` 标签组成的 DOM 列表中删除    imgs = imgs.filter((img) => !deleteImgs.includes(img));}
window.onload = function () {    lazyLoad();};// 使用 防抖/节流 优化一下滚动事件let imgThrottle = debounce(lazyLoad, 1000);// 监听 `scroll` 事件window.addEventListener("scroll", imgThrottle);

 addTask(1000,"1"); addTask(500,"2"); addTask(300,"3"); addTask(400,"4"); 的输出顺序是：2 3 1 4
 整个的完整执行流程：
一开始1、2两个任务开始执行500ms时，2任务执行完毕，输出2，任务3开始执行800ms时，3任务执行完毕，输出3，任务4开始执行1000ms时，1任务执行完毕，输出1，此时只剩下4任务在执行1200ms时，4任务执行完毕，输出4

class Scheduler {  constructor(limit) {    this.queue = [];    this.maxCount = limit;    this.runCounts = 0;  }  add(time, order) {    const promiseCreator = () => {      return new Promise((resolve, reject) => {        setTimeout(() => {          console.log(order);          resolve();        }, time);      });    };    this.queue.push(promiseCreator);  }  taskStart() {    for (let i = 0; i < this.maxCount; i++) {      this.request();    }  }  request() {    if (!this.queue || !this.queue.length || this.runCounts >= this.maxCount) {      return;    }    this.runCounts++;    this.queue      .shift()()      .then(() => {        this.runCounts--;        this.request();      });  }}const scheduler = new Scheduler(2);const addTask = (time, order) => {  scheduler.add(time, order);};addTask(1000, "1");addTask(500, "2");addTask(300, "3");addTask(400, "4");scheduler.taskStart();

优点：
1.体验好，不刷新，减少 请求  数据ajax异步获取 页面流程；
2.前后端分离
3.减轻服务端压力
4.共用一套后端程序代码，适配多端
缺点：
1.首屏加载过慢；
2.SEO 不利于搜索引擎抓取

const mySetTimeout = (fn, time) => {    let timer = null;    timer = setInterval(() => {        // 关闭定时器，保证只执行一次fn，也就达到了setTimeout的效果了        clearInterval(timer);        fn();    }, time);    // 返回用于关闭定时器的方法    return () => clearInterval(timer);}
// 测试const cancel = mySetTimeout(() => {    console.log(1);}, 1000);  // 一秒后打印 1

const first = () => (new Promise((resolve, reject) => {    console.log(3);    let p = new Promise((resolve, reject) => {        console.log(7);        setTimeout(() => {            console.log(5);            resolve(6);            console.log(p)        }, 0)        resolve(1);    });    resolve(2);    p.then((arg) => {        console.log(arg);    });}));first().then((arg) => {    console.log(arg);});console.log(4);

374125Promise{<resolved>: 1}

1、加loading2、骨架屏

<router-view></router-view>

// 我们的插件：// 1.实现一个Router类并挂载期实例// 2.实现两个全局组件router-link和router-viewlet Vue;
class VueRouter {  // 核心任务：  // 1.监听url变化  constructor(options) {    this.$options = options;
    // 缓存path和route映射关系    // 这样找组件更快    this.routeMap = {}    this.$options.routes.forEach(route => {      this.routeMap[route.path] = route    })
    // 数据响应式    // 定义一个响应式的current，则如果他变了，那么使用它的组件会rerender    Vue.util.defineReactive(this, 'current', '')
    // 请确保onHashChange中this指向当前实例    window.addEventListener('hashchange', this.onHashChange.bind(this))    window.addEventListener('load', this.onHashChange.bind(this))  }
  onHashChange() {    // console.log(window.location.hash);    this.current = window.location.hash.slice(1) || '/'  }}
// 插件需要实现install方法// 接收一个参数，Vue构造函数，主要用于数据响应式VueRouter.install = function (_Vue) {  // 保存Vue构造函数在VueRouter中使用  Vue = _Vue
  // 任务1：使用混入来做router挂载这件事情  Vue.mixin({    beforeCreate() {      // 只有根实例才有router选项      if (this.$options.router) {        Vue.prototype.$router = this.$options.router      }
    }  })
  // 任务2：实现两个全局组件  // router-link: 生成一个a标签，在url后面添  // <router-link to="/about">aaa</router-link>  Vue.component('router-link', {    props: {      to: {        type: String,        required: true      },    },    render(h) {      // h(tag, props, children)      return h('a',        { attrs: { href: '#' + this.to } },        this.$slots.default      )      // 使用jsx      // return <a href={'#'+this.to}>{this.$slots.default}</a>    }  })  Vue.component('router-view', {    render(h) {      // 根据current获取组件并render      // current怎么获取?      // console.log('render',this.$router.current);      // 获取要渲染的组件      let component = null      const { routeMap, current } = this.$router      if (routeMap[current]) {        component = routeMap[current].component      }      return h(component)    }  })}
export default VueRouter

function runAsync (x) {    const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))    return p}
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

123[1, 2, 3]

// index.jsif (navigator.serviceWorker) {  navigator.serviceWorker    .register("sw.js")    .then(function(registration) {      console.log("service worker 注册成功");    })    .catch(function(err) {      console.log("servcie worker 注册失败");    });}// sw.js// 监听 `install` 事件，回调中缓存所需文件self.addEventListener("install", e => {  e.waitUntil(    caches.open("my-cache").then(function(cache) {      return cache.addAll(["./index.html", "./index.js"]);    })  );});
// 拦截所有请求事件// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据self.addEventListener("fetch", e => {  e.respondWith(    caches.match(e.request).then(function(response) {      if (response) {        return response;      }      console.log("fetch source");    })  );});