前端面试八股文（超详细）

本文介绍: Jav aSc rip t1. Prom i s e 的理解Prom i s e 是一种为了避免回调地狱的异步解决方案 2. Promi s e 是一种状态机： p end in g（进行中）、ful fill e d（已成功）和reje cted（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。一、Promise是什么？Promise是最早

Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： p end in g（进行中）、ful filled（已成功）和rejected（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

回调地狱

回调函数中嵌套回调函数的情况就叫做回调地狱。
回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。

ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

promise是为解决异步处理回调金字塔问题而产生的

	var	let	const
作用域	函数作用域	块作用域	块作用域
声明提升	能	不能	不能
重复声明	能	不能	不能
全局声明时为window对象的属性	是	不是	不是

function f1(){
    var n=999;
    function f2(){
        alert(n); // 999
    }
}

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

function unique(arr) {
        var array= arr;
        var len = array.length;

    array.sort(function(a,b){   //排序后更加方便去重
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //递归loop，然后数组去重
        }
    }
    loop(len-1);
    return array;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

//语法
标签名 {
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	...
}

//语法
.类名 {
	属性1.属性值1;
	属性2.属性值2;
	属性3.属性值3;
	...
}

#id名 {
	属性1:属性值1;
	...
}

* {
	属性名1: 属性名1;
	...
}

<style>
	元素1 元素2 { 样式声明 }
</style>
#元素2只要包含在元素1里面即可，无论是儿子还是孙子

元素1>元素2 {样式声明}

标签1,标签2 {样式声明}

#写的时候按照顺序来
a:link	#选择未被访问的链接
a:visited	#选择所有已经被访问过的链接
a:hover		#选择鼠标指针位于其上的链接
a:active	#选择活动链接（鼠标按下未弹起的链接）

input:foucus {
	background-color: red;
}

利用flex的`alignItems:center`垂直居中，`justifycontent:center`水平居中

2 利用相对定位和绝对定位的`margin:auto`

相对定位下，使用绝对定位将上下左右都设置为0，再设置`margin:auto`即可实现居中

相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%即可

4 利用`textAlign`和`verticalAlign`

利用textAlign:center实现行内元素的水平居中，再利用verticalAlign:middle实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，用过elementUI的可以去看看其消息弹窗居中实现方式就是如此

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left 偏移、margin 偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和textAlign即可实现。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1.1 关于`VueX`

`/test/demo_form.php?name1=value1&amp;name2=value2`

var script = document.createElement('script');
script.src = 'http://localhost:3000/api/test.do?a=1&amp;b=2&callback=cb';
$('body').append(script);

function cb(res){
    // do something
    console.log(res)
}

那如果黑客植入script脚本通过jsonp的方式对服务器进行攻击，怎么办？
可以通过页面设置的内容安全协议csp进行防范。

OPTIONS /cors HTTP/1.1
Origin: localhost:3000
Access-Control-Request-Method: PUT // 表示使用的什么HTTP请求方法
Access-Control-Request-Headers: X-Custom-Header // 表示浏览器发送的自定义字段
Host: localhost:3000
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
User-Agent: Mozilla/5.0...

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://localhost:3000 // 表示http://localhost:3000可以访问数据
Access-Control-Allow-Methods: GET, POST, PUT      
Access-Control-Allow-Headers: X-Custom-Header    
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

PUT /cors HTTP/1.1
Origin: http://api.zhenai.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

在options请求中，我们可以通过设置响应头的参数Access-Control-Max-Age来对结果进行缓存
比如： Access-Control-Max-Age: 600 表示对options检验结果进行十分钟的缓存

nginx解决跨域的问题跟之前的方法有所不同，它是通过服务器的方向代理，将前端访问域名跟后端服务域名映射到同源的地址下，从而实现前端服务和后端服务的同源，那自然不存在跨域的问题了。
举个：
前端服务：http://localhost:3000，
前端页面路由：http://localhost:3000/page.html，
后端服务：http://localhost:3001，
后端接口路由：http://localhost:3001/api/test.do
可以看出，两个服务处于跨域的状态
通过nginx的配置进行反向代理，即可实现前后端服务同源，如下：

server
{
    listen 80;
    server_name localhost;

    location = / {
        proxy_pass http://localhost:3000;
    }

   location /api {
        proxy_pass http://localhost:3001;

        #指定允许跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;

        #预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #表示允许这个域跨域调用（客户端发送请求的域名和端口） 
        #$http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers 
        $http_access_control_request_headers;

        #OPTIONS预检命令，预检命令通过时才发送请求
        #检查请求的类型是不是预检命令
        if ($request_method = OPTIONS){
            return 200;
        }
   }
}

其实，在我们主流使用的MVVM框架中，配置项里面也提供解决跨域问题的能力，继续举个，以vue2.x为例，我们可以通过在config/index.js中添加配置项实现跨域请求：

proxyTable: {
    '/apis': {
        // 测试环境
        target: 'http://www.zhenai.com/',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        } 
    }             
}

其实原理很简单，就是在我们使用npm run dev命中，启动了一个node服务，然后将前端发出的请求发送到node服务，再将该服务转发到原本的后台服务，在这过程中实现了一层代理，由一个node服务发送一个请求到另外一个后台服务，自然也没有了浏览器所限制的跨域问题。

PUT 和 DELETE 的请求成功通常并不是响应200OK的状态码而是 204No Content 表示无内容(或者 201Created表示一个资源首次被创建成功)。

尽管标准要求浏览器在收到该响应并进行重定向时不应该修改http method和body，但是有一些浏览器可能会有问题。所以最好是在应对GET 或 HEAD 方法时使用301，其他情况使用308 来替代301。

PUT 和 DELETE 的请求成功通常并不是响应200OK的状态码而是 204No Content 表示无内容(或者 201Created表示一个资源首次被创建成功)。

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

promise 回调地狱

JavaScript

1. Promise 的理解

一、Promise是什么？

二、Promise是为解决什么问题而产生的？

三、Promise的两个特点

四、Promise的三个缺点

五、Promise在哪存放成功回调序列和失败回调序列？

2. 箭头函数和普通函数的区别

3. ES6新特性

4. Var let const 的区别

5. 实现继承的几种方式

6. Null 和 undefined 的区别

7. Call bind apply的区别

apply方法

call方法

bind方法

8. 前端缓存的理解 或者 前端数据持久化的理解

前端缓存分为HTTP缓存和浏览器缓存

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种，如下：

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

9. 防抖和节流

防抖（debounce）

节流（throttle）

10. 闭包

1、变量作用域

3、闭包的概念

4、闭包的用途

5、使用闭包的注意点

11. 数组去重

一、利用ES6 Set去重（ES6中最常用）

二、利用for嵌套for，然后splice去重（ES5中最常用）

三、利用indexOf去重

四、利用sort()

六、利用includes

七、利用hasOwnProperty

八、利用filter

九、利用递归去重

十、利用Map数据结构去重

12. 深浅拷贝

13. 原型链

14. Require 和 import

require和import的区别

CSS

1. 常见的块级元素和行内块元素，以及它们有何不同

2. 常见选择器

标签选择器

类选择器

id选择器

通配符选择器

CSS的复合选择器

后代选择器/包含选择器（重要）

子选择器（重要）

并集选择器（重要）

伪类选择器

链接伪类选择器

:foucus伪类选择器

3. px em 和 rem的区别

4. 水平垂直居中的几种方法

1 使用flex布局

利用flex的alignItems:center垂直居中，justifycontent:center水平居中

2 利用相对定位和绝对定位的margin:auto

相对定位下，使用绝对定位将上下左右都设置为0，再设置margin:auto即可实现居中

3 利用相对定位和绝对定位，再加上外边距和平移的配合

4 利用textAlign和verticalAlign

5 其他

5. 盒模型的理解

6. Flex布局

一、Flex 布局是什么？

二、基本概念

三、容器的属性

7. 怎么解决浮动中塌陷的问题

8. CSS3新特性

9. 前端常见的布局方式

一、静态布局

二、弹性布局（flexbox）

三、自适应布局（bootstrap）

四、流式布局（fluid）

五、响应式布局

六、浮动布局

七、定位布局

Jav aSc rip t

apply 方法

8. 前端缓存的理解或者前端数据持久化的理解

二、利用for嵌套for，然后 splice去重（ES5中最常用）

req uire和import的区别

id 选择器

1 使用flex 布局

利用flex的`alignItems:center`垂直居中，`justifycontent:center`水平居中

2 利用相对定位和绝对定位的`margin:auto`

相对定位下，使用绝对定位将上下左右都设置为0，再设置`margin:auto`即可实现居中

4 利用`textAlign`和`verticalAlign`

针对webpack 打包优化

1.1 关于`VueX`

cors 跨域