前端面试题总结（一）

面试题总结

1.JS基本数据类型有哪些？引用数据类型有哪些？

在 JS 中，存在着 7 种原始值，分别是： boolean null undefined number string symbol
引用数据类型:
对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function）

2.null和undefined 有什么区别？

（1）null是一个表示”无”的对象，转我数值是为0，undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined
（2）Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
（3）Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
典型用法是：
a、变量被声明了，但没有赋值时，就等于undefined
b、调用函数时，应该提供的参数没有提供，该参数等于undefined
c、对象没有赋值属性，该属性的值为undefined
d、函数没有返回值时，默认返回undefined
（4）null表示”没有对象”，即该处不应该有值。典型用法是： a、作为函数的参数，表示该函数的参数不是对象 b、作为对象原型链的终点

3.什么是闭包？

   我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

4.谈谈你对原型链的理解

   在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。
   当函数经过new调用时，这个函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个__proto__属性，指向构造函数的原型对象。
   JavaScript对象通过__proto__ 指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条, 即原型链。

5.定义一个函数add，实现add(2,3) //5 add(2,3)(5) //10

const add = (...args) => {
    let sum = args.reduce((pre, crt) => pre + crt);
    const accu = (...args2) => {
    sum += args2.reduce((pre, crt) => pre + crt);
        return accu;
    }
    accu.valueOf = () => sum;
    return accu;
}

console.log(add(2, 3)(5)) //10

6.数组去重

es6:

function unique(arr){
	return Array.from(new Set(arr));
}

递归:

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;
}

7.call,bind,apply区别

  call和apply基本一致，唯一的区别在于传参方式，apply把需要传参数放到一个数组（或者类数组）中传递进去，bind语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8。

8.CSS实现水平垂直居中

弹性布局

/*父元素*/
.father{
    display: flex;
    justify-content: center;
    align-items: center;
}
   

absolute + transform

.father{position:relative}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

vertical-align

.father{
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.son{
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; 
}

9.[“1”, “2”, “3”].map(parseInt)得到什么？

  答案是：[1, NaN, NaN].

  原因：主要是下面这3点

    1. map函数传递参数的定义

    2. parseInt函数针对于radix这个参数的理解

    3. 二进制当中没有"3"这个数码

10.一个URL（统一资源路径地址）包含哪些部分呢？

  举个例子，比如 “https://editor.csdn.net/md?articleId=105535050”，在这个例子中我们可以分成六部分；

    1、传输协议：http，https

    2、域名： 例www.baidu.com为网站名字。 baidu.com为一级域名，www是服务器

    3、端口： 不填写的话默认走的是80端口号

    4、路径 editor.csdn.net/md。/表示根目录

    5、携带的参数：？articleId=105535050

    6、哈希值：可有可无，在单页应用开发中作为前端路由使用（Vue Router、React Router）

11.从输入URL到页面加载完成期间经历了什么(简写)

1、DNS域名解析
2、发起TCP连接（三次握手）
3、发送HTTP请求，接受HTTP响应
4、浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户
5、断开TCP连接（四次挥手）

12.跨域的产生和解决方法

  为了网络安全起见，浏览器设置了一个同源策略，规定只有域名，端口，协议全部相同，就叫做同源。当页面在执行一个脚本时，会检查访问的资源是否同源，如果不是，就会报错。可是在实际开发中，经常会有跨域加载资源的需求，避免不了跨域请求，所以就出现了跨域。
  解决方法
  1、JSONP – 原理就是利用了script标签，在标签外套了一层壳，利用标签特性达到跨域加载资源的效果。
  2、CORS – 跨站资源共享，它是跨域的官方解决方案，升级版的JSONP。原理是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。请求和响应都不包含cookie信息。
  3、webSockets – 不受同源策略影响。原理是因为它不使用HTTP协议，而使用一种自定义的协议，专门为快速传输小数据设计。
  4、Nginx – 代理跨域。反向代理跨域。

13.webSockets了解吗？

   WebSocket是HTML5中的协议，支持持久连接，http协议不支持持久性连接（长连接，循环连接的不算）。Http1.0和HTTP1.1都不支持持久性的链接。
   其优点就是，只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力。

14.事件循环

（1）所有同步任务都在主线程上执行，形成一个[执行栈]
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）