前端高频面试题汇总（一）

// ES6 const obj = {   getArrow() {     return () => {       console.log(this === obj);     };   } }

// ES5，由 Babel 转译var obj = {    getArrow: function getArrow() {      var _this = this;      return function () {         console.log(_this === obj);      };    } };

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}

// getconst getJSON = (url) => {    return new Promise((resolve, reject) => {        let xhr = new XMLHttpRequest();        // open 方法用于指定 HTTP 请求的参数: method, url, async（是否异步，默认true）        xhr.open("GET", url, false);        xhr.setRequestHeader('Content-Type', 'application/json');        // onreadystatechange 属性指向一个监听函数。        // readystatechange 事件发生时（实例的readyState属性变化），就会执行这个属性。        xhr.onreadystatechange = function(){            // 4 表示服务器返回的数据已经完全接收，或者本次接收已经失败            if(xhr.readyState !== 4) return;            // 请求成功，基本上只有2xx和304的状态码，表示服务器返回是正常状态            if(xhr.status === 200 || xhr.status === 304) {                // responseText 属性返回从服务器接收到的字符串                resolve(xhr.responseText);            }            // 请求失败            else {                reject(new Error(xhr.responseText));            }        }        xhr.send();    });}
// postconst postJSON = (url, data) => {    return new Promise((resolve, reject) => {        let xhr = new XMLHttpRequest();        xhr.open("POST", url);        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');        xhr.onreadystatechange = function(){            if(xhr.readyState !== 4) return;            if(xhr.status === 200 || xhr.status === 304) {                resolve(xhr.responseText);            }            else {                reject(new Error(xhr.responseText));            }        }        xhr.send(data);    });}

const jsonp = (url, params, callbackName) => {    const generateUrl = () => {        let dataSrc = "";        for(let key in params) {            if(params.hasOwnProperty(key)) {                dataSrc += `${key}=${params[key]}&`            }        }        dataSrc += `callback=${callbackName}`;        return `${url}?${dataSrc}`;    }    return new Promise((resolve, reject) => {        const scriptEle = document.createElement('script');        scriptEle.src = generateUrl();        document.body.appendChild(scriptEle);        window[callbackName] = data => {            resolve(data);            document.removeChild(scriptEle);        }    });}

async function async1 () {  console.log('async1 start');  await new Promise(resolve => {    console.log('promise1')  })  console.log('async1 success');  return 'async1 end'}console.log('srcipt start')async1().then(res => console.log(res))console.log('srcipt end')

script startasync1 startpromise1script end

function foo() {  console.log( this.a );}
function doFoo() {  foo();}
var obj = {  a: 1,  doFoo: doFoo};
var a = 2; obj.doFoo()

// （1）匹配 16 进制颜色值var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
// （2）匹配日期，如 yyyy-mm-dd 格式var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
// （3）匹配 qq 号var regex = /^[1-9][0-9]{4,10}$/g;
// （4）手机号码正则var regex = /^1[34578]\d{9}$/g;
// （5）用户名正则var regex = /^[a-zA-Z\$][a-zA-Z0-9_\$]{4,16}$/;

// slice(start,[end])// slice(start,[end])方法：该方法是对数组进行部分截取，该方法返回一个新数组// 参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）。// 包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；// 如果出现负数就把负数与长度相加后再划分。// slice中的负数的绝对值若大于数组长度就会显示所有数组// 若参数只有一个，并且参数大于length，则为空。// 如果结束位置小于起始位置，则返回空数组// 返回的个数是end-start的个数// 不会改变原数组var arr = [1,2,3,4,5,6]/*console.log(arr.slice(3))//[4,5,6] 从下标为0的到3，截取3之后的数console.log(arr.slice(0,3))//[1,2,3] 从下标为0的地方截取到下标为3之前的数console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/// 个人总结：slice的参数如果是正数就从左往右数，如果是负数的话就从右往左边数，// 截取的数组与数的方向一致，如果是2个参数则截取的是数的交集，没有交集则返回空数组 // ps：slice也可以切割字符串，用法和数组一样，但要注意空格也算字符
// splice(start,deletecount,item)// start：起始位置// deletecount：删除位数// item：替换的item// 返回值为被删除的字符串// 如果有额外的参数，那么item会插入到被移除元素的位置上。// splice:移除，splice方法从array中移除一个或多个数组，并用新的item替换它们。//举一个简单的例子 var a=['a','b','c']; var b=a.splice(1,1,'e','f');  console.log(a) //['a', 'e', 'f', 'c'] console.log(b) //['b']
 var a = [1, 2, 3, 4, 5, 6];//console.log("被删除的为：",a.splice(1, 1, 8, 9)); //被删除的为：2// console.log("a数组元素：",a); //1,8,9,3,4,5,6
// console.log("被删除的为：", a.splice(0, 2)); //被删除的为：1,2// console.log("a数组元素：", a) //3,4,5,6console.log("被删除的为：", a.splice(1, 0, 2, 2)) //插入 第二个数为0，表示删除0个  console.log("a数组元素：", a) //1,2,2,2,3,4,5,6
// split(字符串)// string.split(separator,limit)：split方法把这个string分割成片段来创建一个字符串数组。// 可选参数limit可以限制被分割的片段数量。// separator参数可以是一个字符串或一个正则表达式。// 如果separator是一个空字符，会返回一个单字符的数组，不会改变原数组。var a="0123456";  var b=a.split("",3);  console.log(b);//b=["0","1","2"]// 注意：String.split() 执行的操作与 Array.join 执行的操作是相反的。

1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

var length = 10;function fn() {    console.log(this.length);}
var obj = {  length: 5,  method: function(fn) {    fn();    arguments[0]();  }};
obj.method(fn, 1);

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <body>    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>    <!-- 引入vue文件 -->    <div id="box">      <new-input v-bind:name.sync="name"></new-input>      {{name}}      <!-- 小胡子语法 -->      <input type="text" v-model="name" />    </div>    <script>      Vue.component("new-input", {        props: ["name"],        data: function () {          return {            newName: this.name,          };        },        template: `<label><input type="text" @keyup="changgeName"        v-model="newName" /> 你的名字：</label>`,        // 模板字符串        methods: {          changgeName: function () {            this.$emit("update:name", this.newName);          },        },        watch: {          name: function (v) {            this.newName = v;          },        },        //    监听      });      new Vue({        el: "#box",        //挂载实例        data: {          name: "nick",        },        //赋初始值      });    </script>  </body></html>

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <body>    <input type="text" v-mode="msg" />    <p v-mode="msg"></p>    <script>      const data = {        msg: "你好",      };      const input = document.querySelector("input");      const p = document.querySelector("p");      input.value = data.msg;      p.innerHTML = data.msg;      //视图变数据跟着变      input.addEventListener("input", function () {        data.msg = input.value;      });      //数据变视图变      let temp = data.msg;      Object.defineProperty(data, "msg", {        get() {          return temp;        },        set(value) {          temp = value;          //视图修改          input.value = temp;          p.innerHTML = temp;        },      });      data.msg = "小李";    </script>  </body></html>

八股文我不想写了自己百度去

var fn = function() {    return 1;    // 下面代码便属于 不可能执行的代码；    // 通过 UglifyJs (Webpack4+ 已内置) 便会进行 DCE；    var a = 1;    return a;}

var name = 'css'   var career = 'coder' var hobby = ['coding', 'writing']var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]

var name = 'css'   var career = 'coder' var hobby = ['coding', 'writing']var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

let list = `    <ul>        <li>列表项1</li>        <li>列表项2</li>    </ul>`;console.log(message); // 正确输出，不存在报错

function add(a, b) {  const finalString = `${a} + ${b} = ${a+b}`  console.log(finalString)}add(1, 2) // 输出 '1 + 2 = 3'

const son = 'haha' const father = 'xixi haha hehe'father.includes(son) // true

const father = 'xixi haha hehe'father.startsWith('haha') // falsefather.startsWith('xixi') // true

const father = 'xixi haha hehe'  father.endsWith('hehe') // true

const sourceCode = 'repeat for 3 times;'const repeated = sourceCode.repeat(3) console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

async function async1 () {  console.log('async1 start');  await new Promise(resolve => {    console.log('promise1')  })  console.log('async1 success');  return 'async1 end'}console.log('srcipt start')async1().then(res => console.log(res))console.log('srcipt end')

script startasync1 startpromise1script end

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let data = {  name: '姓名',  age: 18}render(template, data); // 我是姓名，年龄18，性别undefined

function render(template, data) {  let computed = template.replace(/\{\{(\w+)\}\}/g, function (match, key) {    return data[key];  });  return computed;}

class Store {  constructor() {    let store = localStorage.getItem('cache')    if (!store) {      store = {        maxSize: 1024 * 1024,        size: 0      }      this.store = store    } else {      this.store = JSON.parse(store)    }  }  set(key, value, expire) {    this.store[key] = {      date: Date.now(),      expire,      value    }    let size = this.sizeOf(JSON.stringify(this.store[key]))    if (this.store.maxSize < size + this.store.size) {      console.log('超了-----------');      var keys = Object.keys(this.store);      // 时间排序      keys = keys.sort((a, b) => {        let item1 = this.store[a], item2 = this.store[b];        return item2.date - item1.date;      });      while (size + this.store.size > this.store.maxSize) {        let index = keys[keys.length - 1]        this.store.size -= this.sizeOf(JSON.stringify(this.store[index]))        delete this.store[index]      }    }    this.store.size += size
    localStorage.setItem('cache', JSON.stringify(this.store))  }  get(key) {    let d = this.store[key]    if (!d) {      console.log('找不到该属性');      return    }    if (d.expire > Date.now) {      console.log('过期删除');      delete this.store[key]      localStorage.setItem('cache', JSON.stringify(this.store))    } else {      return d.value    }  }  sizeOf(str, charset) {    var total = 0,      charCode,      i,      len;    charset = charset ? charset.toLowerCase() : '';    if (charset === 'utf-16' || charset === 'utf16') {      for (i = 0, len = str.length; i < len; i++) {        charCode = str.charCodeAt(i);        if (charCode <= 0xffff) {          total += 2;        } else {          total += 4;        }      }    } else {      for (i = 0, len = str.length; i < len; i++) {        charCode = str.charCodeAt(i);        if (charCode <= 0x007f) {          total += 1;        } else if (charCode <= 0x07ff) {          total += 2;        } else if (charCode <= 0xffff) {          total += 3;        } else {          total += 4;        }      }    }    return total;  }}

1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

常用的两个路由守卫：router.beforeEach 和 router.afterEach
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。
在项目中，一般在beforeEach这个钩子函数中进行路由跳转的一些信息判断。判断是否登录，是否拿到对应的路由权限等等。

原型链实际上在上面原型的问题中就有涉及到，在原型的继承中，我们继承来多个原型，这里再提一下实现完美继承的方案，通过借助寄生组合继承，PersonB.prototype = Object.create(PersonA.prototype)这是当我们实例化PersonB得到实例化对象，访问实例化对象的属性时会触发get方法，它会先在自身属性上查找，如果没有这个属性，就会去__proto__中查找，一层层向上直到查找到顶层对象Object，这个查找的过程就是原型链来。

// 测试次数：一百万次const times = 1000000// 缓存body元素console.time('object')let body = document.body// 循环赋值对象作为对照参考for(let i=0;i<times;i++) {  let tmp = body}console.timeEnd('object')// object: 1.77197265625ms
console.time('dom')// 循环读取body元素引发线程切换for(let i=0;i<times;i++) {  let tmp = document.body}console.timeEnd('dom')// dom: 18.302001953125ms

const times = 10000;console.time('switch')for (let i = 0; i < times; i++) {  document.body === 1 ? console.log(1) : void 0;}console.timeEnd('switch') // 1.873046875msvar body = JSON.stringify(document.body)console.time('batch')for (let i = 0; i < times; i++) {  body === 1 ? console.log(1) : void 0;}console.timeEnd('batch') // 0.846923828125ms

const times = 10000;console.time('createElement')for (let i = 0; i < times; i++) {  const div = document.createElement('div')  document.body.appendChild(div)}console.timeEnd('createElement')// 54.964111328125msconsole.time('innerHTML')let html=''for (let i = 0; i < times; i++) {  html+='<div></div>'}document.body.innerHTML += html // 31.919921875msconsole.timeEnd('innerHTML')

 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();

function render(template, data) {    const reg = /\{\{(\w+)\}\}/; // 模板字符串正则    if (reg.test(template)) { // 判断模板里是否有模板字符串        const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段        template = template.replace(reg, data[name]); // 将第一个模板字符串渲染        return render(template, data); // 递归的渲染并返回渲染后的结构    }    return template; // 如果模板没有模板字符串直接返回}

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let person = {    name: '布兰',    age: 12}render(template, person); // 我是布兰，年龄12，性别undefined