前端面试题4天训练营

第一天非常有必要和大家聊的三个话题

1. 大前端时代需要掌握的技术栈

HTML5

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

语义化标签类

<article></article>、<footer></footer>、<header></header>

音视频处理

本次升级最大的亮点就是audio、video，新媒体解决方案代替了传统的flash。这可以说是html5最大的亮点。

canvas / webGL
history API

vue\react框架中做spa单页应用的话会用到路由，路由分为hash和browser，其中browser路由就是利用提供的histor API实现的

requestAnimationFrame

https://segmentfault.com/a/1190000020639465?utm_source=tag-newest

地理位置

getCurrentPosition() 方法来获得用户的位置

web scoket

………….

CSS3

常规
动画
盒子模型
响应式布局

………….

JavaScript

ECMAScript 3/5/6/7/8/9
DOM
BOM
设计模式
底层原理
- 堆栈内存
- 闭包作用域 AO/VO/GO/EC/ECSTACK-
- 面向对象OOP
- THI
- EventLoop
- 浏览器渲染原理
- 回流重绘

………….

网络通信层

AJAX / Fetch / axios
HTTP1.0 / 2.0
TCP
跨域处理方案
性能优化

Hybrid或者APP再或者小程序

Hybrid
uni-app
RN
Flutter
小程序 MPVUE
Weex
PWA

…………..

工程化方面

webpack
git
linux / nginx

…………..

全栈方面

node
express
koa2
mongodb
nuxt.js / next.js

…………..

框架方面

Vue
- 基础知识
- 核心原理
- vue-router
- vue-cli
- vuex
- element ui
- vant
- cube
- SSR
- 优化

React
- 基础知识
- 核心原理
- react-router-dom
- redux
- react-redux
- dva
- umi
- mobix
- antd
- antd pro
- SSR
- 优化

游戏方向

可视化或者AI方向

……………

3. BAT/TMD这种大公司到底是怎样面试的

一个问题就知道你会不会CSS了，(￣ε(#￣)☆╰╮(￣▽￣///)

什么是标签语义化？

用合理的标签干合适的事情

都有哪些标签，都是啥意思？

有块状标签、有行内标签、有行内块状标签，分部是如下：

块级标签和行内标签的区别？

行内元素：相邻的行内元素在同一行，行内元素的宽度、高度、内边距的 top/bottom和外边距的top/bottom都是不可改变的，但 padding 和 margin 的 left 和 right 是可以设置的。常见的行内元素有：span、a、br、em、i… 块级元素：独占一行，他们的宽度、高度、内边距和外边距都可控制。常见的块级元素有：table、form、ul li、div、p、h1-6、article、header、footer….行内块元素（inline-block）：即融合了行内元素和块级元素的特性，即在一行显示，又能设置宽高。常见的行内块元素有：img、input、button…..

如何转换
display除了这几个值还有哪些？

display: table display: flex

display:none
- 让元素隐藏，你可以怎么做
- display:none和visibility:hidden的区别?
- opacity的兼容处理？ (用 filter)
- filter(滤镜)还能做哪些事情？（修改所有图片的颜色为黑白: filter: grayscale(100%);）
display:flex
- 项目中你什么时候用到了flex
- 除了这种方式能居中还有哪些？
- 响应式布局还可以怎么做？
- 都有哪些盒子模型

o(╥﹏╥)o

好了，咱们换下一个题….

说一下，你自己感觉自己擅长哪些？

(#^.^#) 没事的，在我们眼里，你擅长的点我比你更擅长，如果不是，没关系，后面还有P7/P8们兜着呢！^_^

说一下，这个需求怎么做？
还有吗 (￣▽￣)／
还有吗 (￣▽￣)／
……
那说一下，你感觉这几种方式哪个更好，各自有啥问题……

总之一句话，不把你问“死”，算我这次面试失败！！！

“ 在面试介绍的时候要突出自己精心准备的面试题：在哪些公司呆过，自己擅长哪些技术栈，平时有什么爱好，比较擅长原生js，比较擅长promise设计模式 ”

几道前端经典的面试题

1.掌握盒子水平垂直居中的五大方案

定位：三种

第一种：需要知道具体宽高，才能用margin left top设置值

body {
  position: relative;
}
.box {
  width: 100px;
  height: 50px; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -50px;
}

第二种：有宽高，不需要考虑具体是多少

.box {
  width: 100px;
  height: 50px; 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

第三种：可以不设置宽高

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

display: flex

/* 父标签 */
body{
  display: flex;
  justify-content: center;
  align-items: center;
}

javascript

let HTML = document.documentElement,
    winW = HTML.clientWidth,
    winH = HTML.clientHeight,
    boxW = box.offsetWidth,
    boxH = box.offsetHeight;
  box.style.position = "absolute";
  box.style.left = (winW - boxW) / 2 + 'px';
  box.style.top = (winH - boxH) / 2 + 'px';

display: table-cell

body {
  display: table-cell; /* */
  vertical-align: middle;
  text-align: center;
  /* 父级需要固定宽高 百分比不算固定宽高*/
  width: 500px;
  height: 500px;
}
.box {
  display: inline-block;
}

2.关于CSS3中盒模型的几道面试题

标准盒子模型

IE盒子模型（怪异盒子模型）

border

FLEX盒模型

3.掌握几大经典布局方案

圣杯布局
双飞翼布局

即左右固定，中间自适应
这里看有道上面的例子

4.移动端响应式布局开发的三大方案

media（pc端 + 移动端用同一套代码时）
rem （pc端用px ，移动端用rem）
flex
vh / vw （相当于百分比，称为百分比布局，vh把视窗高度分为100分，1vh就是1%，vw同理）

课后作业

使用css，让一个div消失在视野中，发挥想象力？
（display:none; visibility:hidden;它们的区别。透明度opacity又涉及到哪些内容。-margin也可以，-margin涉及到双飞翼出来了）
请说明z-index的工作原理，适用范围？

文档流
定位

（这个问题主要问的就是文档流，z-index的原理就是建立不同的文档流，建立文档流不同层级，脱离文档流有几种方式？float、定位、transform、animate css3的transfrom动画为什么好，帧性能的优化点，js动画是要随时改变样式的，会引发很多次回流，css3是会回到最后一帧，只引发一次回流）
3. 谈谈你对HTML5的理解？

如何使一个div里面的文字垂直居中，且该文字的大小根据屏幕大小自适应？
不考虑其它因素，下面哪种的渲染性能比较高？

.box a{
....
}

a{
....
}

css浏览器渲染机制，选择器从右向左查询，第二种只找所有的a，第一种先找所有a，再找box下所有a，渲染了2次，二次筛选。

第二天面试题

对象(数组)的深克隆和浅克隆（头条）

let obj = {
    a: 100,
    b: [10, 20, 30],
    c: {
        x: 10
    },
    d: /^\d+$/
};
// let obj2 = JSON.parse(JSON.stringify(obj)); => 弊端  正则、函数、new Date() 这些类型的值都转化成了字符串，这种深克隆的处理，大部分是没有问题的。如下：
JSON.stringify({a:/^\d+$/})
//"{"a":{}}"

JSON.stringify({a:function(){}, b:'xxx'})
// "{"b":"xxx"}"

JSON.stringify({a:new Date()})
// "{"a":"2020-02-27T13:04:50.963Z"}"

JSON.stringify(obj)
// "{"a":100,"b":[10,20,30],"c":{"x":10},"d":{}}"
//这里就是把所有的数据都变成字符串，把所有的值重新开辟新的空间，跟原来没有关系。

深克隆

//=>深克隆
function deepClone(obj) {
    if (typeof obj !== "object") return obj;
    if (obj instanceof RegExp) return new RegExp(obj);
    if (obj instanceof Date) return new Date(obj);
    let cloneObj = new obj.constructor;
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(obj[key]);
        }
    }
    return cloneObj;
}

BAT笔试题中几道关于堆栈内存和闭包作用域的题

let a={}, b='0', c=0;  
a[b]='加菲';
a[c]='培训';  
console.log(a[b]);
// 对象中属性名不能重复，数字属性名=对象属性名
//衍生=> 对象和数组的区别
---------------------
//example 2
let a={}, b=Symbol('1'), c=Symbol('1');  
a[b]='加菲';
a[c]='培训';  
console.log(a[b]);
// 衍生 => 自己实现一个Symbol


---------------------
//example 3
let a={}, b={n:'1'}, c={m:'2'};  
a[b]='加菲';
a[c]='培训';  
console.log(a[b]);
//衍生=> Object.prototype.toString项目中的应用 和 valueOf的区别

如图：
obj里面存{name:’xxx’}转化为”[object Object]”这个字符串，通过toString()转化，可以知道，所有对象，不管存的是什么，toString()之后的结果都是字符串”[object Object]”
堆内存：存储引用类型值的空间；
栈内存：存储基本类型值和执行代码的环境。

var test = (function(i){
    return function(){
        alert(i*=2);
    }
})(2);
test(5);

答案：’4’ alert弹出来的都要转化为字符串
如图：

这里test等于的是一个立即执行函数，所以函数执行，返回一个函数，返回给test的是一个引用地址（十六进制）
在右侧堆中，对象存储是键值对，函数存储的是要执行的代码（以字符串格式），作为对象还存除了prototype length等
闭包不叫内存泄露，只叫保存不销毁

var a=0, b=0;
function A(a){
    A=function(b){
        alert(a+b++);
    };
    alert(a++);
}
A(1);
A(2);

let i = 10;
console.log(5+i++);
// 15   i 11

let i = 10;
console.log(5+(++i));
// 16   i 11

如图:

‘1’ ‘4’

3.一道关于面向对象面试题所引发的血案（阿里）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

function Foo() {
    getName = function () {
        console.log(1);
    };
    return this;
}
Foo.getName = function () {
    console.log(2);
};
Foo.prototype.getName = function () {
    console.log(3);
};
var getName = function () {
    console.log(4);
};
function getName() {
    console.log(5);
}
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

// 2411233

变量提升：在当前这个执行上下文中，所有代码执行之前，把所有带var 的提前声明，带function 提前声明+定义(赋值)。

4.一道面试题让你彻底掌握JS中的EventLoop（头条）

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

课后作业

第一题：写出下面代码输出的结果

function A(){
    alert(1);
}
function Func() {
    A=function(){
       alert(2);
    };
    return this;
}
Func.A=A;
Func.prototype={
    A:()=>{
       alert(3);
    }
};
A();
Fn.A();
Fn().A();
new Fn.A();
new Fn().A();
new new Fn().A();

第二题：写出下面代码输出的结果

var x=2;
var y={
    x:3,
    z:(function(x){
        this.x*=x;
        x+=2;
        return function(n){
            this.x*=n;
            x+=3;
            console.log(x);
        }
    })(x)
};
var m=y.z;
m(4);
y.z(5);
console.log(x, y.x);

第三题：写出下面代码输出的结果

var a = ?;
if (a == 1 && a == 2 && a == 3) {
    console.log(1);
}

第四题：写出下面代码输出的结果

var x=0,
    y=1;
function fn(){
    x+=2;
    fn=function(y){
        console.log(y + (--x));
    };
    console.log(x, y);
}
fn(3);
fn(4);
console.log(x, y);

第五题：写出下面代码输出的结果

setTimeout(() => {
    console.log(1);
}, 20);
console.log(2);
setTimeout(() => {
    console.log(3);
}, 10);
console.log(4);
console.time('AA');
for (let i = 0; i < 90000000; i++) {
    // do soming
}
console.timeEnd('AA'); //=>AA: 79ms 左右
console.log(5);
setTimeout(() => {
    console.log(6);
}, 8);
console.log(7);
setTimeout(() => {
    console.log(8);
}, 15);
console.log(9);