盲点知识

注意 new 运算符的优先级

function Foo() {
    return this;
}
Foo.getName = function () {
    console.log('1');
};
Foo.prototype.getName = function () {
    console.log('2');
};

new Foo.getName();   // -> 1
new Foo().getName(); // -> 2       

通过这段代码可以看出：new Foo() 的优先级高于 new Foo.

对于代码1 来说：是将 Foo.getName 当成一个构造函数来执行，执行构造函数所以输出为1.

对于代码2来说：通过 new Foo() 创建了一个Foo的实例，通过实例访问其原型链上的 方法所以输出为2.

注意非匿名的立即执行函数

var foo = 1;
 
// 有名立即执行函数
(function foo(){
    foo = 1;
    console.log(foo);
})();

// 执行这段代码会输出什么呢？

// -> ƒ foo() { foo = 10 ; console.log(foo) }

// 再去访问 foo 的值
foo
// -> 1

当JS执行器遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此行数内部才可以访问到 foo ,但这个值是只读的，所以对其重新赋值不会生效，所以打印结果还是这个函数，并且外部的值也没有发生改变。

关于对象的深拷贝

• 可以使用 JSON.stringify 和 JSON.parse 这个两个方法

  优点：简单

  缺点：会忽略掉 undefined ； 不能序列化函数 ； 不能解决循环引用的对象

  function clone(obj) {
      return JSON.parse(JSON.stringify(obj));
  }

• 使用递归循环赋值的方式

  优点：可以处理 undefined、函数等各种情况

  缺点：实现相对麻烦，效率不高

  function clone(obj) {
      if(!obj || typeof obj !== 'object') {
          return;
      }
      var _obj = obj.constructor === Object ? {} : [];
      for(let key in obj) {
          if(typeof obj[key] === 'object') {
              _obj[key] = clone(obj[key]);
          } else {
              _obj[key]  = obj[key];
          }
      }
      return _obj;
  }
  
  // 或者
  
  function clone(obj) {
      if(!obj || typeof obj !== 'object')
          throw new TypeError('params typeError');
      let _obj = obj.constructor === Object ? {} : [];
      Object.getOwnPropertyNames(obj).forEach(name => {
          if(typeof obj[name] === 'object') {
              _obj[name] = clone(obj[name]);
          } else {
              _obj[name] = obj[name];
          }
      });
      return _obj;
  }

• 使用内置 MessageChannel 对象

  优点：是内置函数中处理深拷贝性能最快的

  缺点：不能处理函数（会报错）

  function clone(obj) {
      return new Promise(resolve => {
          let {port1, port2} = new MessageChannel();
          port2.onmessage = ev => resolve(ev.data);
          port1.postMessage(obj);
      });    
  }
  
  clone(obj).then(console.log);

关于async/await , promise 异步执行顺序

想解决这个问题，就必须知道 `await` 做了什么？

刚开始以为 await 会一直等待表达执行的执行结果，之后才会执行后面的代码。 实际上 await 是一个让出线程的标志（遇到 await 会立即返回一个 padding 状态的promise）。await后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js代码。等本轮事件循环执行完又跳回到 async 函数中等待await后面表达式的返回值，如果返回值为非 promise 则继续执行async后面的代码，否则将 promse 加入队列。

且看一道面试题（分析代码执行 顺序）：

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}

async function async2() {
   console.log("async2");
}

console.log("script start");

setTimeout(function () {
    console.log("settimeout");
},0);

async1();

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

console.log("script end");

OK，那接下来具体分析执行过程：

首先输出 "script start" ，然后立即将定时器加入异步事件队列。执行 async1() ，输出 "async1 start" ，进入 async2() ，输出 "async2" ，跳出整个 async1() 函数来执行后面js代码，执行promise执行器中的内容，输出 "promise1" ，执行resolve()回调，将then函数中的内容加入异步事件队列，接着输出 "script end" 。回到 async1() 的await等待 async2() 函数的返回值，因为返回值是一个promise实例，将promise加入异步事件队列。此时的同步代码执行完毕，轮询并从队列拿出代码放入主线程执行，所以输出 "promise2" ，继续执行 async1() 中的后续内容，输出 "async1 end" ，最后取出定时器中的内容并执行，输出 "settimeout" 。

综上所述：

script start
async1 start
async2
promise1
script end
promise2
async1 end
settimeout

那么再看一个例子应该会简单很多：

function testFunc() {
    console.log("testFunc..."); // 2
    return "testFunc";
}

async function testAsync() {
    console.log("testAsync...");  // 7
    return Promise.resolve("hello testAsync");
}

async function foo() {
    console.log("test start..."); // 1
    const v1 = await testFunc();
    connsole.log('hello world.'); // 5
    console.log(v1);              // 6 testFunc
    const v2 = await testAsync();
    console.log(v2);              // 9 hello testAsync
}

foo();

var promise = new Promise(resolve => { 
    console.log("promise start..");  // 3
    resolve("promise"); 
});
promise.then(val => console.log(val)); // 8 promise

console.log("test end..."); // 4

防抖和节流

• 防抖：如果用户多次调用且间隔小于wait值，那么就会被转化为一次调用。
• 节流：多次执行函数转化为，每隔一定时间（wait）调用函数 。

一个简单的防抖函数：

function debounce(func, wait) {
    let timer = null;
    return function(...params) {
        // 如果定时器存在则清除
        if(timer){
            clearTimeout(timer);
        }
        // 重新开始定时执行
        timer = setTimeout(() => {
            func.apply(this, params);
        }, wait);
    }
}

缺点：只能在最后执行，不能立即被执行，在某些情况下不适用。

改进...

function debounce(func, wait, immediate) {
    
    let timer, context, args;
    
    // 定时器
    let later = function() {
        return setTimeout(() => {
            timer = null;
            if(!immediate) {
                func.apply(context, args);
            }
        }, wait);
    }
    
    return function(...params) {
        if(!timer) {
            timer = later();
            
            // immediate 为 true，则立即执行
            // 否则 缓存上下文 和 参数
            if(immediate) {
                func.apply(this, params);
            } else {
                context = this;
                args = params;
            }
        } else {
            clearTimeout(timer);
            timer = later();
        }           
    }
}

一个简单的节流函数：

// 节流函数
// 快速的多次执行，转化为等待wait时间再去执行
function throttle(func, wait) {
    var timer = null;
    var context = null;
    return function(...args) {
        context = this;
        if(!timer) {
            timer = setTimeout(function() {
                timer = null;
                func.apply(context, args);
            }, wait);
        }
    }
}

// 如果想让第一次调用立即执行也非常简单
仅需要将  func.apply(context, args) 提到定时器外边即可。

节流函数除了可以使用定时器实现以外，当然也可以有其他方式：

// 第一次调用会被立即执行
function throttle(func, wait) {
    var prev = 0;
    var context = null;
    return function(...args) {
        var now = +new Date();
        context = this;
        if(now -prev > wait) {
            func.apply(context,args);
            prev = now;
        }    
    }
}

call、apply和bind

怎么去模拟一个call函数呢？

思路：call一个非常重要的作用就是改变上下文环境也就是this，我们可以给用户传入的上下文对象上添加一个函数，通过这个上下文对象去执行函数，然后将这个函数删除，返回结果就可以了。

Function.prototype.myCall = function(context, ...args) {
    context = context || window;
    // 给上下文对象上添加这个函数
    context.fn = this;
    // 通过这个上下文对象去执行函数
    let result = context.fn(...args);
    // 将这个函数删除
    delete  context.fn;
    return result;
}

call既然都实现了，那么apply也是类似的，只不过传入的参数是一个数组而已。

Function.prototype.myApply = function(context, arr) {
    context = context || window;
    arr = arr || [];
    let type = {}.toString.call(arr).slice(8,-1);
    if(type !== 'Array')
        throw new TypeError('CreateListFromArrayLike called on non-object');
    context.fn = this;
    let result = context.fn(...arr);
    delete context.fn;
    return result;
}

模拟bind函数，bind函数应该返回一个新的函数。

Function.prototype.myBind  = function(context, ...args) {        
    // 保存当前的函数
    let func = this;
    return function F(...params) {
        if(this instanceof F) {
            return new func(...args, ...params);
        }
        return func.apply(context,[...args,...params]);
    }    
}

数组降维

function flattenDeep(arr) {
    if(!Array.isArray(arr))
        return [arr];
    return arr.reduce((prev,cur) => {        
        return [...prev, ...flattenDeep(cur)];
    },[]);
}

flattenDeep([1, [[2], [3, [4]], 5]]);

栈的压入和弹出

输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序，序列4,5,3,2,1是该压栈序列对应的一个弹出序列，但4,3,5,1,2就不可能是该压栈序列的弹出序列。

function IsPopOrder(pushV,popV){
    if(pushV.length === 0) return false;
    var stack = []; // 模拟栈
    for(var i = 0, j = 0; i < pushV.length;){
        stack.push(pushV[i]);
        i += 1;
        // 压入栈的值需要被弹出
        while(j < popV.length && stack[stack.length-1] === popV[j]){
            stack.pop();
            j++;
            if(stack.length === 0) break;
        }
    }
    return stack.length === 0;
}

利用栈模拟队列

思路：

• 对栈A添加数据。
• 如果栈B为空，循环将栈A中内容弹出放入栈B，并弹出栈B最后一项
• 如果栈B不为空，则直接弹出栈B的最后一项

var stackA = [];
var stackB = [];

function push(node){
    stackA.push(node);
}
function pop(){
    if(!stackB.length){
        while(stackA.length){
            stackB.push(stackA.pop());
        }
    }
    return stackB.pop();
}

Fetch和ajax之间的区别

fetch

• Fetch API是基于Promise设计的
• 容易同构（前后端运行同一套代码）
• 语法简洁，更加语义化
• 原生支持率不高，可以用polyfill兼容IE8+浏览器

fetch(url).then(function(response){
    return response.json();
}).then(function(data){
    console.log(data);
}).catch(function(err){
    console.log(err);
});

ajax

• 设计粗糙，不关注分离原则
• 基于事件的异步模型，不够友好

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function(){
    console.log(xhr.response);
}
xhr.onerror = function(){
    console.log('error');
}

xhr.send();

Fetch常见坑

• fetch请求默认是不带cookie的，需要设置 fetch(url, {credentials: 'include'})
• 服务器返回400,500错误码时不会reject，只有网络错误导致不能完成时，才会reject。
• IE8, 9 的 XHR 不支持 CORS 跨域。

归并排序

将一个完整的数组分成两部分，分别对其排序，然后将两部分merge在一起即可。

function merge(left, right) {
    var temp = [];
    while(left.length && right.length) {        
        if(left[0] < right[0])
            temp.push(left.shift());
        else
            temp.push(right.shift());        
    }
    return temp.concat(left,right);
}

function mergeSort(arr) {
    if(arr.length === 1)
        return arr;
    var mid = (arr.length/2)|0;
    var left = arr.slice(0,mid);
    var right = arr.slice(mid);    
    return merge(mergeSort(left), mergeSort(right));
}

箭头函数的this原理

this 指向固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数没有自己的 this ，导致内部的this就是外层代码的 this ，也正是因为没有 this ，所以箭头函数不能用作构造函数。

js相关尺寸

BFC原理

• 在BFC垂直方向元素边距会发生重叠
• 不会与浮动元素的box重合
• 独立的容器，里外互不影响

• 浮动元素参与计算

  自定义事件

  var content = document.querySelector('.content');
    // 自定义事件
    var evt = new Event('custom');
    var customEvt = new CustomEvent('customEvt', {
        // 通过这个属性传递参数
        detail: {
            name: 'tom',
            age: 12
        }
    });
    content.addEventListener('custom', (e) => {
        console.log('自定义事件被触发,无参数...');
        console.log(e);
    });
    content.addEventListener('customEvt', (e) => {
        console.log('自定义事件被触发,有参数...');
        console.log(e);
        console.log(e.detail);
    });
    // 点击时触发这个自定义事件
    content.addEventListener('click', (e) => {
        content.dispatchEvent(evt);
        content.dispatchEvent(customEvt);
    });

变量提升

var foo = 3; // 不在同一个作用域

function hoistVariable() {
    // 内部变量提升导致 foo 的初始值为undefined
    // 所以 foo = 5;
    var foo = foo || 5;
    console.log(foo); // 5
}

hoistVariable();

上边的比较简单，看一个函数和变量同名，关于变量提升的小问题。

var a = 6;
function b(){
    console.log(a); // @1
    var a = 4;
    function a(){
        alert(4);
    }
    console.log(a); //@2
}
b();

• 因为JavaScript中的函数是一等公民，函数声明的优先级 最高(高于变量提升)，会被提升至当前作用域最顶端，所以在 @1 输出的是 function a(){alert(4);}
• 接下来执行 a=4; 这一句，重新对 a 进行赋值。
• 函数已被提升，所以不考虑，所以在 @2 这里自然会输出 4 。

如果还不能理解？且看预编译后的代码：

var a;
a = 6;
function b(){
    var a; 
    a = function a(){ // 函数先提升
        alert(4);
    }
    console.log(a); // @1
    a = 4;
    console.log(a); // @2    
}
b(); // 结果已经非常明了了

POST和GET的区别

• POST对请求参数的长度没有限制，而GET如果请求参数过长，会被浏览器截断。
• GET请求参数会直接暴露在URL上，所以不适合用来传递敏感信息。
• GET请求可以被浏览器主动缓存，而POST请求不可以，除非手动设置。
• GET请求在浏览器回退时是无害的，而POST会再次提交请求。
• GET请求产生的URL可以被浏览器缓存，而POST不可以。

通信类

1. 前后端如何通信？

• ajax
• WebSocket
• CORS

2. 如何创建ajax?

// 创建xhr对象
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');

// GET 请求
xhr.open('GET',url,true);
xhr.send();

// POST 请求
xhr.open('POST',url,true);
// 表单数据 , 也可以提交json数据，相应的content-Type: application/json
xhr.setRequestHeader('content-Type', 'application/x-www-from-urlencoded');
xhr.send(dataArr.join('&'));

xhr.onload = function() {
    if(xhr.status === 200 || xhr.status === 304) {    
        var data = xhr.responseText;
        // 拿到数据
    } else {
        // 出问题了
    }
}

3. 跨域通信的几种方式？

• JSONP：利用 script 标签的跨域能力，服务返回一个js函数调用，数据作为函数的一个参数来传递。

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url; // 跨域地址
  document.head.appendChild(script);
  
  //有能耐把我这辈子都安排了，不然少他妈扯淡。
  setTimeout(function() {
      document.head.removeChild(script);
      script = null;
  });
  
  // 接收数据
  function jsonpCallback(data) {
      console.log(data);
  }

• WebSocket：不受同源政策限制。

  var ws = new WebSocket('wss://echo.websocket.org');
  ws.onopen = function(e) {
      ws.send('hello...');
  }
  ws.onmessage = function(e) {
      var data = e.data;
  }
  ws.onclose = function() {
      console.log('close...');
  }

• Hash：利用 location.hash 来传值。 缺点：数据直接暴露在url中，大小、类型都有限制。

  1、父窗体可以把信息写在子窗体的href的hash上，子窗口通过监听hashchange事件获取信息。

  2、子窗体改变父窗体的hash值，那么就要借助第三个子窗体，第三个子窗体是第二个子窗体的子窗体。（第三个子窗体要与父窗体同源）

  3、第二个子窗体把信息设置在第三个子窗体的hash值上，然后第三个子窗体改变父窗体的hash值，从而实现跨域。

  // 父窗体
  var son = document.getElementByTagName('iframe');
  son.src = son.src + '#' + data;
  
  // 子窗体
  window.onhashchange = function() {
      var data = window.location.hash;
  }

• postMessage ：语法：window.postMessage(msg,targetOrigin)

  // 窗口A 发送
  BWindow.postMessage('发送的数据', 'http://B.com');
  
  // 窗口B 接收
  window.addEventListener('message', (event) => {
     event.origin: // http://A.com
     event.source; // AWindow
     event.data;   // '发送的数据' 
  });

• CORS： 跨域资源共享。

  fetch(url, {
      method: 'get',
      // 头信息配置
  }).then(() => {});

安全类

• CSRF，跨站请求伪造（Cross-site request forgery）

  防御措施：

  Token验证（请求必须携带Token）

  Referer 验证（验证请求的来源是否可信）

• XSS（cross-site scripting 跨站脚本攻击）

  原理：注入脚本

  防御措施：对用户的输入做验证

渲染机制类

1. 什么是DOCTYPE及作用？

用来声明文档类型和DTD规范的。

DTD（document type definition）文档类型定义，是一系列的语法规则，用来声明XML或(X)HTML的文件类型，浏览器会使用它来决定文档类型，决定使用何种协议来解析，以及切换浏览器模式。

2. 常见的doctype有哪些？

• HTML5
• HTML4.01 Strict 严格模式 （不包含展示性或弃用的元素）
• HTML4.01 Transitional 传统(宽松)模式（包含展示性或弃用的元素）

页面性能类

提升页面性能的方式？

• 资源压缩合并，减少HTTP请求

• 非核心代码异步加载

  异步加载方式：

  1. 动态脚本加载
  2. defer （HTML解析完顺序执行）
  3. async （加载完立即执行）
• 利用浏览器缓存
• 使用CDN

• 预解析DNS

错误监控

• 前端错误分类：代码（运行）错误 资源加载错误
• 错误捕获方式

  运行错误捕获：（1）try...catch （2）window.onerror

  资源加载错误 ：（1）object.onerror(资源错误不冒泡) （2）performance.getEntries() （3）Error事件捕获（在事件流捕获阶段处理错误）

• 跨域js运行错误也是可以捕获的，捕获的错误：script error

• 上报错误原理

  利用Image对象上报

  // 利用Image标签上报错（简单、不需要借助其他库）
  (new Image()).src = 'http://www.baidu.com/test?error=xxx';

二分法查找

function binarySearch(arr,val,leftIndex,rightIndex) {
    if(leftIndex > rightIndex){ return; }
    var midIndex = (leftIndex + rightIndex) / 2 | 0;
    var midVal = arr[midIndex];
    if(val > midVal) {
        return binarySearch(arr,val,midIndex+1,rightIndex);
    }else if(val < midVal) {
        return binarySearch(arr,val,leftIndex,midIndex-1);
    }else{
        return midIndex;
    }
}

连续最长不重复字符串

在一个字符串中找出连续的不重复的最大长度的字符串，解决这类问题的思路：

• 利用循环叠加字符串，直到出现重复为止
• 每一次叠加，记录下来最大长度的字符串

// 连续最长不重复字符串
function getMaxLenStr(str) {
    var cur = [];
    var maxLenStr = '';
    for(var i = 0; i < str.length; i++) {
        if(!cur.includes(str[i])) {
            cur.push(str[i]);
        } else {
            cur = []; // 置为空
            cur.push(str[i]);
        }
        
        // 存储最大长度的字符串
        if(maxLenStr.length < cur.length) {
            maxLenStr = cur.join('');
        }        
    }
    return maxLenStr;
}

getMaxLenStr('ababcabcde'); // abcde

和上面这道题有一样思路的是：求一个数组当中，连续子向量的最大和。

无非是将 对比字符串的长度 改为 对比值大小

function FindGreatestSumOfSubArray(arr) {
    let sum = arr[0];
    let max = arr[0];
    for(let i = 1; i < arr.length; i++) {
        if(sum < 0) {
            sum = arr[i];
        }else{
            sum += arr[i];
        }
        // 记录最大值
        if(max < sum) {
            max = sum;
        }
    }
    return max;
} 

面试题：解码字符串并输出

阿里的一道面试题：给定一个编码字符，按编码规则进行解码，输出字符串

编码规则：coount[letter] ，将letter的内容count次输出，count是0或正整数，letter是区分大小写的纯字母。

实例：

• const s= 3[a]2[bc]; decodeString(s); // 返回 ‘aaabcbc’
• const s= 3[a2[c]]; decodeString(s); // 返回 ‘accaccacc’
• const s= 2[ab]3[cd]ef; decodeString(s); // 返回 ‘ababcdcdcdef’

解题过程...

• 思路：

  使用栈这种数据结构，如果push的内容为‘]’，则循环pop字符，直到碰到’[‘，然后将pop

出来的字符串按规则整理后，重新push进栈中，最后将栈内的内容拼接成字符串输出即可。

• 代码：

  const s = '2[a2[c]]ef';
  function decodeString(str) {
      let stack = []; // 存储字符串的栈
      for (let i = 0; i < str.length; i++) {
          let cur = str[i];
          if (cur !== ']') {
              stack.push(cur);
          } else { // 弹出
              let count = 0;
              let loopStr = [];
              let popStr = '';
              while ((popStr = stack.pop()) !== '[') {
                  loopStr.unshift(popStr);
              }
              count = stack.pop();
              // 添加结果
              let item = '';
              for (let i = 0; i < count; i++) {
                  item += loopStr.join('');
              }
              stack.push(...(item.split('')));
          }
      }
      return stack.join('');
  }
  console.log(decodeString(s)); // accaccef

排序算法时间复杂度

• 元素的移动次数与关键字的初始排列次序无关的是：基数排列。
• 元素的比较次数与初始序列无关是：选择排序。
• 算法的时间复杂度与初始序列无关的是：选择排序。

BOM和DOM

BOM 即浏览器对象模型，BOM没有相关标准，BOM的核心对象是window对象。

DOM即文档对象模型，DOM是W3C标准，DOM的最根本对象是document（window.document）, 这个对象实际上是window对象的属性，这个对象的独特之处是唯一一个既属于BOM有属于DOM的对象。

http和WebSocket的区别：

• 相同点：

都是建立于tcp连接之上，通过tcp协议来传输数据。

• 不同点：

HTTP是一种单向的协议，即客户端只能向服务器端请求信息。request永远等于response，并且这个response是被动的，不能主动发起。一旦有一个任务超时，就会阻塞后续的任务（线头阻塞）。

HTTP协议是无状态的，如使用轮询、long poll都需要将身份鉴别信息上传。

WebSocket真正的全双工通信，只需要一次连接，这样就避免了HTTP的无状态性，服务器端可以主动推送消息到达客户端。

http2.0

• 二进制分帧
• 多路复用，这样就避免了线头阻塞
• 服务器端推送，客户端请求HTML，服务器可以主动推送js、css那些客户端可能会用到的东西，这样就避免了重复发送请求
• 头压缩

O(n)复杂度去重

function unique(arr) {
    let obj = {};
    let ret = [];
    for(let i = 0; i < arr.length; i++) {
        let cur = `${typeof arr[i]}-${arr[i]}`;
        if(!obj[cur]) {
            ret.push(arr[i]);
            obj[cur] = true;
        }
    }        
    return ret;
}

var arr = [1, '1', 3, 3, 4];
unique(arr);
// [1, '1', 3, 4]

判断是否相同

function isSame(a, b) {
    if(a === b) return true;
    if(typeof a !== typeof b) return false;
    
    // 如果均为object类型，判断属性个数是否相同
    if(typeof a === 'object' && typeof b === 'object') {
        let aLen = Object.getOwnPropertyNames(a).length;
        let bLen = Object.getOwnPropertyNames(b).length;
        if(aLen !== bLen) return false;
    }
    return Object.getOwnPropertyNames(a).every(key => {
        if(typeof a[key] === 'object') {
            return isSame(a[key], b[key]);
        }
        return a[key] === b[key];
    });
}