2018春招前端面试: 闯关记(精排精校) | 掘金技术征文

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
.cn 域名,1个 12个月
简介: 年末研发组解散失业, 选择回去学车了,也顺利拿到了驾照,最近回归大深圳,开始踏上漫漫的找工作之路。


前言


年末研发组解散失业, 选择回去学车了,也顺利拿到了驾照,最近回归大深圳,开始踏上漫漫的找工作之路。


拉勾上吊一百年不匹配, BOSS直聘日夜没反应。


题目范围涵盖我最近遇到的笔试题和面谈的

(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React)


emm,这里不列举哪些公司了, 若是你完整的阅读一遍,相信你有不少的收获,谢谢阅读


  • 问题截止日期(2018/3/23),我去面的创业,中大型皆有。


  • 期间死在各种一面/二面/三面/四面皆有之,也拿到部分和推掉部分offer,还有一些后续不清楚的


问题汇总,想到就写


Q: CSS 有哪些样式可以给子元素继承!



  • 可继承的:font-size,font-weight,line-height,color,cursor
  • 不可继承的一般是会改变盒子模型的:display,marginborderpaddingheight


更加全面的可以到引擎找


Q: 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?



  • 行内: input,span,a,img以及display:inline的元素
  • 块级: p,div,header,footer,aside,article,ul以及display:block这些
  • void: br,hr


Q: CSS3实现一个扇形



  • 思路跟画实体三角形一个道理,只不过多了一个圆角属性


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
    .sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <div class="sector"></div>
</body>
</html>


Q: box-sizing常用的属性有哪些? 分别有啥作用?



box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),

这个css 主要是改变盒子模型大小的计算形式


可能有人会问padding-box,这个之前只有 Firefox 标准实现了,目前50+的版本已经废除;


用一个栗子来距离,一个div的宽高分别100px,border5px,padding5px


<style>
    .test {
      box-sizing: content-box;
      border: 5px solid #f00;
      padding:5px;
      width: 100px;
      height: 100px;
    }
  </style>
  <div class="test"></div>
<!--
content-box的计算公式会把宽高的定义指向 content,border和 padding 另外计算,
也就是说 content + padding + border = 120px(盒子实际大小)
而border-box的计算公式是总的大小涵盖这三者, content 会缩小,来让给另外两者
content(80px) + padding(5*2px) + border(5*2px) = 100px
-->


Q: 清除浮动的方式有哪些?比较好的是哪一种?


常用的一般为三种.clearfix, clear:both,overflow:hidden;

比较好是 .clearfix,伪元素万金油版本,后两者有局限性..等会再扯


.clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
<!--
为毛没有 zoom ,_height 这些,IE6,7这类需要 csshack 不再我们考虑之内了
.clearfix 还有另外一种写法,
-->
.clearfix:before, .clearfix:after {
  content:"";
  display:table;
}
.clearfix:after{
  clear:both;
  overflow:hidden;
}
.clearfix{
    zoom:1;
}
<!--
用display:table 是为了避免外边距margin重叠导致的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->


clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷


overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷


Q: CSS 中transitionanimate有何区别? animate 如何停留在最后一帧!


这种问题见仁见智,我的回答大体是这样的..待我捋捋.


transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)


animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态;


过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多;


至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了


animation-fill-mode: forwards;
<!--backwards则停留在首帧,both是轮流-->


让我们来举个栗子,.自己新建一个 html 跑一下,.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box-sizing</title>
  <style>
    .test {
      box-sizing: border-box;
      border: 5px solid #f00;
      padding: 5px;
      width: 100px;
      height: 100px;
      position:absolute;
      /*
      简写的姿势排序
      @keyframes name : 动画名
      duration 持续时间
      timing-function 动画频率
      delay 延迟多久开始
      iteration-count 循环次数
      direction 动画方式,往返还是正向
      fill-mode  一般用来处理停留在某一帧
      play-state running 开始,paused 暂停 ,.
       更多的参数去查文档吧..我就不一一列举了
      */
      animation: moveChangeColor  ease-in 2.5s 1  forwards running;
    }
    @keyframes moveChangeColor {
       from {
         top:0%;
         left:5%;
         background-color:#f00
       }
       to{
         top:0%;
         left:50%;
         background-color:#ced;
       }
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>


Q: 块级元素水平垂直居中的方法


我们要考虑两种情况,定宽高和不定宽高的;

方案 N 多种,我记得我很早写过这类的笔记

传送门:网页元素居中攻略记


Q: 说说样式权重的优先级;


!important > 行内样式 > id > class > tag

样式权重可以叠加, 比如 id>class


Q: 对HTML语义化的理解


简言之:就是不滥用标签(比如 DIV)/随意嵌套(比如 span>div) ,

类的命名要合理, 利于浏览器解析乃至引擎收录,也利于团队协作和维护


Q: JS有几种数据类型,其中基本数据类型有哪些!


七种数据类型


  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (ECMAScript 6 新定义)
  • Object


(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,


ES6出来的Symbol也是原始数据类型 ,表示独一无二的值


Object 为引用类型(范围挺大),也包括数组、函数,


Q: nullundefined的差异


大体说一下,想要知其所以然请引擎搜索


相同点:


  • if判断语句中,值都默认为 false
  • 大体上两者都是代表,具体看差异


差异:


  • null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
  • undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefined
  • null是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
  • 设置为null的变量或者对象会被内存收集器回收


Q: JS 的DOM 操作(Node节点获取及增删查改);


  • 获取(太多了,有document.getElementById/ClassName/Name/TagName 等,或者 querySelector)


// example
// get Node
var element = document.querySelector('#test');
// 追加
element.appendChild(Node);
// 删除
element.removeChild(Node);
// 查找
element.nextSibling // 获取元素之后的兄弟节点 , 会拿到注释文本,空白符这些
element.nextElementSibling  // 等同, 获取标签(不会拿到注释文本这些)
element.previousSibling // 和上面同理,往前找兄弟节点
element.previousElementSibling
// 改动,比如 属性这些
element.setAttribute(name, value); // 增加属性
element.removeAttribute(attrName); //删除属性
// 来一个简易的练习题,随便一个网页追加插入一块DOM(非覆盖:不能 innerHTML);
/*
<div id="test">
   <span>Hello, World</span>
</div>
*/
// 以上面的例子为例
var test = document.createElement('div');  // 创建一个块级元素
test.setAttribute("id","test"); // 设置其id 属性
var span = document.createElement('span'); // 创建一个 span
span.innerText = "Hello,world"; // 插入 span 的文本内容
test.appendChild(span); // 组合节点
element.appendChild(test); //追加到某个节点区域


Q:Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?


hasOwnProperty,这个更多的是用来区分自身属性和原型链上的属性。


Q: 给一个 DOM添加捕获和冒泡的两种写法的事件点击,谁先执行?


分情况分析:


  • 有拿到节点的,优先捕获,没有才往上冒泡寻找
  • 若是通过node.addEventListener('event',callback,bubble or capture); 谁先调用谁先执行


stackoverflow 有相关的探讨:



Q: 谈谈你对ajax 的理解,以及用原生 JS 实现有哪些要点需要注意;


ajax全称是异步 javascript 和 XML,用来和服务端进行数据交互的,让无刷新替换页面数据成了可能;


至于有哪些要要点,来一个简短的ajax请求


var xhr = new XMLHttpRequest(); // 声明一个请求对象
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){  // readyState 4 代表已向服务器发送请求
        if(xhr.status === OK){ // // status 200 代表服务器返回成功
            console.log(xhr.responseText); // 这是返回的文本
        } else{
            console.log("Error: "+ xhr.status); // 连接失败的时候抛出错误
        }
    }
}
xhr.open('GET', 'xxxx');
// 如何设置请求头? xhr.setRequestHeader(header, value);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null); // get方法 send null(亦或者不传,则直接是传递 header) ,post 的 send 则是传递值


更为详细的可以阅读此处;



Q: JS 实现一个闭包函数,每次调用都自增1;


这里主要考察了闭包,函数表达式以及 IIFE(立即执行表达式)


var add = (function() {
  // 声明一变量,由于下面 return所以变量只会声明一次
  var count = 0;
  return function() {
    return console.log(count++);
  };
})();
add(); // 0
add(); // 1
add(); // 2


Q: ['1','2','3'].map(parseInt) 输出什么,为什么?


['1','2','3'].map(parseInt); // [1,NaN,NaN]
// 刨析
// map有三个参数:数组元素,元素索引,原数组本身
// parseInt有两个参数,元素本身以及进制
// 理清了这两个就好办了,
// ['1','2','3'].map(parseInt); 等于如下
['1','2','3'].map(function(item,index,array){
    return parseInt(item,index); // 是不是一目了然
});
// parseInt("1",0); => 1
// parseInt("2",1); => NaN
// parseInt("3",2); => NaN


Q:如何实现浏览器内多个标签页之间的通信?


WebSocket、localstorge、cookies都可以。


要考虑浏览器无痕模式的话用WebSocket会更好,不然功能基本失效或者报错。


Q:webSocket如何兼容低浏览器?


最常见的就是轮询XHR


Q: 什么是window对象? 什么是document对象?


window对象是指浏览器打开的窗口。


document对象是HTML 文档对象的一个只读引用,window对象的一个属性。


Q: 对数组 ['2018-03-05', '2013-06-12','2019-03-12','2018-03-05','2014-02-22'] 去重且排序


我这里用的是结合 ES6的,代码量很短


//很好理解, Set 具有值唯一性(但不是所有值,等会我抛出我的另外一篇文章)
// 结合,解构,可以把可迭代(比如 arguments/nodelist 等)的转为数组
// sort 里面传入 两个值比较,返回-1和1是因为1代表这个数大排后(相对),-1代表小(相对),0为相等
let arr = [,new Set(['2018-03-05', '2013-06-12','2019-03-12','2018-03-05','2014-02-22'])].sort(function(a,b){
  return a<b ? -1:1; // 这里返回的是升序的,降序改下返回值就好了.所以是相对
})
// ["2013-06-12", "2014-02-22", "2018-03-05", "2019-03-12"]


对于数组去重的,有兴趣的可以看下我这篇水文:



Q: 对数组[1,2,3,4,5,'6',7,'8','a','b','z']进行乱序


// 我们依旧可以用上面的 sort 的原理实现乱序
let tempArr = [1,2,3,4,5,'6',7,'8','a','b','z'].sort(function(){
  return Math.random() > 0.5 ? -1 : 1;
})
// 因为里面有随机数,所以答案没有标准答案,我这边跑了一次是输出这个
//["6", "z", 3, "b", 5, 2, 7, "8", "a", 1, 4]


上面和这道题逗涉及到数组顺序的问题,想了解下为什么 a-b,a>b这类可以更改排序

可以看看知乎对于这块的探讨: 传送门:javascript排序return a-b?


Q: 求[1, 10, 11, -1,'-5',12, 13, 14, 15, 2, 3, 4, 7, 8, 9]内最大值与最小值之差


// 来一个很粗糙的版本,只当传入是数组且可以隐性转为数字的
function MaxMinPlus(arr) {
  // 返回最大值与最小值之差
  return Array.isArray(arr) ? Math.max.apply(Math, arr) - Math.min.apply(Math, arr) : console.log('传入的不是数组亦或者未能解决的错误')
}
// 结果是 20
// 若是要完善的话,要考虑传入的是非数组,
//传入字符串的时候要判断,然后切割为数组..
// 都要考虑进去代码量不短


Q: 请给Array实现一个方法,去重后返回重复的字符(新数组)


var testArr = [1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3];
  Array.prototype.extraChar = function(){
      var cacheExtraChar = []; // 缓存重复出现的字符
      var that = this; // 缓存 this;
      this.map(function(item,index){
          // 怎么理解这段代码呢?
          // 就是向前往后查找一遍和从后往前查找一遍,不等就是没有重复
          // 为什么还要判断一遍缓存,是过滤缓存数组内多次写入
          (that.indexOf(item) !== that.lastIndexOf(item)) && cacheExtraChar.indexOf(item) === -1 ? cacheExtraChar.push(item) : -1;
      });
      return cacheExtraChar;
  }
testArr.extraChar(); // [1, 3, 7, 2, 4]
// 若是还需要排序就再排序下
[1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3]
.extraChar()
.sort(function(a,b){return a-b}) // [1, 2, 3, 4, 7]


Q: 一个数组中 par中存放了多个人员的信息,每个人员的信息由 nameage 构成({name:'张三',age:15}).请用 JS 实现年龄从小到大的排序;


var par = [{age:5,name:'张三'},{age:3,name:'李四'},{age:15,name:'王五'},{age:1,name:'随便'}]
var parSort = par.sort(function(a,b){
    return a.age - b.age;
})


Q: 判断一个回文字符串和同字母异序字符串


回文字符串


就是正序倒序都是一样的;


同字母异序字符串


字符串都一样,但是位置可能不一定一样,比如abcefddceabf=>return true

后者的思路就是用排序把异序扭正


普通版


// 回文判断 , 比如用 abcba
var isPalindromes = function(params){
  params = params.toString().toLowerCase()
  return params === params.split('').reverse().join('');
}
// 同字母异序判定,比如`abcefd`和`dceabf`
var isAnagram = function(str1, str2)  {
  str1 = str1.toString().toLowerCase();
  str2 = str2.toString().toLowerCase();
  return str1.split('').sort().join('') === str2.split('').sort().join('')
}


进阶版:多一些特殊字符


若是我们要去除所有非字母数字的字符,则需要用到正则


// 进阶版: isPalindromes('abc_ &b #@a')
var isPalindromes = function(params){
  // 传入参数先转为字符串且全部转为小写,最后去除多余字符比较
  params = params.toString().toLowerCase().replace(/[\W_\s]/g,'');
  console.log(params)
  return params === params.split('').reverse().join('');
}
// 进阶版同字母异序: isAnagram('ab *&cef#d','!d@ce^abf')
var isAnagram = function(str1, str2)  {
  str1 = str1.toString().toLowerCase().replace(/[\W_\s]/g,'');
  str2 = str2.toString().toLowerCase().replace(/[\W_\s]/g,'');
  return str1.split('').sort().join('') === str2.split('').sort().join('')
}


Q: JS 实现String.trim()方法;


// 原生是有 trim()方法的.我们要模拟一个;
String.prototype.emuTrim = function(){
    // 这条正则很好理解,就是把头部尾部多余的空格字符去除
    return this.replace(/(^\s*)|(\s*$)/g,'');
}
'  fsaf fsdaf f safl lllll    '.emuTrim();  //"fsaf fsdaf f safl lllll"


Q: JS 实现函数运行一秒后打印输出0-9;给定如下代码


for(var i=0;i<10;i++){
  // TODO
}


  • 解法


// 这道题涉及到作用域
for(var i=0;i<10;i++){
  setTimeout((function(i){
   return function(){
       console.log(i);
   }
  })(i),1000);
}


若是用到 ES6,那简直不能再简便了


for(let i=0;i<10;i++){
  setTimeout(function(){
       console.log(i);
  },1000);
}


Q: 实现对一个数组或者对象的浅拷贝和"深度"拷贝


浅拷贝就是把属于源对象的值都复制一遍到新的对象,不会开辟两者独立的内存区域;

深度拷贝则是完完全全两个独立的内存区域,互不干扰


  • 浅拷贝


// 这个 ES5的
function shallowClone(sourceObj) {
  // 先判断传入的是否为对象类型
  if (!sourceObj || typeof sourceObj !== 'object') {
    console.log('您传入的不是对象!!')
  }
  // 判断传入的 Obj是类型,然后给予对应的赋值
  var targetObj = sourceObj.constructor === Array ? [] : {};
  // 遍历所有 key
  for (var keys in sourceObj) {
    // 判断所有属于自身原型链上的 key,而非继承(上游 )那些
    if (sourceObj.hasOwnProperty(keys)) {
      // 一一复制过来
      targetObj[keys] = sourceObj[keys];
    }
  }
  return targetObj;
}
 // ES6 可以用 Object.assign(targeObj, source1,source2,source3) 来实现对象浅拷贝


  • 深度拷贝


// 就是把需要赋值的类型转为基本类型(字符串这些)而非引用类型来实现
// JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串,parse可以把JSON字符串反序列化为一个js对象
var deepClone = function(sourceObj) {
  if (!sourceObj || typeof sourceObj !== 'object') {
    console.log('您传入的不是对象!!');
    return;
  }
  // 转->解析->返回一步到位
  return window.JSON
    ? JSON.parse(JSON.stringify(sourceObj))
    : console.log('您的浏览器不支持 JSON API');
};



Q: this对象的理解


简言之:谁调用指向谁,运行时的上下文确定,而非定义的时候就确定;


强行绑定 this的话,可以用 call,apply,bind,箭头函数来来改变this的指向

这类的文章太多,自行搜索吧。


Q: 看到你说到 bind,能用 JS简单的模拟个么?


Function.prototype.emulateBind =  function (context) {
    var self = this;
    return function () {
        return self.apply(context);
    }
}


这个实现很粗糙,更为详细全面,考虑周全的(比如参数的处理什么的),自行谷歌.


Q:JS 的作用域是什么?有什么特别之处么?


作用域就是有它自身的上下文区域(比如函数内),内部会有变量声明提升,函数声明提升这些;


函数声明提升优于变量声明提升..


作用域有全局作用域和块级作用域(局部,比如用 let 或者单纯花括号的);


作用域会影响this的指向


坐等补充,我回答的时候,面试大佬只是 嗯..恩,恩,也不知道具体如何


Q: 怎么解决跨域问题,有哪些方法,


我一般用这三种,cors,nginx反向代理,jsonp


  • jsonp : 单纯的 get 一些数据,局限性很大,就是利用script标签的src属性来实现跨域。
  • nginx 反向代理: 主要就是用了nginx.conf内的proxy_pass http://xxx.xxx.xxx,会把所有请求代理到那个域名,有利也有弊吧..
  • cors的话,可控性较强,需要前后端都设置,兼容性 IE10+ ,比如


  • Access-Control-Allow-Origin: foo.example // 子域乃至整个域名或所有域名是否允许访问
  • Access-Control-Allow-Methods: POST, GET, OPTIONS // 允许那些行为方法
  • Access-Control-Allow-Headers: X-PINGOTHER, Content-Type // 允许的头部字段
  • Access-Control-Max-Age: 86400 // 有效期


Q: 对于想携带一些鉴权信息跨域如何走起?比如cookie!


需要配置下 header Access-Control-Allow-Credentials:true ,具体用法看下面的nginxdemo


当然cros的配置不仅仅这些,还有其他一些,具体引擎吧,.


若是我们要用 nginx或者 express 配置cors应该怎么搞起? 来个简易版本的

  • nginx


location / {
   # 检查域名后缀
    add_header Access-Control-Allow-Origin xx.xx.com;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
    add_header Access-Control-Max-Age 86400;
}


  • express, 当然这货也有一些别人封装好的 cors中间件,操作性更强,


let express = require('express');
let app = express();
//设置所有请求的头部
app.all('*', (req, res, next) =>  {
    res.header("Access-Control-Allow-Origin", "xx.xx.com");
    res.header("Access-Control-Allow-Headers", "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");
    res.header("Access-Control-Allow-Credentials","true")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();
});


有些还会跟你死磕,除了这些还有其他姿势么,我说了一个HTML5的postMessage,

因为真心没用过,只是以前查阅的时候了解了下,只能大体点下

这货用于iframe 传递消息居多, 大体有这么两步步


  • window打开一个实例,传递一个消息到一个x域名
  • x 域名下监听message事件,获取传递的消息


这货的兼容性没那么好,而且没考虑周全下容易遭受 CSRF 攻击


Q: 对于XSSCSRF 如何防范


这里就不说概念性的东西了


  • XSS的防范


  • 我能想到的就是转义<>这些造成代码直接运行的的标签..轮询或者正则替换
  • 而面试官说这种的效率最低下,我回来仔细找了找相关资料好像没有更优方案,有的留言,
  • 若是有用到 cookie,设置为http-only,避免客户端的篡改


  • CSRF的防范一般这几种
  • 验证码,用户体验虽然不好,,但是很多场合下可以防范大多数攻击
  • 验证 HTTP Referer 字段,判断请求来源
  • token加密解密,这种是目前很常用的手段了,


任何防范都有代价的,比如验证码造成的体验不好,token滥用造成的性能问题,轮询替换造成的响应时间等


Q: 描述下cookie,sessionStorage,localStorage的差异..


  • cookie : 大小4KB 左右,跟随请求(请求头),会占用带宽资源,但是若是用来判断用户是否在线这些挺方便
  • sessionStoragelocalStorage大同小异,大小看浏览器支持,一般为5MB,数据只保留在本地,不参与服务端交互.


  • sessionStorage的生存周期只限于会话中,关闭了储存的数据就没了.
  • localStorage则保留在本地,没有人为清除会一直保留


Q: javascript的原型链你怎么理解?


原型链算是 JS 内一种独有的机制,


所有对象都有一个内置[[proto]]指向创建它的原型对象(prototype)


原型链的基本用来实现继承用的


Q: javascript里面的继承怎么实现,如何避免原型链上面的对象共享


我在写的时候,用了两种,一个是 ES5和 ES6的方案


  • ES5:寄生组合式继承:通过借用构造函数来继承属性和原型链来实现子继承父。


function ParentClass(name) {
      this.name = name;
    }
    ParentClass.prototype.sayHello = function () {
      console.log("I'm parent!" + this.name);
    }
    function SubClass(name, age) {
      //若是要多个参数可以用apply 结合 ,解构
      ParentClass.call(this, name);
      this.age = age;
    }
    SubClass.prototype = Object.create(ParentClass.prototype);
    SubClass.prototype.constructor = SubClass;
    SubClass.prototype.sayChildHello = function (name) {
      console.log("I'm child " + this.name)
    }
    let testA = new SubClass('CRPER')
    // Object.create()的polyfill
    /*
    function pureObject(o){
        //定义了一个临时构造函数
         function F() {}
         //将这个临时构造函数的原型指向了传入进来的对象。
         F.prototype = obj;
         //返回这个构造函数的一个实例。该实例拥有obj的所有属性和方法。
         //因为该实例的原型是obj对象。
         return new F();
    }
    */


  • ES6: 其实就是ES5的语法糖,不过可读性很强..


class ParentClass {
      constructor(name) {
        this.name = name;
      }
      sayHello() {
        console.log("I'm parent!" + this.name);
      }
    }
    class SubClass extends ParentClass {
      constructor(name) {
        super(name);
      }
      sayChildHello() {
        console.log("I'm child " + this.name)
      }
      // 重新声明父类同名方法会覆写,ES5的话就是直接操作自己的原型链上
      sayHello(){
        console.log("override parent method !,I'm sayHello Method")
      }
    }
    let testA = new SubClass('CRPER')


Q: ES6+你熟悉么,用过哪些特性?


  • 箭头函数
  • 类及引入导出和继承( class/import/export/extends)
  • 字符串模板
  • Promise
  • let,const
  • async/await
  • 默认参数/参数或变量解构装饰器
  • Array.inclueds/String.padStart|String.padEnd/Object.assign


Q: let 和 const 有啥差异?


  • let 会产生块级作用域,不会造成变量提升,无法重新声明(但可以重新赋值);
  • const
  • 是常量,若是基本数据类型,具有不变性(无法重新赋值改动)
  • 引用值可以调整内部值(可能设计的时候没有考虑周全!


Q: asyncawait的用途?


  • promise 的异步变成同步运行成了可能,await 可以等到 promise 执行完毕


Q: 箭头函数的this指向谁?


肯定很多小伙伴会说指向局部方法内!!答案是错误的,


箭头函数所改变的并非把 this 局部化,而是完全不把 this 绑定到里面去;


就是 this 是取自外部的上下级作用域(但是又不是常规 function的语法糖)..


因为箭头函数里并不支持 var self = this 或者 .bind(this) 这样的写法。


Q: 问的时候你用过静态方法,静态属性,私有变量么?


静态方法是ES6之后才有这么个玩意,有这么些特点


  • 方法不能给 this引用,可以给类直接引用
  • 静态不可以给实例调用,比如 let a = new ParentClass => a.sayHello() 会抛出异常
  • 父类静态方法,子类非static方法没法覆盖父类
  • 静态方法可以给子类继承
  • 静态属性可以继承也可以被修改


看下面的代码..


class ParentClass {
      constructor(name) {
        this.name = name;
      }
      static sayHello() {
        console.log("I'm parent!" + this.name);
      }
      static testFunc(){
        console.log('emm,Parent test static Func')
      }
    }
    class SubClass extends ParentClass {
      constructor(name) {
        super(name);
      }
      sayChildHello() {
        console.log("I'm child " + this.name)
      }
      static sayHello() {
        console.log("override parent method !,I'm sayHello Method")
      }
      static testFunc2() {
        console.log(super.testFunc() + 'fsdafasdf');
      }
    }
    ParentClass.sayHello(); // success print
    let a = new ParentClass('test');
    a.sayHello() // throw error
    SubClass.sayHello(); // 同名 static 可以继承且覆盖
    SubClass.testFunc2(); // 可以继承
    let testA = new SubClass('CRPER');


私有变量可以用WeakMap模拟,也能用语义化的下划线,亦或者symbol,


所以回来只是找了下相关的资料,发现有一个比较好的模拟方案,就是WeakMap;


WeakMap可以避免内存泄露,当没有被值引用的时候会自动给内存寄存器回收了.


const _ = new WeakMap(); // 实例化,value 必须为对象,有 delete,get,has,set四个方法,看名字都知道了
class TestWeakMap {
  constructor(id, barcode) {
    _.set(this, { id,barcode });
  }
  testFunc() {
    let { id,barcode } = _.get(this); // 获取对应的值
    return { id,barcode };
  }
}


当然你也可以用Symbol来实现一个私有变量,这也是一个好法子


Q: 谈谈你对 Promise 的理解? 和 ajax 有关系么?


Promiseajax没有半毛钱直接关系.promise只是为了解决"回调地狱"而诞生的;


平时结合 ajax是为了更好的梳理和控制流程,这里我们简单梳理下..


Promise有三种状态,Pending/resolve()/reject();


一些需要注意的小点,如下


  • Pending 转为另外两种之一的状态时候,状态不可在改变..
  • Promisethen为异步.而(new Promise())构造函数内为同步
  • Promisecatch不能捕获任意情况的错误(比如 then 里面的setTimout内手动抛出一个Error)
  • Promisethen返回Promise.reject()会中断链式调用
  • Promiseresolve若是传入值而非函数,会发生值穿透的现象
  • Promisecatch还是then,return的都是一个新的 Promise(在 Promise 没有被中断的情况下)


Promise 还有一些自带的方法,比如race,all,前者有任一一个解析完毕就返回,后者所有解析完毕返回,


实现一个延时的 promise 函数, 可以用asyncawait


const delay = (time)=> new Promise((resolve,reject)=>{
  setTimeout(resolve,time)
})
// test
let testRun = async function(){
   console.log(1);
   await delay(2000);
   console.log('我两秒后才触发',3)
}
// 1 => Promise = > 3


以下这段代码的运行结果是什么?

var test = new Promise((resolve,reject)=>{
   resolve();
});
test
  .then(data => {
    // promise start
    console.log('promise first then : ', data);
    return Promise.resolve(1); // p1
  })
  .then(data => {
    // promise p1
    console.log('get parent(p1) resolve data : ', data);
    return Promise.reject(new Error('哎呀,中断了,你能奈我何!')); // p2
  })
  .then(data => {
    // promise p2
    console.log('result of p2: ', data);
    return Promise.resolve(3); // p3
  })
  .catch(err => {
    console.log('err: ', err);
    return false;
  });
// promise first then :  undefined
// get parent(p1) resolve data :  1
// err:  Error: 哎呀,中断了,你能奈我何!
// 这里在 then 返回 Promise.reject()的时候已经中断了链式调用.直接给 catch捕获到


别急,假如你不管有没有捕获到错误,最后再执行一个回调函数如何实现?


这里说的就是类似try..catch..finally,给Promise实现一个 finally;


// finally比较好加,按照现在社区的讨论,finally的特点如下:
// url : https://www.v2ex.com/t/205715
//1. 不接收任何参数,原来的value或者Error在finally里是收不到的
//2. 处理后不影响原Promise的状态,该reject还是reject,该resolve还是resolve
//3. 不影响Promise向后传递的传,resolve状态还是传递原来的value,reject状态还是传递原来的Error
Promise.prototype.finally = function (callback) {
  let P = this.constructor; // 这里拿到的是 Promise 的构造函数
  //不管前面的 Promise 是fulfilled还是rejected,都会执行回调函数callback。
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
// 用法很简单,就是可以传入一个回调函数..
// https://developers.google.com/web/updates/2017/10/promise-finally
// 这个 url 中说了 node 及 chrome 的哪些版本已经实现了 finally 及用法
// ES 2018已经把 finally 追加到 promise 的原型链中..



Q: 谈谈你对 TCP 的理解;


Q: TCP 是在哪个OSI 的哪个层!通讯过程是全双工还是半双工(单工)?

A: 传输层,全双工

Q: TCP的通讯的过程是怎么样的!

A: 整个过程是三次握手,四次挥手..

Q: 你说的没错,说说整个过程如何?

A: 举个栗子,我把 TCP 比做两个人用对讲机沟通(大白话)..三次握手就是.A1(吼叫方,客户端)想要呼叫 A2(控制室的某某,服务端)..

A1对着对讲机说"over over ,听到请回答"(第一次,请求应答) ,

A2收到回应"收到收到,你说"(第二次,确认应答)

A1开始巴拉巴拉个不停而 A2没拒绝(第三次,通讯建立)

而四次挥手则是两者确认互相倾述完毕的过程..

A1说:"控制室,报告完毕了"(第一次挥手)

A2说:"知道了,那么你废话说完就好好听我指挥,.巴拉巴拉.."(第二次挥手)

A1此时等待控制室说完毕,而控制室等回应(第三次挥手)

等到 A1回馈控制室确认都知道完毕了..(第四次挥手),


以上都是瞎掰,可能有些地方描述不当,笑笑就好了


TCP没有百分百建立成功的,会造成链接失败的情况有很多..


比如长时间没应答(A1吼了半天没有反应或者 A2应答了而 A1不再鸟它)..亦或者丢包(对讲机也没了);


TCP 协议相关的文章网上很多,若是要更加全面的了解该协议请自行引擎..


我建议阅读<<TCP-IP详解卷1~卷3>>,这个是网络圣经,很厚,我只看了一丢丢..


Q: TCP 你了解了,那么 OSI 七层协议和五层网络架构应该知道吧?


对于这类的问题我也只能大体点了下,毕竟不是专攻网络这块的,


OSI 七层涵盖:物理层,数据链路层,网络层,传输层,会话层,表示层,应用层;


五层模型就是"会话,表示,应用层"同为一层;


Q: DNS 的大体的执行流程了解么,属于哪个层级?工作在哪个层级?


DNS 属于应用层协议, 至于TCP/UDP哪一层上面跑,看情况 , 大体的执行流程是这样的;


DNS 默认端口是53,走 UDP


  1. 优先读取浏览器缓存
  2. 其次系统的缓存
  3. 都没有的情况下,找本地hosts文件(比如你写了映射关系优先寻找)
  4. 再没有的情况找最近的域名解析服务器
  5. 再没有则扩大访问,最终找到根服务器,还是没有就失败了..


DNS 的解析的几个记录类型需要了解:


  • A: 域名直接到 IP
  • CNAME: 可以多个域名映射到一个主机,类似在 Github Page就用 CNAME 指向
  • MX: 邮件交换记录,用的不多,一般搭建邮件服务器才会用到
  • NS: 解析服务记录,可以设置权重,指定谁解析
  • TTL: 就是生存时间(也叫缓存时间),一般的域名解析商都有默认值,也可以人为设置
  • TXT: 一般指某个主机名或域名的说明


回来我找下相关的资料,有兴趣的可以深入了解下,传送门如下:



Q: HTTP 和 HTTPS 有何差异? 听说过 SPDY 么?


我只是粗浅的回答了下,


HTTP相对于 HTTPS来说,速度较快且开销较小(没有 SSL/TSL) 对接,默认是80端口;


HTTP容易遭受域名劫持,而HTTPS相对来说就较为安全(加密),默认端口为443。


HTTP是明文跑在 TCP 上.而HTTPS跑在SSL/TLS应用层之下,TCP上的


Q: 那么 HTTPS中的TLS/SSL是如何保护数据的,


一般有两种形式,非对称加密,生成公钥和私钥,私钥丢服务器,公钥每次请求去比对验证;

更严谨的采用 CA(Certificate Authority),给密钥签名,.


Q: 你说到对称加密和非对称加密,能说说整个流程如何运转的么(HTTPS)


  • 对称加密:
  • 双方都有同样的密钥,每次通讯都要生成一个唯一密钥,速度很快
  • 安全性较低且密钥增长的数量极快


  • 非对称加密(一般用 RSA)
  • 安全性很高,对资源消耗很大(CPU),目前主流的加密算法(基本用于交换密钥或签名,而非所有通讯内容)


  • CA(数字签名):
  • 这个是为了防止中间人给偷换了造成数据被窃取而诞生的
  • 用一些权威机构颁布的算法来签名,权威机构做中间人,通讯过程都会跟机构核对一遍


懂得真心不多,回来找了下相关资料,有兴趣可以点击看看;



Q: SPDY 听说过么.什么来的?


谷歌推行一种协议(HTTP 之下SSL之上[TCP]),可以算是HTTP2的前身,有这么些优点


  • 压缩数据(HEADER)
  • 多路复用
  • 优先级(可以给请求设置优先级)


而这些优点基本 HTTP2也继承下来了..


Q: 你对 HTTP 的状态吗了解多少,


这里列举一丢丢常见的..


  • 1XX: 一般用来判断协议更换或者确认服务端收到请求这些
  • 100: 服务端收到部分请求,若是没有拒绝的情况下可以继续传递后续内容
  • 101: 客户端请求变换协议,服务端收到确认


  • 2xx: 请求成功,是否创建链接,请求是否接受,是否有内容这些
  • 200: (成功)服务器已成功处理了请求。
  • 201: (已创建)请求成功并且服务器创建了新的资源。
  • 202: (已接受)服务器已接受请求,但尚未处理。
  • 204: (无内容)服务器成功处理了请求,但没有返回任何内容。


  • 3XX: 一般用来判断重定向和缓存
  • 301: 所有请求已经转移到新的 url(永久重定向),会被缓存
  • 302: 临时重定向,不会被缓存
  • 304: 本地资源暂未改动,优先使用本地的(根据If-Modified-Since or If-Match去比对服务器的资源,缓存)


  • 4XX: 一般用来确认授权信息,请求是否出错,页面是否丢失
  • 400: 请求出错
  • 401: 未授权,不能读取某些资源
  • 403: 阻止访问,一般也是权限问题
  • 404: 页面丢失,资源没找到
  • 408: 请求超时
  • 415: 媒介类型不被支持,服务器不会接受请求。


  • 5XX: 基本都是服务端的错误
  • 500: 服务端错误
  • 502: 网关错误
  • 504: 网关超时


Q: HTTP的请求报文是怎么样的,能大体的说下么?


HTTP 的请求报文 = 请求行 + 请求头 + 请求体;


  • 请求行: 这个好理解就是访问的方法+ 协议+ 访问的 URL 构成
  • 请求头: 这个也好理解,比如 accept,content-type,user-agent这类值键对,服务端可以直接读取的
  • 请求体: 比如 POST 提交的一个表单,我们编码后放在上面需要传递的


想深入了解的具体引擎搜索


Q: 请求报文知道,那你说说cookie是如何跟随请求的?


Cookie 就是保存在 HTTP 协议的请求或者应答头部(Cookie 是由服务端生成),这样一路漂泊,


Q: Cookie 隔离是什么,如何做;


cookie 隔离就是降低 header 的数据包含,以达到加快访问速度的目的


方案: 静态资源丢 CDN或者非主域来加载


Q: 浏览器缓存和服务端的缓存控制你了解多少,说说看?


  • Last-Modified:


  • 第一次请求资源从服务器拉取的会自动带上该属性
  • 第二次请求会跟服务端比对If-Modified-Since的时间,没变动则使用本地的(状态304)
  • 结合Expires(过期时间:缓存的载止时间),跟随请求一起发出..资源没过期拿本地,否则重新请求


  • Cache-controlHTTP1.1的东西,判断资源过期结合max-age来替代Expires[http 1.0]


  • Etag:
  • 第一次请求url 时候会给服务器上标记(一串字符串)
  • 第二次请求时候会比对服务端的If-None-Match,没有改动依旧拿缓存(304)



Q: 几个短而让我印象深刻的题


if(!("a" in window)){
    var a = 10;
}
console.log(a); // undefined
// !("a" i n window)  , 返回 true
/*
 var a;
if(!("a" in window)){
    a = 10;
}
*/
// 变种题
(function(){
 var  x = c =  b = {a:1}
})()
console.log(x.a); // error , x is not defined
console.log(c,b) // {a: 1} {a: 1}


var count = 0;
console.log(typeof count === "number"); // true , 这个不用解释了
console.log(!!typeof count === "number"); // false
// 这里涉及到就是优先级和布尔值的问题
// typeof count 就是字符串"number"
// !!是转为布尔值(三目运算符的变种),非空字符串布尔值为 true
// 最后才=== 比较 , true === "number" , return false


(function(){
  var a = b = 3;
})()
console.log(typeof a === "undefined"); // false
console.log(typeof b === "undefined"); // false
// 这里涉及的就是立即执行和闭包的问题,还有变量提升,运算符执行方向(=号自左向右)
// 那个函数可以拆成这样
(function()
  var a; /* 局部变量,外部没法访问*/
  b = 3; /* 全局变量,so . window.b === 3 , 外部可以访问到*/
  a = b;
})()
// 若是改成这样,这道题应该是对的
console.log(typeof b === "number" && b ===3
); // true



function foo(something){
  this.a = something;
}
var obj1 = {
  foo:foo
};
var obj2 = {};
obj1.foo(2)
console.log(obj1.a) // 2 ,此时的 this 上下文还在 obj1内,若是 obj1.foo 先保存当做引用再执行传参,则上下文为 window
obj1.foo.call(obj2,3); // 用 call 强行改变上下文为 obj2内
console.log(obj2.a); // 3
var  bar = new obj1.foo(4); // 这里产生了一个实例
console.log(obj1.a); // 2
console.log(bar.a); // 4;  new的绑定比隐式和显式绑定优先级更高


function fn(){
 alert(a);
 var a = 200;
 alert(a);
}
fn(); // undefined / 200 ; 涉及变量提升
alert(a); // undefined
var a;
alert(a); // undefined
var a = 300;
alert(a); // 300


var obj1= {
  name:'obj1',
  fn:function(){
    console.log(this.name);
  }
};
var obj2 = {name:'obj2'};
var obj3 = {name:'obj3'};
// 这道题主要涉及的是 this 指向的问题..
obj1.fn(); // obj1
var newFn = obj1.fn;
newFn(); // undefined, this 指向 window
newFn.call(obj2);// obj2, this 指向 obj2
obj3.fn = newFn;
/*
ƒ (){
    console.log(this.name);
  }
*/
obj3.fn(); // 这里指向的是 obj3 .所以输出 obj3



// 这道题来作为笔试题很绕,因为要回答的答案很多(脑海构思)..反正我是遇到了..
// 这道题主要考核的是对原型链继承这块的理解
function Parent(){
  this.a = 1;
  this.b = [1,2,this.a];
  this.c = {demo:5};
  this.show = function(){
   console.log(this.a + '' + this.c.demo + ':' + this.b)
  }
}
function Child(){
  this.a  = 2;
  this.change = function(){
    this.b.push(this.a);
    this.a = this.b.length;
    this.c.demo = this.a++;
  }
}
Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
// 这前面几个还算简单,继续看下去
parent.show(); // 15:1,2,1
// 因为 Child 自身没有 show 的方法,所以往原型链的上游找;
// 找到父类的,this 因为没更改,所以输出结果如下
child1.show(); // 115:1,2,1
child2.show(); // 125:1,2,1
child1.change();  // 改变一些数据,没有输出
child2.change();  // +1
parent.show(); // 15:1,2,1
child1.show(); // 55:1,2,1,11,12
child2.show(); // 65:1,2,1,11,12


// 这道题也很绕,函数递归调用的
function test(a,b){
  console.log(b);
  return {
    test:function(c){
       return test(c,a);
    }
};
// 这道题的理解,拆成这样就好理解了
/*function test(a,b){
  console.log("a:"+a,"b:"+b);
  return {
    test:function(c){
       console.log("a:"+a,"b:"+b,"c"+c);
       return test(c,a);
    }
  }
}*/
var a = test(100); // undefined, 这个是不言而喻的;
a.test(200); //  100;
a.test(300); // 100;
var b =  test(101).test(201).test(301); // undefined/101/201
var c =  test(102).test(202); // undefined / 102
c.test(302); // 202


Q:有字符串 var test='abc345efgabcab'; 请根据提示实现对应要求


  • 去掉字符串中的 a,b,c 字符 ,形成结果'345efg';


test.replace(/[abc]/g,''); // "345efg"


  • 将字符串的数字用括号括起来, 形成结果: abc[3][4][5]efg,.'


test.replace(/\d/g,'[$&]');  // "abc[3][4][5]efgabcab"
// 若是有分组则按照$1, $2, $3的形式进行引用,而 $& 则表示的是整个正则表达式匹配的内容。


  • 将字符串中的每个数字的值分别乘以2,输出:'abc6810,.'



var temp = test.split('').map(function(item){
  return /^\d$/.test(item) ? item * 2 : item;
}).join('');
// "abc6810efgabcab"


Q: 使用不少于三种方式替换文本"dream"改成"package",提供字符串"I have a dream";


  • 正则替换


// 这是最简单的代码量了..
var str = "I have a dream";
str.replace(/dream/g,"package");
// 不用正则也可以直接字符串替换
str.replace("dream","package")


  • 数组遍历更改


// 很直白的大脑回路
var str = "I have a dream";
str.split(" ").map(function(item){
 return  item === "dream" ? item = "package":item;
}).join(" ");


  • 数组查询切割法


var str = "I have a dream";
var tempArr = str.split(" "); // ["I", "have", "a", "dream"]
var removeIndex = tempArr.indexOf('dream'); // 3
tempArr.splice(removeIndex,1,"package");
var transStr = tempArr.join(" "); // "I have a package";


这类东东弄成数组还是挺好弄的


这个是留言区小伙伴提供的方法..大同小异,如下;


// 源代码
// 字符串也有数组的 slice 以及 concat 的方法..思路和数组差不多
var str = 'I haved a dream';
str.indexOf('dream') !== -1 ? str.slice(0,str.indexOf('dream')).concat('package'):str;


Q: 还有一道题目是涉及事件循环,执行优先权的..


就是 macrotaskmicrotask 相关的, 具体记不起来了,那时候给了答案虽然对了。


要说出所以然,给秀了一脸,回来找了下相关的资料;



Q: 你对基础算法这块掌握的如何,.


来,这纸给你,写个快排试试,


// 快排的大体思路是这样的,
// 找个中位值,从原数组切割出来,
// 剩下的作为两个数组,每次都去比较;
// 直到递归的结果出来, 平均复杂度O(nlog n)
function quickSort(arr) {
  //如果数组长度<=1,则直接返回
  if (arr.length <= 1) {
    return arr;
  }
  // 中间位(基准)取长度的一半向下取整
  var pivotIndex = Math.floor(arr.length / 2);
  //把中间位从原数组切割出来, splice 会改变原数组!!!!
  var pivot = arr.splice(pivotIndex, 1)[0];
  //定义两个空数组来存放比对后的值
  var left = [];
  var right = [];
  //比基准小的放在left,比基准大的放在right
  for (var i = 0 , j = arr.length; i < j; i++) {
    if (arr[i] <= pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  //递归下去  arr = [ left , pivot , right]
  // 怎么个递归法,就是比对后的数组还是会重复之前的取基准再切开比较..直到最后没有可以切了
  return quickSort(left).concat([pivot], quickSort(right));
}


Q: 写一个二分法查找


// 二分法跟快排的思路差不多,对半比较
// 这个只用于排序好数组内的查询,高低位都知道的情况下
function binSearch(target, arr, start, end) {
  var start = start || 0; // 允许从什么位置开始,下标
  var end = end || arr.length - 1; // 什么位置结束,下标
  start >= end ? -1 : ''; // 没有找到,直接返回-1
  var mid = Math.floor((start + end) / 2); // 中位下标
  if (target == arr[mid]) {
    return mid; // 找到直接返回下标
  } else if (target > arr[mid]) {
    //目标值若是大于中位值,则下标往前走一位
    return binSearch(target, arr, start, mid - 1);
  } else {
    //若是目标值小于中位值,则下标往后退一位
    return binSearch(target, arr, mid + 1, end);
  }
}
// binSearch(5,[1,2,3,4,5,6,7,8]) => 4
// 无序的数组则需要先排序好数组,否则会堆栈溢出(死循环)


这类的文章很多,有兴趣的可以阅读下面的一些文章

传送门:



Q: 设计模式你了解多少?



Q: 思维拓展题: 你有两个玻璃球,有个100米的高楼,求玻璃球在哪个楼层扔下会碎(用的次数最少);


问题的要点: 玻璃球碎(有限个数) ,确定楼层数 , 最少次数 => 就是求最优的公式

在这道题上给秀的一脸,我的第一次的思路


先折半,就变成[1-50][51-100], 那就是 1+50 = 51次 ,


面试大佬说,你用了快排的思路就肯定不是最优的..


憋了许久,想到开平方 , 这样的话,最多只要20次


然后又说给我三个球,在1000米的高楼,判断多少次,但是根据我上面的话,


开立方, , 那最多不超过30次;


至于第一次丢球的位置如何确定, 就是开平之后的值作为一个区间.


若 N 个球和 M 米的大厦,第一次丢球的高度区间就是这个了


面试大佬说这个还可以,那就暂且告一段落


,回来用万能的搜索引擎找了下..最优方案+最少次数需要考虑的东西很多,没那么简单


传送门: 知乎有人讨论了这个问题;


但是高数还老师了..这种帖子看的一脸懵逼,.抽空再好好研究下


Q: 你对优化这块了解多少?


大体常见的手段了解.


客户端着手


  • 压缩代码(JS/CSS),压缩图片
  • 合并一些小图片(css sprite)
  • 若是打包的代码尽可能切割成多个 chunk,减少单一 chunk过大
  • 静态文件采用 cdn 引入
  • HTTP的缓存头使用的合理
  • 减小第三方库的依赖
  • 对于代码应该考虑性能来编写,比如使用requestAnimationFrame绘制动画,尽可能减少页面重绘(DOM 改变)
  • 渐进升级,引入preload这些预加载资源
  • 看情况用service worker来缓存资源(比如移动端打算搞 PWA)


服务端着手


  • 带宽,域名解析, 多域名解析等
  • 页面做服务端渲染,减小对浏览器的依赖(不用客户端解析)
  • 渐进升级,比如引入 HTTP2(多路复用,头部压缩这些可以明显加快加载速度)


当然,这是这些都是很片面的点到,实际工作中去开展要复杂的多;


比如我们要多个维度去考虑的话,要去优化 DOM 的绘制时间,资源的加载时间,域名解析这些;


要全面的优化一个项目是一个大工程,


Q: MySQL有哪些索引类型? 索引的数据结构储存方式? MySQL和 MongoDB的差异


MySQL索引类型:


  • 普通索引: 就普通的类型
  • 唯一索引: 代表索引的值唯一不重复(允许有空值),相对于上面多了个UNIQUE
  • 主键索引:(创建表的跟随创建,唯一索引,不允许有空值)
  • 组合索引(就是将多个字段都建立到一个索引)


索引有利有弊,用的好加快查询速度,滥用索引会造成大量磁盘空间占用,维护性也会增多; 索引不会包含null的列;


索引的数据结构储存方式,我只简单了解过B-Tree

至于MySQL 和 MongoDB的差异;


前者是关系型数据库, 后者非关系型数据库(数据是以文档的方式储存,值为 key-value);


MySQL应用层面很广,有事务系统这些,链表查询这些都很方便.经常作为很多系统的主力数据库


MongoDB作为NoSQL,虽然有些层面不如 MySQL,但是应用层面也挺广, 比如结合前端做一些用户的概要信息的维护,一些缓存信息的维护.


em,.后端了解不多,也能点到即止,.大学的时候学过一些..都差不多还给老师,.


Q: JS时间分段


给定一个时间段和步长,枚举该时间段内步长的划分

例如:时间段3:00-5:00,步长为20分钟

那么返回的数组为

['3:00-3:20', '3:20-3:40',.]


这类问题,一般都要先梳理好思路再来写;


  • 给定字符串时间段,切割,转换为分钟
  • 跨日及跨时问题


// 这个东东我的小伙伴也写出来了.我的是在它的解答方式上加以注释和对参数的判断做了考虑
// 他的解法方案在他的 github 上 https://github.com/lyh2668/blog/issues/1 , by lyh2668
// 方便一些小伙伴的理解,以下代码包含ES6的姿势(参数默认值,剪头函数)
let inputDateRange = (date, step = 30, separator = '-') => {
  let startTime, endTime; // 开始时间和结束时间
  if (Object.prototype.toString.call(date) === '[object String]') {
    date = date.trim(); // 去除两边的空格
    var tempDate = '';
    if (separator) {
      tempDate = date.split(separator);
    } else {
      if (date.indexOf('-') !== -1) {
        tempDate = date.split('-');
      } else if (date.indexOf('~')) {
        tempDate = date.split('~');
      } else {
        console.log('您传入的也许不是一个时间段!!!');
      }
    }
    startTime = time2min(tempDate[0]); // 传入的开始时间
    endTime = time2min(tempDate[1]); //传入的结束时间
  } else if (Object.prototype.toString.call(date) === '[object Array]') {
    if (date.length === 2) {
      startTime = time2min(date[0]); // 传入的开始时间
      endTime = time2min(date[1]); //传入的结束时间
    }
  } else {
    console.log('您传入的也许不是一个时间段!!!');
  }
  // 传入的 step 是否为数字,否则截图数字部分转化
  // 为什么和 NaN 比较(自身不等性),若是传入的连正则都没法识别,那只能给默认值了
  Object.prototype.toString.call(step) === '[object Number]'
    ? (step = parseInt(step, 10))
    : parseInt(step.replace(/[W\s\b]/g, ''), 10) === NaN
      ? (step = parseInt(step.replace(/[W\s\b]/g, ''), 10))
      : (step = 30);
  // 若是开始时间大于结束时间则结束时间往后追加一天
  startTime > endTime ? (endTime += 24 * 60) : '';
  let transformDate = []; // 储存转换后的数组,时间分段
  // 开始遍历判断,用 while
  while (startTime < endTime) {
    // 如果开始时间+步长大于结束时间,则这个分段结束,否则结束时间是步长递增
    let right = startTime + step > endTime ? endTime : startTime + step;
    transformDate.push(`${min2time(startTime)}-${min2time(right)}`);
    startTime += step; // 步长递增
  }
  return transformDate;
};
// 时间转化为分钟
let time2min = time => {
  // 获取切割的
  time.indexOf(':') ? (time = time.trim().split(':')) : '';
  return time[0] * 60 + parseInt(time[1]); // 返回转化的分钟
};
// 分钟转会字符串时间
let min2time = minutes => {
  let hour = parseInt(minutes / 60); // 返回多少小时
  let minute = minutes - hour * 60; // 扣除小时后剩余的分钟数
  hour >= 24 ? (hour = hour - 24) : ''; // 若是大于等于24小时需要扣除一天得到所剩下的小时
  minute < 10 ? (minute = '0' + minute) : ''; // 小于10的都要补零
  hour < 10 ? (hour = '0' + hour) : ''; // 小于10的都要补零
  return `${hour}:${minute}`;
};
// test ,支持字符串传入时间段
inputDateRange('3:00-5:00','20d'); // ["03:00-03:20", "03:20-03:40", "03:40-04:00", "04:00-04:20", "04:20-04:40", "04:40-05:00"]
// 亦或者数组传入
inputDateRange(['3:00','5:00'],'45df.3d'); // ["03:00-03:45", "03:45-04:30", "04:30-05:00"]
// step 支持数字亦或者带特殊字符的数字
inputDateRange(['6:00','8:00'],'55df.3d'); // ["06:00-06:55", "06:55-07:50", "07:50-08:00"]
inputDateRange('3:00-5:00',60); // ["03:00-04:00", "04:00-05:00"]



Q: Vue-Router的两种模式主要依赖什么实现的


  • hash主要依赖location.hash来改动 URL,达到不刷新跳转的效果.每次 hash 改变都会触发hashchange事件(来响应路由的变化,比如页面的更换)


  • history主要利用了 HTML5historyAPI 来实现,用pushStatereplaceState来操作浏览历史记录栈


Q: MVVM 和 MVC 的差异? 听说过 MVP?


这类的文章好多,三个开发模式的诞生都有前后,不是同时出现的.

传送门:



Q: 求100~999的所有"水仙花"数, 就是三位数中各数字的立方和等于自身,比如153=1^3+5^3+3^3



  • 常规遍历法


function threeWaterFlower(rangeStart, rangeEnd) {
  var temp = [];
  rangeStart = rangeStart || 100;
  rangeEnd = rangeEnd || 999;
  for (var i = rangeStart; i <= rangeEnd; i++) {
    var t = i.toString().split('');
    Math.pow(t[0], 3) + Math.pow(t[1], 3) + Math.pow(t[2], 3) == i
      ? temp.push(i)
      : '';
  }
  return temp;
}
threeWaterFlower(100,999); // [153, 370, 371, 407]
threeWaterFlower(); // [153, 370, 371, 407]


  • 拓展写法,ES6版+不定花数,不折腾不舒服版本


let manyWaterFlower = (rangeStart = 100, rangeEnd = 999, flower = 3) => {
  let temp = [];
  for (let i = rangeStart; i <= rangeEnd; i++) {
    let t = i
    .toString()
    .split('')
    .map(item => Math.pow(item, flower))
    .reduce((cur,next)=> parseInt(cur)+parseInt(next));
    let transformT = parseInt(t, 10);
    transformT == i ? temp.push(i) : '';
  }
  return temp;
}
manyWaterFlower(); // [153, 370, 371, 407]
manyWaterFlower(100,10000,4); // [1634, 8208, 9474]
manyWaterFlower(100,10000,5); // [4150, 4151]


这种是穷举遍历,若是要快一点呢(考虑的周全一点呢),以及传参范围的矫正


相信小伙伴都看得懂,我已经尽量注释了..


let manyWaterFlower = (flower = 3,rangeStart, rangeEnd ) => {
  let temp = [];// 缓存所有找到的花值
  // 这一段就是填充开始循环的范围,处理完毕后转为数字,推荐的开始值
  let flowerRecommandStart = Number(
    ''.padStart(flower, '0').replace(/^(\d{1})/g, '1')
  );
  let flowerRecommandEnd = Number(''.padStart(flower, '9'));
  // 判断是否传入开始值
  if (rangeStart) {
    rangeStart > flowerRecommandStart
      ? (rangeStart = flowerRecommandStart)
      : rangeStart;
  } else {
    rangeStart = flowerRecommandStart;
  }
  // 判断是否有传入结束值
  if (rangeEnd) {
    rangeEnd > flowerRecommandEnd ? (rangeEnd = flowerRecommandEnd) : rangeEnd;
  } else {
    rangeEnd = flowerRecommandEnd;
  }
  // 若是初始值大于结束值
  if (rangeStart > rangeEnd) {
    rangeEnd = flowerRecommandEnd;
  }
  for (let i = rangeStart; i <= rangeEnd; i++) {
    let t = i
      .toString()
      .split('')
      .map(item => Math.pow(item, flower))
      .reduce((cur, next) => parseInt(cur) + parseInt(next));
    let transformT = parseInt(t, 10);
    transformT == i ? temp.push(i) : '';
  }
  return temp;
};
console.time('manyWaterFlower');
manyWaterFlower(4)
console.timeEnd('manyWaterFlower');
// VM34013:4 manyWaterFlower: 8.112060546875ms ,这个是跑出来的时间
用上个例子的代码,从100到9999的,我们跑一下看看
console.time('manyWaterFlower');
manyWaterFlower(100,9999,4)
console.timeEnd('manyWaterFlower');
// VM3135:4 manyWaterFlower: 10.51904296875ms
// 我的 MBP 跑10花直接卡死,跑7花有点久,
console.time('7 flower')
manyWaterFlower(7);
console.timeEnd('7 flower')
// 7 flower: 6489.608154296875ms
// 8 花 CPU 的风扇狂叫,.
console.time('8 flower')
manyWaterFlower(8);
console.timeEnd('8 flower')
// VM644:3 8 flower: 68010.26489257812ms
// 对了我们还没有考虑数值溢出的问题..因为正整数在 JS 的范围是有限的.
// 有兴趣的小伙伴可以自行完善


Q: 请使用递归算法在 TODO 注释后实现通过节点 key 数组寻找 json 对象中的对应值


比如console.log(findNode(['a1', 'b2'], data)) === data.a1.b2


// 请使用递归算法在 TODO 注释后实现通过节点 key 数组寻找 json 对象中的对应值
var data = {
  a1: {
    b1: 1,
    b2: 2,
    b3: {
      b4: 5
    }
  },
  a2: {
    b1: 3,
    b2: 4
  }
};
function findNode(inPath, inData) {
  // TODO
  // 判断传入的是否是一个数组
  if (Array.isArray(inPath)) {
    // 当长度为1的时候寻找该 key 是否有值,有则返回,无则返回-1
    if (inPath.length === 1) {
      return inData[inPath[0]] ? inData[inPath[0]]: -1;
    }else{
     return findNode(inPath.slice(1), inData[inPath[0]]);
    }
  } else{
    console.log('您传入的不是一个数组')
  }
}
console.log(findNode(['a1', 'b2'], data)); // 2
console.log(findNode(['a1', 'b3','b4'], data)); // 5


  • 来个拓展版?支持字符串或数组传入;findNode('a1.b2',data)?


var data = {
  a1: {
    b1: 1,
    b2: 2,
    b3: {
      b4: 5
    }
  },
  a2: {
    b1: 3,
    b2: 4
  }
};
// 判断格式
function isType(params) {
  let type = Object.prototype.toString.call(params);
  if (type === '[object String]') {
    params = params.split('.');
    return params;
  }
  if (type === '[object Array]') {
    return params;
  }
}
function findNode(inPath, inData) {
  inPath = isType(inPath);
  // 判断传入的是否是一个数组
  if (Array.isArray(inPath)) {
    // 当长度为1的时候寻找该 key 是否有值,有则返回,无则返回-1
    if (inPath.length === 1) {
      return inData[inPath[0]] ? inData[inPath[0]]: -1;
    }else{
     return findNode(inPath.slice(1), inData[inPath[0]]);
    }
  } else {
    console.log('您传入的不是一个数组');
  }
}
console.log(findNode(['a1', 'b2'], data)); // 2
console.log(findNode('a1.b3.b4', data)); // 5


Q: webpack 是什么?webpack 常见的优化手段有哪些;


webpack 是一个资源处理工具,它的出现节省了我们的人力和时间; 可以对资源打包,解析,区分开发模式等等,


常见的优化手段:


  • 分离第三方库(依赖),比如引入dll
  • 引入多进程编译,比如happypack
  • 提取公共的依赖模块,比如commonChunkPlugin
  • 资源混淆和压缩:比如UglifyJS
  • 分离样式这些,减小bundle chunk的大小,比如ExtractTextPlugin
  • GZIP 压缩,在打包的时候对资源对齐压缩,只要部署的服务器能解析即可..减少请求的大小
  • 还有按需加载这些,一般主流的框架都有对应的模块懒加载方式.
  • 至于tree shaking目前webpack3/4已经默认集成


Q: 从你输入一个 URL 到页面渲染的大体过程,


大体过程是这样的,想了解很细致的可以自行引擎;


  1. IP->DNS(浏览器=>系统缓存=>DNS 服务器)->域名解析完成(这一步不用太多解析吧)
  2. TCP 协议走完->HTTP(S) 协议->缓存->(分析请求头)-> 回馈报文
  3. 请求文档下来->DOM->CSSDOM->静态资源下载->render(绘制文档)->js 解析
  4. 用户看到页面


Q: Vue 的组件的通讯手段有哪些..


  • 父-> 子: props
  • 子-> 父: on+emit
  • 父<>子: on.sync(语法糖)来的
  • 兄弟 : event bus | vuex


Q: Vuex你怎么理解?


vuex是一个状态管理容器(你也可以理解为全局变量),数据的流向是是单向数据流,

且数据并不具有持久化的特性(默认情况下刷新就重置所有状态);


里面的一些数据乃至方法,可以大致理解为 vue 的一些特性,比如


Vuex Vue
state data
getter computed
mutation/actions methods


至于单向数据流(全局单例模式)怎么理解


state只能给mutation(同步操作) 改动, action只能反馈给mutation,可以进行异步操作(比如和后端交互拉取数据), state能触发 render,action能用dispatch分发..如图



目录
相关文章
|
5天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
71 29
|
3天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
10 3
|
5天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
18 4
|
3天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
9 2
|
5天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
15 3
|
5天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
20 3
|
5天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
13 2
|
7天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
19 3
|
10天前
|
运维 前端开发 JavaScript
前端技术深度探索:从基础到现代的演进
【10月更文挑战第23天】前端技术深度探索:从基础到现代的演进
20 1
|
10天前
|
存储 缓存 前端开发
前端技术探索:从基础到进阶的旅程
【10月更文挑战第23天】前端技术探索:从基础到进阶的旅程
6 0