前端面试问题
本套面试题由浅入深提问；
测试分支：externalChannels-frontEnd-test
测试文件：frontEndTest.html
底层原理
- javascript数据类型有哪几种？
null、undefiend、number、string、boolean、object五种类型；
- 如何确定一个值到底是什么类型，例如使用instanceof运算符；
1.三种方法确认值是什么类型，typeof、instanceof、Object.prototype.toString
2.typeof运算符可以返回一个值的数据类型（number、string、boolean、object），object对象typeof无法区分。
3.instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上（new String() instanceof String）。
4.Object.prototype.toString >>Object.prototype.toString('') =>[object Object
- null和undefined分别代表意思？null == undefined？两个等于和三个等于的区别？
null和undefined分别代表空值和未定义、null == undefined=true、比较运算符和相等运算符
- 什么是作用域？作用域有那几种？作用域链有什么特点？
var i = 5;
function func() {
console.log(i);
if (true) {
var i = 6;
}
}
func(); // undefined
作用域：它是指对某一变量和方法具有访问权限的代码空间
作用域：作用域分为全局作用域和局部作用域
作用域链的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找
// 作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c(); //3
}
b();
使用Es6的什么属性能解决作用域问题？
let const 配合 块级作用域
- 什么是闭包？什么场景下使用闭包函数？使用ES6的属性能解决？
什么是闭包：闭包是指有权访问另外一个函数作用域中的变量的函数
闭包函数：避免全局污染、生成一个新的函数作用域
function outer() {
var result = [];
for （var i = 0； i<10; i++）{
result[i] = function (num) {
return function() {
console.info(num); // 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样
}
}(i)
}
return result
}
使用ES6的属性能解决:let const
- 什么是原型链？原型链的最顶层为什么？
在javascript中，实例对象与原型之间的链接，叫做原型链。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念
原型链的最顶层：为null
- 原型链具体能干什么？
继承
- ES6语法可以实现继承？
class 中的 extends
- this指向问题？
function test(){
var user = "中欧财富";
console.log(this.user); //undefined
console.log(this); //Window
}
test();
-----------------
var test1 = {
user:'中欧财富',
fn:function(){
console.log(this.user);
}
};
test1.fn(); //中欧财富
----------------
var test2 = {
user:'中欧财富',
fn:function(){
console.log(this.user);
}
};
const tempFn = test2.fn;
tempFn(); //window
//怎么解决this指向的问题？如何用ES6解决？
ES5解决方案：闭包
ES6解决方案：箭头函数、bind
- 聊一聊浅拷贝和深拷贝？
浅拷贝使用方法有：Object.assign()、Array.prototype.slice、扩展运算符..
- 深拷贝实现，递归实现深拷贝
function cloneObject(obj){
var newObject = {};
if(typeof obj !== object){
return obj;
}else{
for(var attr in obj){
newObject = cloneObject(obj[attr]);
}
}
return newObject;
}
- call和apply的区别，它们的作用是什么？
call：接受多个参数、apply接受一个数组；作用：指定执行的上下文以及继承；
事件
- 什么是事件委托？事件委托的应用场景？
- 事件委托（delegate）也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上
- 事件委托的应用场景:处理多个相同元素绑定同一个事件，可以提升到父级元素处理
- 什么是事件冒泡和事件捕获
1.事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
2.事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
浏览器
- 浏览器解析网页的工作原理？
- 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
- 解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
- 如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
- JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。
- 浏览器渲染引擎工作原理？
- 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
- 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
- 布局：计算出渲染树的布局（layout）。
- 绘制：将渲染树绘制到屏幕。
- 重流和重绘
- 渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。
- 页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。
- 重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流。
- 什么是CORS，怎么解决CORS问题？
- CORS（跨域资源共享）、服务端配置
Access-Control-Allow-Origin:*- 使用其他方式解决JSONP
- 使用代理
- http请求有那几种？常用的有哪几种？Get和Post的区别？Get和POST应用？
- http请求有那几种:GET、HEAD、POST、PUT、DELETE、OPTIONS
- 常用的有哪几种:GET和POSTo，URL对链接有字符限制；POST：表单请求，对参数没有限制；
- Get和POST应用:Get一般用于无敏感并且参数少的功能、POST比GET稍微安全一点，可以用于登录、购买...
- 是否了解发送请求的预检请求，每一次请求一个接口总会多发出一个请求；
预检查接口主要去询问服务器是否支持当前请求，如果不支持网页会直接报错，如果支持直接返回结果。
- history的push和history的replace区别，主要应用在那一块？
- push a->b->c ; 返回c->b-a;
- replace a-b-c; c->返回到更上级；
存储
- cookie与Storage，什么是cookie?什么情况下使用Storage？
cookie使用一般在于老版本的浏览器使用，常见用的最多的是PC端，cookie容量4kb（保存数量15～20个左右），主要用于保存用户个性化信息，购物车
Storage 能存储大量的数据，适用于前端；
异步操作
- js处理异步操作的有那几种方式？举例：传统的回调函数；
- 传统的回调函数
- 事件监听（Events）
- Promise
- generator+回调函数
- generator+Promise
- async/await
怎么做前端的SEO
- 设置TDK和服务端SSR的渲染；
ES6
- 说一下自己常用的es6功能？
const、let、箭头函数、字符串模版、class、extends.....
- export和export default的区别？
export default xxx
import xxx from './'
export xxx
import {xxx} from './'
业务
- 能否讲解一下你具体负责的这一块的业务流程吗？
- 如果交给你一个需求，你应该怎么去入手？
- 日常开发中解决了什么业务难点问题？怎么解决的能细说吗？
- 日?？⒅腥绾稳ヅ挪楹投ㄎ晃侍?？
- 请问一下你们公司的发布前端应用的流程？
- 如何优化PC端或者移动端的性能？从那方面入手的？
上层应用（框架）
- 什么是SPA（单页面应用程序），什么是MPA（多页面应用程序）？一般用于？
MPA:由多个完整页面构成、SAP:一个外壳页面和多个页面片段构成
MPA：一般适用于PC（利于SEO）、SPA：一般适用于移动端
- 市面上的vuex、mobx、redux...数据状态管理库作用是什么？它们的原理是什么？
根据使用者情况详细了解；
- 市面上的vue-router和react-router是通过什么实现的？
通过hash（location.hash+hashchange）、history（history.pushState()+popState）
- 怎么对路由进行按需加载？
react使用react-loadabl进行路由按需加载、import、require.ensure
- 如果我想做权限管理，应该怎么实现？
路由守卫（路由拦截）中处理。
- 聊聊你们常用的基于HTTP网络请求库？ 网络请求库中的发送http请求前事件和数据返回事件的应场景？
网络请求库：axios、fetch
发送http请求前事件和数据返回事件：如：发送前合并参数、数据返回后对数据进行处理等等...
组件
- 现代的前端框架React、Vue以及Angular为什么都要使用组件化的概念？
高复用、可扩展、易管理
- 在开发过程中有对项目中的组件进行分类吗，比如：改变按钮颜色的组件，我们称为功能性组件，请问你们也有类似的组件分类吗？
ui组件、功能组件、业务组件
简单算法
- 数组去重
var arr = ['1', '1', '2', '3', '4', '5', '6', '7', '7', '8'];
//方案一
function unique(arr) {
var _tempArr = [];
for (var i = 0; i < arr.length; i++) {
if (_tempArr.indexOf(arr[i]) === -1) {
_tempArr.push(arr[i]);
}
}
return _tempArr;
}
console.log(unique(arr));
//方案二
function unique1(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
console.log(unique1(arr));
//还有很多种排序方案
- 数据倒序
var arr = ['a', '1', '2', '3', '4', '5', '6', '7', '7', 'z','s'];
//方案一
function sort(arr) {
var _tempArray = [];
for (var i = arr.length - 1; i >= 0; i--) {
_tempArray.push(arr[i]);
}
return _tempArray;
}
console.log(sort(arr));
//方案二
function sort1(arr) {
for (var i = 0; i < (arr.length / 2); i++) {
var temp = arr[i];
arr[i] = arr[arr.length - i - 1];
arr[arr.length - i - 1] = temp;
}
return arr;
}
console.log(sort1(arr));
