马涛涛

马涛涛 查看完整档案

南京编辑  |  填写毕业院校南京  |   前端开发 编辑 github.com 编辑
编辑

web前端开发 微信 WindMelody688

个人动态

马涛涛 收藏了文章 · 今天 03:06

vue项目打包后上传至GitHub,并实现github-pages的预览

vue项目打包后上传至GitHub,并实现github-pages的预览

1. 打包vue 项目

vue项目:
clipboard.png
命令行输入打包命令npm run build,生成了dist文件夹:
clipboard.png
打包完成。

打包常见问题1——项目资源无法加载

打开刚刚打包好的dist文件夹,浏览器打开index.html
clipboard.png
发现该页面是空白的,打开控制台发现

clipboard.png

这里看到index.html文件中没有加载任何css、js文件。

解决方法——修改config文件

打开项目根目录config下的index.js文件,进行如下修改:

clipboard.png

即将assetsPublicPath: '/'改成assetsPublicPath: './'
重新npm run build

打包常见问题2——字体图标无法加载

字体和图标不能正常显示

解决方法——修改build文件

打开根目录下build中的utils.js文件,在控制build样式文件代码中添加 publicPath: '../../',
clipboard.png

clipboard.png

添加publicPath: '../../'

clipboard.png

重新npm run build

2. 上传vue 项目并预览

  1. 将项目提交至仓库(包括dist目录),假如仓库名称为test.
  2. $ git subtree push --prefix dist origin gh-pages,将dist目录提交至gh-pages。
  3. 在地址栏输入https://你的github名称.github.io/test/即可预览。

其他问题

  1. 用mock模拟数据,无法使用。解决方案:创建一个.json文件把数据写死,然后引用这个文件。
  2. 对于使用Vue-cli3.0构建的项目出现的样式失效问题,解决方案:在vue.config.js中设置baseUrl: '/staff/'

参考

  1. 各位大佬 求教一个问题 Vue项目打包后如何上传到GitHub实现预览
  2. 上传本地Vue项目到github和gh-pages预览
  3. 使用githubpagesmock数据
  4. 怎么加载本地json数据,能让项目在github pages上预览
查看原文

马涛涛 赞了文章 · 今天 03:06

vue项目打包后上传至GitHub,并实现github-pages的预览

vue项目打包后上传至GitHub,并实现github-pages的预览

1. 打包vue 项目

vue项目:
clipboard.png
命令行输入打包命令npm run build,生成了dist文件夹:
clipboard.png
打包完成。

打包常见问题1——项目资源无法加载

打开刚刚打包好的dist文件夹,浏览器打开index.html
clipboard.png
发现该页面是空白的,打开控制台发现

clipboard.png

这里看到index.html文件中没有加载任何css、js文件。

解决方法——修改config文件

打开项目根目录config下的index.js文件,进行如下修改:

clipboard.png

即将assetsPublicPath: '/'改成assetsPublicPath: './'
重新npm run build

打包常见问题2——字体图标无法加载

字体和图标不能正常显示

解决方法——修改build文件

打开根目录下build中的utils.js文件,在控制build样式文件代码中添加 publicPath: '../../',
clipboard.png

clipboard.png

添加publicPath: '../../'

clipboard.png

重新npm run build

2. 上传vue 项目并预览

  1. 将项目提交至仓库(包括dist目录),假如仓库名称为test.
  2. $ git subtree push --prefix dist origin gh-pages,将dist目录提交至gh-pages。
  3. 在地址栏输入https://你的github名称.github.io/test/即可预览。

其他问题

  1. 用mock模拟数据,无法使用。解决方案:创建一个.json文件把数据写死,然后引用这个文件。
  2. 对于使用Vue-cli3.0构建的项目出现的样式失效问题,解决方案:在vue.config.js中设置baseUrl: '/staff/'

参考

  1. 各位大佬 求教一个问题 Vue项目打包后如何上传到GitHub实现预览
  2. 上传本地Vue项目到github和gh-pages预览
  3. 使用githubpagesmock数据
  4. 怎么加载本地json数据,能让项目在github pages上预览
查看原文

赞 3 收藏 2 评论 0

马涛涛 收藏了文章 · 11月17日

Promise异步函数顺序执行的四种方法

前几天遇到一个编程题,要求控制promise顺序执行,今天总结了一下这个至少有好四种方法都可以实现,包括promise嵌套,通过一个promise串起来,generator,async实现,以下逐一介绍。
原题目如下:
//实现mergePromise函数,把传进去的数组顺序先后执行,
//并且把返回的数据先后放到数组data中
const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

function mergePromise(ajaxArray) {
    //todo 补全函数
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

一. promise嵌套

function mergePromise1(ajaxArray) {
  let arr = [];
    return ajaxArray[0]().then(data=>{
        arr.push(data);
        return ajaxArray[1]();
    }).then(data=>{
        arr.push(data);
        return ajaxArray[2]();
    }).then(data=>{
      arr.push(data);
      return arr;
    });
}

二. Promise.resolve将promise串连成一个任务队列

function mergePromise2(ajaxArray) {
  let p = Promise.resolve();
  let arr = [];
  ajaxArray.forEach(promise => {
    p = p.then(promise).then((data) => {
        arr.push(data);
        return arr;
    });
  });
  return p;
}

此方法相对于上面的方法简单并且书写直观易懂,还有一种类似的任务队列,将数组按顺序从左边头部取出一个执行,执行完成后触发自定义next方法,next方法负责从数组中取出下一个任务执行。

三. generator函数

1. 原生generator函数

var mergePromise3 = function* (ajaxArray) {
  let p1 = yield ajaxArray[0]();
  let p2 = yield ajaxArray[1]();
  let p3 = yield ajaxArray[2]();
  return Promise.resolve([p1,p2,p3]);
}

//自动运行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有数据则push进数组
        arr.push(preData); 
      }
      let result = g.next(preData); //获取每一步执行结果,其中value为promise对象,done表示是否执行完成
      if (result.done) { //函数执行完毕则resolve数组
        resolve(arr);
      }
      else { //函数没有执行完毕则递归执行
          result.value.then(function(nowData) {
            next(nowData);
          });
      }
    }
    next();
  });
}
使用这种方法需要修改mergePromise方法为:
run(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

2. 利用co模块自动执行

const co = require('co')
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

此方法原理和上面一样,只是使用已有的封装好的co模块来自动执行

四. async函数

function mergePromise4(ajaxArray) {
  let arr = [];
  async function run() {
      for(let p of ajaxArray) {
          let val = await p();
          arr.push(val);
      }
      return arr;
  }
  return run();
}

以上列出了四种方法,具体使用那种方法也根据喜好而定,如果有其他的好的方法欢迎留言补充。

查看原文

马涛涛 收藏了文章 · 11月17日

Promise异步函数顺序执行的四种方法

前几天遇到一个编程题,要求控制promise顺序执行,今天总结了一下这个至少有好四种方法都可以实现,包括promise嵌套,通过一个promise串起来,generator,async实现,以下逐一介绍。
原题目如下:
//实现mergePromise函数,把传进去的数组顺序先后执行,
//并且把返回的数据先后放到数组data中
const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

function mergePromise(ajaxArray) {
    //todo 补全函数
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

一. promise嵌套

function mergePromise1(ajaxArray) {
  let arr = [];
    return ajaxArray[0]().then(data=>{
        arr.push(data);
        return ajaxArray[1]();
    }).then(data=>{
        arr.push(data);
        return ajaxArray[2]();
    }).then(data=>{
      arr.push(data);
      return arr;
    });
}

二. Promise.resolve将promise串连成一个任务队列

function mergePromise2(ajaxArray) {
  let p = Promise.resolve();
  let arr = [];
  ajaxArray.forEach(promise => {
    p = p.then(promise).then((data) => {
        arr.push(data);
        return arr;
    });
  });
  return p;
}

此方法相对于上面的方法简单并且书写直观易懂,还有一种类似的任务队列,将数组按顺序从左边头部取出一个执行,执行完成后触发自定义next方法,next方法负责从数组中取出下一个任务执行。

三. generator函数

1. 原生generator函数

var mergePromise3 = function* (ajaxArray) {
  let p1 = yield ajaxArray[0]();
  let p2 = yield ajaxArray[1]();
  let p3 = yield ajaxArray[2]();
  return Promise.resolve([p1,p2,p3]);
}

//自动运行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有数据则push进数组
        arr.push(preData); 
      }
      let result = g.next(preData); //获取每一步执行结果,其中value为promise对象,done表示是否执行完成
      if (result.done) { //函数执行完毕则resolve数组
        resolve(arr);
      }
      else { //函数没有执行完毕则递归执行
          result.value.then(function(nowData) {
            next(nowData);
          });
      }
    }
    next();
  });
}
使用这种方法需要修改mergePromise方法为:
run(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

2. 利用co模块自动执行

const co = require('co')
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

此方法原理和上面一样,只是使用已有的封装好的co模块来自动执行

四. async函数

function mergePromise4(ajaxArray) {
  let arr = [];
  async function run() {
      for(let p of ajaxArray) {
          let val = await p();
          arr.push(val);
      }
      return arr;
  }
  return run();
}

以上列出了四种方法,具体使用那种方法也根据喜好而定,如果有其他的好的方法欢迎留言补充。

查看原文

马涛涛 赞了文章 · 11月17日

Promise异步函数顺序执行的四种方法

前几天遇到一个编程题,要求控制promise顺序执行,今天总结了一下这个至少有好四种方法都可以实现,包括promise嵌套,通过一个promise串起来,generator,async实现,以下逐一介绍。
原题目如下:
//实现mergePromise函数,把传进去的数组顺序先后执行,
//并且把返回的数据先后放到数组data中
const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

function mergePromise(ajaxArray) {
    //todo 补全函数
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

一. promise嵌套

function mergePromise1(ajaxArray) {
  let arr = [];
    return ajaxArray[0]().then(data=>{
        arr.push(data);
        return ajaxArray[1]();
    }).then(data=>{
        arr.push(data);
        return ajaxArray[2]();
    }).then(data=>{
      arr.push(data);
      return arr;
    });
}

二. Promise.resolve将promise串连成一个任务队列

function mergePromise2(ajaxArray) {
  let p = Promise.resolve();
  let arr = [];
  ajaxArray.forEach(promise => {
    p = p.then(promise).then((data) => {
        arr.push(data);
        return arr;
    });
  });
  return p;
}

此方法相对于上面的方法简单并且书写直观易懂,还有一种类似的任务队列,将数组按顺序从左边头部取出一个执行,执行完成后触发自定义next方法,next方法负责从数组中取出下一个任务执行。

三. generator函数

1. 原生generator函数

var mergePromise3 = function* (ajaxArray) {
  let p1 = yield ajaxArray[0]();
  let p2 = yield ajaxArray[1]();
  let p3 = yield ajaxArray[2]();
  return Promise.resolve([p1,p2,p3]);
}

//自动运行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有数据则push进数组
        arr.push(preData); 
      }
      let result = g.next(preData); //获取每一步执行结果,其中value为promise对象,done表示是否执行完成
      if (result.done) { //函数执行完毕则resolve数组
        resolve(arr);
      }
      else { //函数没有执行完毕则递归执行
          result.value.then(function(nowData) {
            next(nowData);
          });
      }
    }
    next();
  });
}
使用这种方法需要修改mergePromise方法为:
run(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

2. 利用co模块自动执行

const co = require('co')
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

此方法原理和上面一样,只是使用已有的封装好的co模块来自动执行

四. async函数

function mergePromise4(ajaxArray) {
  let arr = [];
  async function run() {
      for(let p of ajaxArray) {
          let val = await p();
          arr.push(val);
      }
      return arr;
  }
  return run();
}

以上列出了四种方法,具体使用那种方法也根据喜好而定,如果有其他的好的方法欢迎留言补充。

查看原文

赞 7 收藏 5 评论 0

马涛涛 收藏了文章 · 11月12日

浅谈怎样系统的准备前端面试

image.png

前言

创业梦碎,回归现实,7 月底毅然裸辞,苦战两个月,拿到了美团和字节跳动的 offer,这算是从业以来第一次真正意义的面试,遇到蛮多问题,比如一开始具体的面试过程我都不懂,基本一直是摸着石头过河,所以结合我的经历和前人经验,总结一下我认为还比较系统科学的面试大纲分享给大家,希望大家在系统的准备之后,都能找到自己满意的工作。

一、知识准备

1. 知识体系

知识体系是重中之重,优秀的开发者很多都有维护自身知识体系的习惯,建立知识体系能帮助认知知识全貌及迅速找到知识的关联,就像对碎片化的知识做了索引,无论工作还是面试中碰到的问题,能很快对号入座,举一反三,哪怕是不熟悉的知识点,也可以使用其他同体系的知识进行关联解释,知识体系可以帮助你尽快了解自己,帮助你查漏补缺,让你能够把宝贵的时间聚焦于自己的薄弱项。

如果还没有自己的知识体系,那就赶快行动起来吧,这里列出一些参考资料帮助你快速行动:

2. 时间分配

梳理好知识体系之后,接下来就是制定一个合理的学习计划了,这一步需要你根据自己的个人时间进行安排(我就是时间安排不了一狠心就裸辞了,后面压力巨大),按照知识体系中标记的优先级进行系统的学习,总的时间根据自身情况,建议 1 ~ 3 个月即可,太长时间可能容易遗忘前面学习的知识。

针对不同模块,时间安排也有所不同,我列举一下我自己的安排以供参考:

  • 基础知识 40%
  • 项目与业务 20%
  • 算法与数据结构 20%
  • 设计思想与工程化 10%
  • 框架与原理 10%

3. 整理算法

这里把算法单独拿出来,是因为近年来在大厂的面试中对数据结构和算法的考察越来越重视,不管是前端还是后端,首先我们是工程师,我们日常工作就是写程序的,程序 = 数据结构 + 算法,所以算法和数据结构的学习是很有必要的,虽然对于前端岗位的算法要求可能不会那么高,但是基本的递归、遍历、链表的操作、栈与队列的常见算法还是要会的。每天学习两三题,两个月后,你不会后悔的。

推荐一些社区内很不错的算法学习资料和经验:

喜欢付费课程的话,比较不错的有:

  • 慕课网 bobo 老师的《算法与数据结构体系课》
  • 极客时间 覃超 老师的《算法面试通关40讲》

4. 整理面试题

这一步不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。可以搜集整理近两年来一线公司的面试题,做成笔记,你会发现面试题实际问的大同小异,只是考察的内容和形式有不同的目的性。提前熟悉,上场的时候才不会慌张。

推荐资料:

5. 常见功能的手写实现

这块几乎是必考的,比如:深拷贝、事件总线、es5 继承,以及最近很火的手写 Promise 实现,这些手写功能不仅考察了面试者的编码能力也考察了对原理和规范的掌握程度。

虽然实际面试过程,面试官可能不会问的特别细节,比如让你实现一个完整的 Promise,但是我们自己学习这些手写功能的时候,不能浅尝辄止,需要考虑使用场景、错误处理、规范等细节的问题,千万不要背代码,不然手写代码一时爽,深挖细节火葬场。

笔者自己粗略的总结了一些前端面试常见的手写功能,供大家参考;

6. 项目实战

这部分是社招必考点,对自己负责或参与的项目,一定要深挖,要提炼出「难点」「痛点」「亮点」以及「解决方案」,更要体现出自己的「思考」和做出的「努力」,对应于 「问题 - 思考 - 解决 - 成果」这样的一个过程,是大厂很看重的能力,希望大家对于自己的参与的项目都能参考这个流程进行思考总结。

如果没有很丰富的项目经验,也可以多研究社区内技术大佬们的「项目经验」来获得,但一定要研究透彻,看过不等于会,不然面试问到只会坑了自己。

7. 执行学习计划

按照梳理的「知识体系」、「整理算法」、以及「整理面试题」,结合「时间分配」、给自己制定一个合适的学习计划,然后坚定认真的去执行它。

二、简历准备

1. 参考目录

  • 【基本信息】不写无用的个人信息,比如:照片、籍贯、性别、地址、身高等;
  • 【技术技能】对「了解、熟练掌握、精通」这类词有概念,不要随便用精通;
  • 【项目经历】不写对求职无用项目经历、做的最好的项目 2 ~ 3 个即可,有数据支撑;
  • 【工作经历】简略概述名称、在职时间、职位以及主要负责业务,也可以和项目经历结合起来写;
  • 【教育背景】名称、时间等简要信息,普通院校建议放在底部即可,名校可以放在顶部;

    参考简历模板:链接: https://pan.baidu.com/s/1I-9U... 提取码: gkxw

2. 项目经历

简历中最难写的应该就是「项目经历」了,这块也是最重要的,是面试官考察你的依据,也是你用来引导面试官提问的工具,项目经历的总结,要有数据思维,不能泛泛而谈,一般按照 STAR 法则进行描述,按照:情境(situation)、目标(target)、行动(action)、结果(result)四项对工作做一个精简描述,例如:

  • 项目简介以及在 xx 项目中担任前端负责人
  • 负责了 xxx 工作,实现什么目标
  • 通过 xxx 方案解决了 xxx 问题;使 xxx 提升了 50%
  • 总结了 xxx 解决方案

3. 注意事项

  • 【突出亮点】如开源项目、大厂背景、社区影响力、知名项目、个人博客、技术亮点等;
  • 【对症下药】针对不同公司职位,可以针对性的调整简历内容,准备多份简历;
  • 【格式排版】PDF 格式,最好一页,最多不超过两页,像对待毕业论文一样去检查排版、错别字、标点符号、措辞;
  • 【文件命名】姓名_职位_手机号.pdf(学历有优势的可以加上最高学历院校);

4. 投递简历

  • 【筛选公司】相关因素:平台大小、发展前景、公司距离、个人喜好等;
  • 【了解公司】通过网络、社区、认识的内部员工去了解面试的具体流程、周期、注意事项等;
  • 【投递顺序】面试周期短的可以推迟,面试周期长的可以先面试,保证 offer 发放之间的时间跨度不会太长,便于集中对比选择;最想去的公司可以最后面试,这时已充分热身,甚至拿了 offer,心态方面也会更加从容;
  • 【内推优先】优先找人内推,社区内有很多小伙伴愿意帮忙的;

三、面试准备

1. 自我介绍

面试官对你的基本信息都已知晓,所以这一步最好结合应聘职位直奔亮点进行简要概述,做了哪些亮点项目遇到了什么难点如何解决的项目有什么收获给团队或公司带来了哪些成果,按照这个方式去吸引面试官,同时这也是我们掌握主动权的方法,面试官喜欢根据我们表述的内容进行展开,这样由一段精心设计的自我介绍开始,进而引导面试官和你交流,这会让面试官的工作开展的很舒服。

注意自我介绍不必涉及过多的技术细节阐述,一是这些技术细节可能面试官不一定涉猎,导致面试官只能从其他方面寻找切入点让你陷入被动,二是占用过多时间,所以简要概述要点即可,随后面试官会根据这些点和你展开沟通的,这时再详细阐述不迟。

2. 面试过程

大厂的面试多为四轮,整个过程因人因公司而异,下面介绍一些常见的面试过程与注意事项:

一面

一般是你应聘职位的平级的骨干同事,是入职后和你一起并肩作战的伙伴,这一面一般也是最难的,会从多个方面考察你能不能胜任这份工作,侧重于学习能力、沟通能力、基础知识掌握程度、总结与思考、编码能力等;

这一面要特别注意编程题,如果遇到原题,不要太激动,面试官会从其他方面再进一步考察你,所以多思考一点,这也是上文说的,一定不要背题,不然一问就露馅;

遇到不会的知识,也不要太紧张,先尝试暴力解,然后逐步优化,也可以请面试官给予提示,如果能在面试中解决一个不会的问题,那一定会让面试官给你加分的;

二面

一般是团队骨干或直属 leader,这一面是对一面的延伸,除了基础知识之外,面试官还会从技术选型、架构、解决方案等方面提问,考察你对技术细节、项目优化、整体方案等方面的思考;

三面

三面一般是所属团队的 leader,这一面的技术细节考察你的不会太多,更多的是你对工作中涉及到的业务、产品、技术的思考,职业的规划与个人发展,以及一些职场软技能,常见问题举例:

  • 项目中的角色、承担了哪些任务、遇到了哪些难点?怎么克服的?
  • 和其他技术选型或者产品项目的对比有什么优劣?
  • 团队怎么协作与分工的?
  • 给自己的技术能力做一个评价
  • 做了哪些提升团队的工作?
  • 公司产品这样的?是否有竞争力?怎么盈利的?
  • 你的个人职业规划?

四面

四面一般是 HR 面,这一面,尽力别说太多题外话,因为言多必失,保持积极乐观、礼貌友好的态度,当面试官问你为什么离职时,哪怕你上家公司老板和你打过架,也不要抱怨说出来。常见问题举例:

  • 为什么从上家公司离职?(注意积极向上)
  • 希望找一个怎样的工作,职业规划呢?(重发展,少谈钱)
  • 谈谈自己最大的优点?(不要编,结合实际说就好,大家都有的,比如:专注、团队精神、技术热情与钻研精神、沟通能力、深度思考等)
  • 谈谈自己最大的缺点?(和工作相关,又可以通过努力改变的点,比如:过于局限技术细节而忽视产品业务的重要性和理解,导致开发过程受阻,现在会积极参与产品业务的早起阶段,加强对业务的理解)
  • 方便透露手上都有哪些 offer 了吗?(按实际情况说即可,好的 offer 可以突出一下,不好的,可以不说)
  • 在 B 公司和我们之间,你怎么考虑的呢?(肯定选你啦)

3. 面试官:“你有什么想问我的吗?”

这个问题一般每一面都会遇到的,提问是面试中我们能够主动“索取”的环节,所以一定不要浪费这个机会,一些 leader 的回答还会带给你很多技术之外的思考与经验,让你受益良多,一定注意,不要问和待遇相关的问题,最后谈 offer 的时候再去问。

下面给出一些提问示例供参考:

  • 一面:面试官一般是你的平级同事,可以多去了解实际的工作内容,便于后续对比 offer,例如:团队业务、日常工作、技术栈、协作、技术分析等
  • 二面:面试官一般是团队骨干或直属 leader,可以多去了解业务和产品的规划、技术建设、对应聘职位的定位与期待等;
  • 三面:面试官一般是部门 leader,这一步可以多了解技术之外的知识,比如面试官自己的成长经验、技术之外的能力、职位发展路线等;
  • Hr 面:这一步可以多去了解公司本身相关的事,比如:你在公司工作的最大的感受是什么?晋升机制是怎样的?等等

4. 面试复盘

面试也是一个特别好的学习过程,能利用这个机会和其他团队的优秀的人沟通技术、交流心得、检验能力、了解优秀团队业务和产品,无论最后结果怎样,都值得好好总结下来。

  • 【记录】每轮面试结束后,尽量详细记录整个过程,最好录音,方便分析自己的表现
  • 【分析】按照自己的掌握程度对面试问题进行分类统计,分析沟通过程以及自己的表现
  • 【补强】一知半解的问题优先复习掌握,不会的问题要去大致了解一下,如果没有时间掌握,可以暂时忽略
  • 【总结】分析补强之后,可以总结成文,也可以分享给社区的小伙伴

五、Offer

当面试通过以后,你就要着手开始准备最后的 offer 沟通了,这一步,你要结合新公司的薪资构成,职位的薪资范围,自己估算涨幅后的年薪总包、社区了解的信息、公司发展前景、个人心里预期等去设定一个自己的薪资底线。

1. 年薪总包,是你在上家公司的税前年度总收入:『月薪 * 12 + 奖金 + 其他』,会要求银行流水进行证明,新公司会参考进行定薪,特殊情况可以主动说明,上一家公司的薪资知识参考,但也不是决定因素的。

2. 薪资谈判,这一步可以说是最考验沟通能力的环节了,这里提供一些信息:

个人实力 / 公司水平优秀公司普通公司
个人实力优秀保持底线、冲击高薪没有底线、必须高薪
个人实力普通降低底线、学习为重保持底线、冲击高薪
  • 薪资一般会在之前总包的基础上提高 30% ~ 50%;
  • 实力优秀且入职优秀公司,翻倍不是不可能;
  • 有些公司超过 50% 涨幅需要走特批,要求你承诺入职才会给你申请,这个说明一是公司对你认可,二是公司希望你尽快入职,所以如果公司不错,可以好好考虑一下;
  • HR 询问薪资预期时,可以基于心里底线和职位薪资范围向上多要一些,大大方方的沟通即可,没有知乎上说的那么多戏,与其说 HR 压价,倒不如说 HR 是防止候选人狮子大开口,只要薪资的提升在一个合理的范围,谈薪还是比较简单的。
  • HR 询问薪资时,一般还会问你都拿到了哪些 offer 了,如果你手上有比较不错的 offer 可以说一下,可以帮助 HR 更加确定你是一个优秀的候选人,薪资说不定还可以获得一个提升,但是一定不要为了提价胡编乱造 offer,诚信是本;

3. 何时入职,这一步,HR 都会问你何时能入职,这个结合你的当前工作和后续的面试计划,可以推迟入职日期,但是不宜太久,后续如果不能入职,一定要尽早通知 HR,要尊重别人的工作与付出,礼貌说明原因即可,别让人家等太久;

4. offer 对比,简单来说:有目标向前看,没目标向钱看,薪资很重要,但是技术人的职业发展更重要,而且大的平台在薪资上也不会让你吃亏;

六、注意事项

  • 不要裸辞,不要裸辞,不要裸辞;
  • 尽量 15 号之后办理离职,下个月的 15 号之前入职,这样能保证你的五险一金不断缴,平滑过度
  • 上家公司签的离职证明日期,不要和新公司的入职日期有重叠,所以拿到 offer 后,要留出时间先把当前工作的离职手续办完;
  • 注意社交礼仪,IT 行业虽然没那么多繁文缛节,但是基本的礼节不能丢,着装得体整洁、不要迟到、进门敲门、出门关门、等;
  • 有 offer,心不慌,可以先把还不错的 offer 留着,再去冲击大厂;
  • 面试是七分实力三分运气,不同的面试侧重点也会不同,所以不要因为某一两次面试受挫就丢失信心,及时总结;
  • 乐观积极、保持诚信、杜绝欺骗、避免负面情绪;
  • 不抱怨同事、不抱怨上家公司;

七、扯点别的

感谢一下 @ssh_晨曦时梦见兮 给我内推,给我看简历,给我建议,一句:“我觉得你的简历还不错”,给了我很大信心,和晨曦开玩笑说:“自从遇到你好像所有的面试都顺利多了,争取做你同事”,最后虽然不在一个部门,也算是得偿所愿成了同事,就等面基吃饭啦。

感谢一下 @狼叔 * 阿里巴巴,和狼叔都有着一段困难的创业公司经历,在我辞职之后一直走不出内心对未来迷茫以及对过去痛心的情况下,我主动联系了狼叔,对于我的现状和规划,狼叔谈了自己的看法,给了建议,鼓励我:“有目标向前看,没目标向钱看,现在都还不晚,加油吧”。

最后手握 offer 后,甚至有点做梦的感觉,一路走来,一直感觉迷茫与无助,直到最后严重怀疑自己,但离职的这段时间,有不少朋友经常鼓励我:“自信点,你还不错,加油!”,也一直帮我找内推,我觉得没有这些朋友,我心态可能没那么快恢复过来,真的非常感谢他们。

稳定之后,我现在除了做好工作以外,还想做的一件事就是也试着去帮助一些我能帮助的人,也希望有机会鼓励他们:“自信点,你很棒,加油!”

八、说在最后

文章主要对面试的核心流程与准备工作做了一个大纲性的概述,重点在于对面试的一个整体的审视以及各个环节的重点,所以肯定有很多细节没有顾及到,如有疑问或者建议也欢迎留言一起交流讨论,也欢迎联系我,找内推、聊简历、聊技术、侃大山。

邮箱:weboying@gmail.com
公众号:iboying

image.png

查看原文

马涛涛 收藏了文章 · 11月12日

前端面试中常见的手写功能

1. 防抖

function debounce(func, ms = 1000) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, ms)
  }
}

// 测试
const task = () => { console.log('run task') }
const debounceTask = debounce(task, 1000)
window.addEventListener('scroll', debounceTask)

2. 节流

function throttle(func, ms = 1000) {
  let canRun = true
  return function (...args) {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      func.apply(this, args)
      canRun = true
    }, ms)
  }
}

// 测试
const task = () => { console.log('run task') }
const throttleTask = throttle(task, 1000)
window.addEventListener('scroll', throttleTask)

3. new

function myNew(Func, ...args) {
  const instance = {};
  if (Func.prototype) {
    Object.setPrototypeOf(instance, Func.prototype)
  }
  const res = Func.apply(instance, args)
  if (typeof res === "function" || (typeof res === "object" && res !== null)) {
    return res
  }
  return instance
}

// 测试
function Person(name) {
  this.name = name
}
Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`)
}
const me = myNew(Person, 'Jack')
me.sayName()
console.log(me)

4. bind

Function.prototype.myBind = function (context = globalThis) {
  const fn = this
  const args = Array.from(arguments).slice(1)
  const newFunc = function () {
    const newArgs = args.concat(...arguments)
    if (this instanceof newFunc) {
      // 通过 new 调用,绑定 this 为实例对象
      fn.apply(this, newArgs)
    } else {
      // 通过普通函数形式调用,绑定 context
      fn.apply(context, newArgs)
    }
  }
  // 支持 new 调用方式
  newFunc.prototype = Object.create(fn.prototype)
  return newFunc
}

// 测试
const me = { name: 'Jack' }
const other = { name: 'Jackson' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
const meSay = say.bind(me)
meSay()
const otherSay = say.bind(other)
otherSay()

5. call

Function.prototype.myCall = function (context = globalThis) {
  // 关键步骤,在 context 上调用方法,触发 this 绑定为 context,使用 Symbol 防止原有属性的覆盖
  const key = Symbol('key')
  context[key] = this
  // es5 可通过 for 遍历 arguments 得到参数数组
  const args = [...arguments].slice(1)
  const res = context[key](...args)
  delete context[key]
  return res
};

// 测试
const me = { name: 'Jack' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
say.myCall(me)

6. apply

Function.prototype.myApply = function (context = globalThis) {
  // 关键步骤,在 context 上调用方法,触发 this 绑定为 context,使用 Symbol 防止原有属性的覆盖
  const key = Symbol('key')
  context[key] = this
  let res
  if (arguments[1]) {
    res = context[key](...arguments[1])
  } else {
    res = context[key]()
  }
  delete context[key]
  return res
}

// 测试
const me = { name: 'Jack' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
say.myApply(me)

7. deepCopy

function deepCopy(obj, cache = new WeakMap()) {
  if (!obj instanceof Object) return obj
  // 防止循环引用
  if (cache.get(obj)) return cache.get(obj)
  // 支持函数
  if (obj instanceof Function) {
    return function () {
      obj.apply(this, arguments)
    }
  }
  // 支持日期
  if (obj instanceof Date) return new Date(obj)
  // 支持正则对象
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
  // 还可以增加其他对象,比如:Map, Set等,根据情况判断增加即可,面试点到为止就可以了

  // 数组是 key 为数字素银的特殊对象
  const res = Array.isArray(obj) ? [] : {}
  // 缓存 copy 的对象,用于处理循环引用的情况
  cache.set(obj, res)

  Object.keys(obj).forEach((key) => {
    if (obj[key] instanceof Object) {
      res[key] = deepCopy(obj[key], cache)
    } else {
      res[key] = obj[key]
    }
  });
  return res
}

// 测试
const source = {
  name: 'Jack',
  meta: {
    age: 12,
    birth: new Date('1997-10-10'),
    ary: [1, 2, { a: 1 }],
    say() {
      console.log('Hello');
    }
  }
}
source.source = source
const newObj = deepCopy(source)
console.log(newObj.meta.ary[2] === source.meta.ary[2]); // false
console.log(newObj.meta.birth === source.meta.birth); // false

8. 事件总线 | 发布订阅模式

class EventEmitter {
  constructor() {
    this.cache = {}
  }

  on(name, fn) {
    if (this.cache[name]) {
      this.cache[name].push(fn)
    } else {
      this.cache[name] = [fn]
    }
  }

  off(name, fn) {
    const tasks = this.cache[name]
    if (tasks) {
      const index = tasks.findIndex((f) => f === fn || f.callback === fn)
      if (index >= 0) {
        tasks.splice(index, 1)
      }
    }
  }

  emit(name) {
    if (this.cache[name]) {
      // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
      const tasks = this.cache[name].slice()
      for (let fn of tasks) {
        fn();
      }
    }
  }

  emit(name, once = false) {
    if (this.cache[name]) {
      // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
      const tasks = this.cache[name].slice()
      for (let fn of tasks) {
        fn();
      }
      if (once) {
        delete this.cache[name]
      }
    }
  }
}

// 测试
const eventBus = new EventEmitter()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }
eventBus.on('task', task1)
eventBus.on('task', task2)

setTimeout(() => {
  eventBus.emit('task')
}, 1000)

9. 柯里化:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数

function curry(func) {
  return function curried(...args) {
    // 关键知识点:function.length 用来获取函数的形参个数
    // 补充:arguments.length 获取的是实参个数
    if (args.length >= func.length) {
      return func.apply(this, args)
    }
    return function (...args2) {
      return curried.apply(this, args.concat(args2))
    }
  }
}

// 测试
function sum (a, b, c) {
  return a + b + c
}
const curriedSum = curry(sum)
console.log(curriedSum(1, 2, 3))
console.log(curriedSum(1)(2,3))
console.log(curriedSum(1)(2)(3))

10. es5 实现继承

function create(proto) {
  function F() {}
  F.prototype = proto;
  return new F();
}

// Parent
function Parent(name) {
  this.name = name
}

Parent.prototype.sayName = function () {
  console.log(this.name)
};

// Child
function Child(age, name) {
  Parent.call(this, name)
  this.age = age
}
Child.prototype = create(Parent.prototype)
Child.prototype.constructor = Child

Child.prototype.sayAge = function () {
  console.log(this.age)
}

// 测试
const child = new Child(18, 'Jack')
child.sayName()
child.sayAge()

11. instanceof

function isInstanceOf(instance, klass) {
  let proto = instance.__proto__
  let prototype = klass.prototype
  while (true) {
    if (proto === null) return false
    if (proto === prototype) return true
    proto = proto.__proto__
  }
}

// 测试
class Parent {}
class Child extends Parent {}
const child = new Child()
console.log(isInstanceOf(child, Parent), isInstanceOf(child, Child), isInstanceOf(child, Array));

12. 异步并发数限制

/**
 * 关键点
 * 1. new promise 一经创建,立即执行
 * 2. 使用 Promise.resolve().then 可以把任务加到微任务队列,防止立即执行迭代方法
 * 3. 微任务处理过程中,产生的新的微任务,会在同一事件循环内,追加到微任务队列里
 * 4. 使用 race 在某个任务完成时,继续添加任务,保持任务按照最大并发数进行执行
 * 5. 任务完成后,需要从 doingTasks 中移出
 */
function limit(count, array, iterateFunc) {
  const tasks = []
  const doingTasks = []
  let i = 0
  const enqueue = () => {
    if (i === array.length) {
      return Promise.resolve()
    }
    const task = Promise.resolve().then(() => iterateFunc(array[i++]))
    tasks.push(task)
    const doing = task.then(() => doingTasks.splice(doingTasks.indexOf(doing), 1))
    doingTasks.push(doing)
    const res = doingTasks.length >= count ? Promise.race(doingTasks) : Promise.resolve()
    return res.then(enqueue)
  };
  return enqueue().then(() => Promise.all(tasks))
}

// test
const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i))
limit(2, [1000, 1000, 1000, 1000], timeout).then((res) => {
  console.log(res)
})

13. 异步串行 | 异步并行

// 字节面试题,实现一个异步加法
function asyncAdd(a, b, callback) {
  setTimeout(function () {
    callback(null, a + b);
  }, 500);
}

// 解决方案
// 1. promisify
const promiseAdd = (a, b) => new Promise((resolve, reject) => {
  asyncAdd(a, b, (err, res) => {
    if (err) {
      reject(err)
    } else {
      resolve(res)
    }
  })
})

// 2. 串行处理
async function serialSum(...args) {
  return args.reduce((task, now) => task.then(res => promiseAdd(res, now)), Promise.resolve(0))
}

// 3. 并行处理
async function parallelSum(...args) {
  if (args.length === 1) return args[0]
  const tasks = []
  for (let i = 0; i < args.length; i += 2) {
    tasks.push(promiseAdd(args[i], args[i + 1] || 0))
  }
  const results = await Promise.all(tasks)
  return parallelSum(...results)
}

// 测试
(async () => {
  console.log('Running...');
  const res1 = await serialSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  console.log(res1)
  const res2 = await parallelSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  console.log(res2)
  console.log('Done');
})()

14. vue reactive

// Dep module
class Dep {
  static stack = []
  static target = null
  deps = null
  
  constructor() {
    this.deps = new Set()
  }

  depend() {
    if (Dep.target) {
      this.deps.add(Dep.target)
    }
  }

  notify() {
    this.deps.forEach(w => w.update())
  }

  static pushTarget(t) {
    if (this.target) {
      this.stack.push(this.target)
    }
    this.target = t
  }

  static popTarget() {
    this.target = this.stack.pop()
  }
}

// reactive
function reactive(o) {
  if (o && typeof o === 'object') {
    Object.keys(o).forEach(k => {
      defineReactive(o, k, o[k])
    })
  }
  return o
}

function defineReactive(obj, k, val) {
  let dep = new Dep()
  Object.defineProperty(obj, k, {
    get() {
      dep.depend()
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify()
    }
  })
  if (val && typeof val === 'object') {
    reactive(val)
  }
}

// watcher
class Watcher {
  constructor(effect) {
    this.effect = effect
    this.update()
  }

  update() {
    Dep.pushTarget(this)
    this.value = this.effect()
    Dep.popTarget()
    return this.value
  }
}

// 测试代码
const data = reactive({
  msg: 'aaa'
})

new Watcher(() => {
  console.log('===> effect', data.msg);
})

setTimeout(() => {
  data.msg = 'hello'
}, 1000)

15. promise

// 建议阅读 [Promises/A+ 标准](https://promisesaplus.com/)
class MyPromise {
  constructor(func) {
    this.status = 'pending'
    this.value = null
    this.resolvedTasks = []
    this.rejectedTasks = []
    this._resolve = this._resolve.bind(this)
    this._reject = this._reject.bind(this)
    try {
      func(this._resolve, this._reject)
    } catch (error) {
      this._reject(error)
    }
  }

  _resolve(value) {
    setTimeout(() => {
      this.status = 'fulfilled'
      this.value = value
      this.resolvedTasks.forEach(t => t(value))
    })
  }

  _reject(reason) {
    setTimeout(() => {
      this.status = 'reject'
      this.value = reason
      this.rejectedTasks.forEach(t => t(reason))
    })
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.resolvedTasks.push((value) => {
        try {
          const res = onFulfilled(value)
          if (res instanceof MyPromise) {
            res.then(resolve, reject)
          } else {
            resolve(res)
          }
        } catch (error) {
          reject(error)
        }
      })
      this.rejectedTasks.push((value) => {
        try {
          const res = onRejected(value)
          if (res instanceof MyPromise) {
            res.then(resolve, reject)
          } else {
            reject(res)
          }
        } catch (error) {
          reject(error)
        }
      })
    })
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

// 测试
new MyPromise((resolve) => {
  setTimeout(() => {
    resolve(1);
  }, 500);
}).then((res) => {
    console.log(res);
    return new MyPromise((resolve) => {
      setTimeout(() => {
        resolve(2);
      }, 500);
    });
  }).then((res) => {
    console.log(res);
    throw new Error('a error')
  }).catch((err) => {
    console.log('==>', err);
  })

16. 数组扁平化

// 方案 1
function recursionFlat(ary = []) {
  const res = []
  ary.forEach(item => {
    if (Array.isArray(item)) {
      res.push(...recursionFlat(item))
    } else {
      res.push(item)
    }
  })
  return res
}
// 方案 2
function reduceFlat(ary = []) {
  return ary.reduce((res, item) => res.concat(Array.isArray(item) ? reduceFlat(item) : item), [])
}

// 测试
const source = [1, 2, [3, 4, [5, 6]], '7']
console.log(recursionFlat(source))
console.log(reduceFlat(source))

17. 对象扁平化

function objectFlat(obj = {}) {
  const res = {}
  function flat(item, preKey = '') {
    Object.entries(item).forEach(([key, val]) => {
      const newKey = preKey ? `${preKey}.${key}` : key
      if (val && typeof val === 'object') {
        flat(val, newKey)
      } else {
        res[newKey] = val
      }
    })
  }
  flat(obj)
  return res
}

// 测试
const source = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } }
console.log(objectFlat(source));

18. 图片懒加载

// <img data-original="default.png" data-data-original="https://xxxx/real.png">
function isVisible(el) {
  const position = el.getBoundingClientRect()
  const windowHeight = document.documentElement.clientHeight
  // 顶部边缘可见
  const topVisible = position.top > 0 && position.top < windowHeight;
  // 底部边缘可见
  const bottomVisible = position.bottom < windowHeight && position.bottom > 0;
  return topVisible || bottomVisible;
}

function imageLazyLoad() {
  const images = document.querySelectorAll('img')
  for (let img of images) {
    const realSrc = img.dataset.src
    if (!realSrc) continue
    if (isVisible(img)) {
      img.src = realSrc
      img.dataset.src = ''
    }
  }
}

// 测试
window.addEventListener('load', imageLazyLoad)
window.addEventListener('scroll', imageLazyLoad)
// or
window.addEventListener('scroll', throttle(imageLazyLoad, 1000))

欢迎一起补充 ~ Github 地址

查看原文

马涛涛 赞了文章 · 11月12日

前端面试中常见的手写功能

1. 防抖

function debounce(func, ms = 1000) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, ms)
  }
}

// 测试
const task = () => { console.log('run task') }
const debounceTask = debounce(task, 1000)
window.addEventListener('scroll', debounceTask)

2. 节流

function throttle(func, ms = 1000) {
  let canRun = true
  return function (...args) {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      func.apply(this, args)
      canRun = true
    }, ms)
  }
}

// 测试
const task = () => { console.log('run task') }
const throttleTask = throttle(task, 1000)
window.addEventListener('scroll', throttleTask)

3. new

function myNew(Func, ...args) {
  const instance = {};
  if (Func.prototype) {
    Object.setPrototypeOf(instance, Func.prototype)
  }
  const res = Func.apply(instance, args)
  if (typeof res === "function" || (typeof res === "object" && res !== null)) {
    return res
  }
  return instance
}

// 测试
function Person(name) {
  this.name = name
}
Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`)
}
const me = myNew(Person, 'Jack')
me.sayName()
console.log(me)

4. bind

Function.prototype.myBind = function (context = globalThis) {
  const fn = this
  const args = Array.from(arguments).slice(1)
  const newFunc = function () {
    const newArgs = args.concat(...arguments)
    if (this instanceof newFunc) {
      // 通过 new 调用,绑定 this 为实例对象
      fn.apply(this, newArgs)
    } else {
      // 通过普通函数形式调用,绑定 context
      fn.apply(context, newArgs)
    }
  }
  // 支持 new 调用方式
  newFunc.prototype = Object.create(fn.prototype)
  return newFunc
}

// 测试
const me = { name: 'Jack' }
const other = { name: 'Jackson' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
const meSay = say.bind(me)
meSay()
const otherSay = say.bind(other)
otherSay()

5. call

Function.prototype.myCall = function (context = globalThis) {
  // 关键步骤,在 context 上调用方法,触发 this 绑定为 context,使用 Symbol 防止原有属性的覆盖
  const key = Symbol('key')
  context[key] = this
  // es5 可通过 for 遍历 arguments 得到参数数组
  const args = [...arguments].slice(1)
  const res = context[key](...args)
  delete context[key]
  return res
};

// 测试
const me = { name: 'Jack' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
say.myCall(me)

6. apply

Function.prototype.myApply = function (context = globalThis) {
  // 关键步骤,在 context 上调用方法,触发 this 绑定为 context,使用 Symbol 防止原有属性的覆盖
  const key = Symbol('key')
  context[key] = this
  let res
  if (arguments[1]) {
    res = context[key](...arguments[1])
  } else {
    res = context[key]()
  }
  delete context[key]
  return res
}

// 测试
const me = { name: 'Jack' }
function say() {
  console.log(`My name is ${this.name || 'default'}`);
}
say.myApply(me)

7. deepCopy

function deepCopy(obj, cache = new WeakMap()) {
  if (!obj instanceof Object) return obj
  // 防止循环引用
  if (cache.get(obj)) return cache.get(obj)
  // 支持函数
  if (obj instanceof Function) {
    return function () {
      obj.apply(this, arguments)
    }
  }
  // 支持日期
  if (obj instanceof Date) return new Date(obj)
  // 支持正则对象
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
  // 还可以增加其他对象,比如:Map, Set等,根据情况判断增加即可,面试点到为止就可以了

  // 数组是 key 为数字素银的特殊对象
  const res = Array.isArray(obj) ? [] : {}
  // 缓存 copy 的对象,用于处理循环引用的情况
  cache.set(obj, res)

  Object.keys(obj).forEach((key) => {
    if (obj[key] instanceof Object) {
      res[key] = deepCopy(obj[key], cache)
    } else {
      res[key] = obj[key]
    }
  });
  return res
}

// 测试
const source = {
  name: 'Jack',
  meta: {
    age: 12,
    birth: new Date('1997-10-10'),
    ary: [1, 2, { a: 1 }],
    say() {
      console.log('Hello');
    }
  }
}
source.source = source
const newObj = deepCopy(source)
console.log(newObj.meta.ary[2] === source.meta.ary[2]); // false
console.log(newObj.meta.birth === source.meta.birth); // false

8. 事件总线 | 发布订阅模式

class EventEmitter {
  constructor() {
    this.cache = {}
  }

  on(name, fn) {
    if (this.cache[name]) {
      this.cache[name].push(fn)
    } else {
      this.cache[name] = [fn]
    }
  }

  off(name, fn) {
    const tasks = this.cache[name]
    if (tasks) {
      const index = tasks.findIndex((f) => f === fn || f.callback === fn)
      if (index >= 0) {
        tasks.splice(index, 1)
      }
    }
  }

  emit(name) {
    if (this.cache[name]) {
      // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
      const tasks = this.cache[name].slice()
      for (let fn of tasks) {
        fn();
      }
    }
  }

  emit(name, once = false) {
    if (this.cache[name]) {
      // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
      const tasks = this.cache[name].slice()
      for (let fn of tasks) {
        fn();
      }
      if (once) {
        delete this.cache[name]
      }
    }
  }
}

// 测试
const eventBus = new EventEmitter()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }
eventBus.on('task', task1)
eventBus.on('task', task2)

setTimeout(() => {
  eventBus.emit('task')
}, 1000)

9. 柯里化:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数

function curry(func) {
  return function curried(...args) {
    // 关键知识点:function.length 用来获取函数的形参个数
    // 补充:arguments.length 获取的是实参个数
    if (args.length >= func.length) {
      return func.apply(this, args)
    }
    return function (...args2) {
      return curried.apply(this, args.concat(args2))
    }
  }
}

// 测试
function sum (a, b, c) {
  return a + b + c
}
const curriedSum = curry(sum)
console.log(curriedSum(1, 2, 3))
console.log(curriedSum(1)(2,3))
console.log(curriedSum(1)(2)(3))

10. es5 实现继承

function create(proto) {
  function F() {}
  F.prototype = proto;
  return new F();
}

// Parent
function Parent(name) {
  this.name = name
}

Parent.prototype.sayName = function () {
  console.log(this.name)
};

// Child
function Child(age, name) {
  Parent.call(this, name)
  this.age = age
}
Child.prototype = create(Parent.prototype)
Child.prototype.constructor = Child

Child.prototype.sayAge = function () {
  console.log(this.age)
}

// 测试
const child = new Child(18, 'Jack')
child.sayName()
child.sayAge()

11. instanceof

function isInstanceOf(instance, klass) {
  let proto = instance.__proto__
  let prototype = klass.prototype
  while (true) {
    if (proto === null) return false
    if (proto === prototype) return true
    proto = proto.__proto__
  }
}

// 测试
class Parent {}
class Child extends Parent {}
const child = new Child()
console.log(isInstanceOf(child, Parent), isInstanceOf(child, Child), isInstanceOf(child, Array));

12. 异步并发数限制

/**
 * 关键点
 * 1. new promise 一经创建,立即执行
 * 2. 使用 Promise.resolve().then 可以把任务加到微任务队列,防止立即执行迭代方法
 * 3. 微任务处理过程中,产生的新的微任务,会在同一事件循环内,追加到微任务队列里
 * 4. 使用 race 在某个任务完成时,继续添加任务,保持任务按照最大并发数进行执行
 * 5. 任务完成后,需要从 doingTasks 中移出
 */
function limit(count, array, iterateFunc) {
  const tasks = []
  const doingTasks = []
  let i = 0
  const enqueue = () => {
    if (i === array.length) {
      return Promise.resolve()
    }
    const task = Promise.resolve().then(() => iterateFunc(array[i++]))
    tasks.push(task)
    const doing = task.then(() => doingTasks.splice(doingTasks.indexOf(doing), 1))
    doingTasks.push(doing)
    const res = doingTasks.length >= count ? Promise.race(doingTasks) : Promise.resolve()
    return res.then(enqueue)
  };
  return enqueue().then(() => Promise.all(tasks))
}

// test
const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i))
limit(2, [1000, 1000, 1000, 1000], timeout).then((res) => {
  console.log(res)
})

13. 异步串行 | 异步并行

// 字节面试题,实现一个异步加法
function asyncAdd(a, b, callback) {
  setTimeout(function () {
    callback(null, a + b);
  }, 500);
}

// 解决方案
// 1. promisify
const promiseAdd = (a, b) => new Promise((resolve, reject) => {
  asyncAdd(a, b, (err, res) => {
    if (err) {
      reject(err)
    } else {
      resolve(res)
    }
  })
})

// 2. 串行处理
async function serialSum(...args) {
  return args.reduce((task, now) => task.then(res => promiseAdd(res, now)), Promise.resolve(0))
}

// 3. 并行处理
async function parallelSum(...args) {
  if (args.length === 1) return args[0]
  const tasks = []
  for (let i = 0; i < args.length; i += 2) {
    tasks.push(promiseAdd(args[i], args[i + 1] || 0))
  }
  const results = await Promise.all(tasks)
  return parallelSum(...results)
}

// 测试
(async () => {
  console.log('Running...');
  const res1 = await serialSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  console.log(res1)
  const res2 = await parallelSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  console.log(res2)
  console.log('Done');
})()

14. vue reactive

// Dep module
class Dep {
  static stack = []
  static target = null
  deps = null
  
  constructor() {
    this.deps = new Set()
  }

  depend() {
    if (Dep.target) {
      this.deps.add(Dep.target)
    }
  }

  notify() {
    this.deps.forEach(w => w.update())
  }

  static pushTarget(t) {
    if (this.target) {
      this.stack.push(this.target)
    }
    this.target = t
  }

  static popTarget() {
    this.target = this.stack.pop()
  }
}

// reactive
function reactive(o) {
  if (o && typeof o === 'object') {
    Object.keys(o).forEach(k => {
      defineReactive(o, k, o[k])
    })
  }
  return o
}

function defineReactive(obj, k, val) {
  let dep = new Dep()
  Object.defineProperty(obj, k, {
    get() {
      dep.depend()
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify()
    }
  })
  if (val && typeof val === 'object') {
    reactive(val)
  }
}

// watcher
class Watcher {
  constructor(effect) {
    this.effect = effect
    this.update()
  }

  update() {
    Dep.pushTarget(this)
    this.value = this.effect()
    Dep.popTarget()
    return this.value
  }
}

// 测试代码
const data = reactive({
  msg: 'aaa'
})

new Watcher(() => {
  console.log('===> effect', data.msg);
})

setTimeout(() => {
  data.msg = 'hello'
}, 1000)

15. promise

// 建议阅读 [Promises/A+ 标准](https://promisesaplus.com/)
class MyPromise {
  constructor(func) {
    this.status = 'pending'
    this.value = null
    this.resolvedTasks = []
    this.rejectedTasks = []
    this._resolve = this._resolve.bind(this)
    this._reject = this._reject.bind(this)
    try {
      func(this._resolve, this._reject)
    } catch (error) {
      this._reject(error)
    }
  }

  _resolve(value) {
    setTimeout(() => {
      this.status = 'fulfilled'
      this.value = value
      this.resolvedTasks.forEach(t => t(value))
    })
  }

  _reject(reason) {
    setTimeout(() => {
      this.status = 'reject'
      this.value = reason
      this.rejectedTasks.forEach(t => t(reason))
    })
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.resolvedTasks.push((value) => {
        try {
          const res = onFulfilled(value)
          if (res instanceof MyPromise) {
            res.then(resolve, reject)
          } else {
            resolve(res)
          }
        } catch (error) {
          reject(error)
        }
      })
      this.rejectedTasks.push((value) => {
        try {
          const res = onRejected(value)
          if (res instanceof MyPromise) {
            res.then(resolve, reject)
          } else {
            reject(res)
          }
        } catch (error) {
          reject(error)
        }
      })
    })
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

// 测试
new MyPromise((resolve) => {
  setTimeout(() => {
    resolve(1);
  }, 500);
}).then((res) => {
    console.log(res);
    return new MyPromise((resolve) => {
      setTimeout(() => {
        resolve(2);
      }, 500);
    });
  }).then((res) => {
    console.log(res);
    throw new Error('a error')
  }).catch((err) => {
    console.log('==>', err);
  })

16. 数组扁平化

// 方案 1
function recursionFlat(ary = []) {
  const res = []
  ary.forEach(item => {
    if (Array.isArray(item)) {
      res.push(...recursionFlat(item))
    } else {
      res.push(item)
    }
  })
  return res
}
// 方案 2
function reduceFlat(ary = []) {
  return ary.reduce((res, item) => res.concat(Array.isArray(item) ? reduceFlat(item) : item), [])
}

// 测试
const source = [1, 2, [3, 4, [5, 6]], '7']
console.log(recursionFlat(source))
console.log(reduceFlat(source))

17. 对象扁平化

function objectFlat(obj = {}) {
  const res = {}
  function flat(item, preKey = '') {
    Object.entries(item).forEach(([key, val]) => {
      const newKey = preKey ? `${preKey}.${key}` : key
      if (val && typeof val === 'object') {
        flat(val, newKey)
      } else {
        res[newKey] = val
      }
    })
  }
  flat(obj)
  return res
}

// 测试
const source = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } }
console.log(objectFlat(source));

18. 图片懒加载

// <img data-original="default.png" data-data-original="https://xxxx/real.png">
function isVisible(el) {
  const position = el.getBoundingClientRect()
  const windowHeight = document.documentElement.clientHeight
  // 顶部边缘可见
  const topVisible = position.top > 0 && position.top < windowHeight;
  // 底部边缘可见
  const bottomVisible = position.bottom < windowHeight && position.bottom > 0;
  return topVisible || bottomVisible;
}

function imageLazyLoad() {
  const images = document.querySelectorAll('img')
  for (let img of images) {
    const realSrc = img.dataset.src
    if (!realSrc) continue
    if (isVisible(img)) {
      img.src = realSrc
      img.dataset.src = ''
    }
  }
}

// 测试
window.addEventListener('load', imageLazyLoad)
window.addEventListener('scroll', imageLazyLoad)
// or
window.addEventListener('scroll', throttle(imageLazyLoad, 1000))

欢迎一起补充 ~ Github 地址

查看原文

赞 55 收藏 47 评论 9

马涛涛 赞了回答 · 11月10日

解决es6如何快速的删除数组元素

arr.splice(arr.findIndex(v => v.id === 8),1);

关注 14 回答 13

马涛涛 赞了回答 · 11月10日

解决es6如何快速的删除数组元素

ES6 findIndexMDN :Array.prototype.findIndex()
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

arr.splice(arr.findIndex(item => item.id === 8), 1)

推荐文章:【深度长文】JavaScript数组所有API全解密 | louis blog

关注 14 回答 13

认证与成就

  • 获得 524 次点赞
  • 获得 9 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 9 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-03-04
个人主页被 2.7k 人浏览