前端部分高频面试题

该文整理了部分目前公司在面试前端时问的重复率较高的问题，持续更新中

1.http相关问题

问：http是什么？http的组成？http的状态码？http的请求方法？http和https的区别？

1.1 http是什么？

http(Hypertext transfer protocol)超文本传输协议，通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。也就是说，http协议规定了超文本传输所要遵守的规则。
附赠：那么网页在输入URL到加载，http究竟做了哪些工作呢？请看下图

1.2 http的组成？

HTTP请求由状态行、请求头、请求正文三部分组成：

• 状态行：包括请求方式Method、资源路径URL、协议版本Version；
• 请求头：包括一些访问的域名、用户代理、Cookie等信息；
• 请求正文：就是HTTP请求的数据。

1.3 http的状态码？

http的状态码告知从服务端请求得结果。

• 1xx：接受的请求正在处理。
• 2xx：请求正常，处理完毕
  • 200 一切正常
  • 204 请求处理成功，但没有资源返回
  • 206 客户端对资源某一部分的请求
• 3xx：需要进行附加操作完成
  • 301 请求资源被分配新的url
  • 302 请求资源临时被分配新的url
  • 303 请求对应的资源存在着另一个url
• 4xx：服务器无法处理请求
  • 400 请求报文中存在错误的语法
  • 401 发送的请求需要http认证
  • 403 服务器拒绝客户端访问
  • 404 服务器没有请求的资源
• 5xx：服务器处理请求错误
  • 500 内部资源出现故障
  • 503 服务器暂时处于高负荷或者停机维护状态

1.4 http的请求方法？

请求方式Method一般有GET、POST、PUT、DELETE，含义分别是获取、修改、上传、删除，其中GET方式仅仅为获取服务器资源，方式较为简单，因此在请求方式为GET的HTTP请求数据中，请求正文部分可以省略，直接将想要获取的资源添加到URL中。

1.5 http与https的区别？

https是什么？
安全超文本传输协议 它是一个安全通信通道，基于HTTP开发，用于在客户计算机和服务器之间交换信息。它使用安全套接字层(SSL)进行信息交换，简单来说它是HTTP的 安全版。

区别：

• 传输方式不同：http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。
• 连接方式不同：http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• 安全度不同：http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
• 费用不同：https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。
• 传输效率不同：因为https需要加密，所以传输效率比http低一些。
• 防劫持上：防劫持性：HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。

2. 前端页面如何实现性能优化？

• 1.css放置在页面顶部，js文件依据需求放置。
• 2.尽可能少的设置全局变量。
• 3.尽量减少Dom操作。
• 4.不要在标签中设置样式，尽量引入外部的css文件。
• 5.减少http请求，合理设置http缓存。
• 6.使用浏览器缓存。
• 7.如果遇到大文件，可以将大文件放置在一个定时器中，利用异步操作，等其他文件加载完成以后再去加载大文件。
• 8.图片的优化。
• 9.图片的懒加载。
• 10.减少cookie存储，尽量使用localstorage存储本地数据。
• 11.使用JSON格式来进行数据交换，使用CDN加速，使用HTTP缓存。
• 12.使用DNS预解析
  详情请点击此处跳转（或者去博主的主页）

3. 数组的相关问题

3.1 数组的去重

1.for循环嵌套，利用splice去重

function newArr(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 arr1 = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(newArr(arr1))

2.新建数组，利用indexof（）去重

此方法也是es5中比较简单的方法之一，基本思路是新建一个数组，原数组遍历传入新数组，判断值是否存在，值不存在就加入该新数组中；该方法“indexOf”是es5的方法，IE8以下不支持。

   function newArr(array){ 
    //一个新的数组 
    var arrs = []; 
    //遍历当前数组 
    for(var i = 0; i < array.length; i++){ 
        //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面 
        if (arrs.indexOf(array[i]) == -1){ 
            arrs.push(array[i])
        }; 
    } 
    return arrs; 
} 
var arr1 = [1,1,2,5,5,6,8,9,8];
console.log(newArr(arr1))

3.利用ES6的Set去重

  function newArr(arr){
    return Array.from(new Set(arr))
}
 
var arr = [1,1,2,9,6,9,6,3,1,4,5];
 
console.log(newArr(arr))

4.使用对象记录重复的元素，以及出现的次数

下方案例在去重的同时，也显示了数据重复的次数，本案例摘自博客园TZ张无忌，
点击查看详情

    // 首先声明一个数组稍后使用
    var _arr = ['旅行箱', '旅行箱', '小米', '大米', '大米', '大米', '大米'];
    // 创建一个空数组存放数据
    var _res = []; //
    // 先对数组进行排序，相同的字符会排在一起
    _arr.sort();
    // 对整个数组进行遍历
    for (var i = 0; i < _arr.length;) {
        // 默认出现次数为0
        var count = 0;
        // 声明一个变量J，让J等于I，如果下一个字符等于当前索引，就把count的值加1
        for (var j = i; j < _arr.length; j++) {
            if (_arr[i] == _arr[j]) {
                count++;
            }
        }
        // 然后把当前索引I保存下来，依旧count的值存起来
        _res.push([_arr[i], count]);
        i += count;
    }
    //_res 二维数维中保存了 值和值的重复数
    var _newArr = [];
    for (var i = 0; i < _res.length; i++) {
        // console.log(_res[i][0] + "重复次数:" + _res[i][1]);
        _newArr.push(_res[i][0] + 'x' + _res[i][1]);
    }
    console.log(_newArr)

3.2 数组排序

1.冒泡排序

依次对数组中相邻数字进行比较(两两比较)，大的放后面

//定义一个杂乱的数组
var arr = [5,99,2,9,1,5,67,7,10,23] 
//大循环，用于遍历数组每个元素    
for(var i=0;i<arr.length-1;i++){  
//小循环，用于将数组中的某个元素与其它所有元素相比较       
    for(var j=0;j<arr.length-i-1;j++){ 
        //声明一个局部变量，当作第三个空瓶子  
        var sum;
        //判断当前元素和后一个元素的大小，如果当前元素比后一个元素大                         
        if(arr[j]>arr[j+1]){             
            sum = arr[j+1];     //将后一个元素（小元素）放在空瓶子里
            arr[j+1] = arr[j];  //将当前元素（大元素）放在后一个元素的位置
            arr[j] = sum;       //将小元素从空瓶子中拿出来，放在当前元素的位置
        }
    } 
}
console.log(arr);//完成循环之后，初始数组的顺序已经发生改变

2. 选择排序

将第一位依次与后面的元素相比较，得到最小值，与第一位交换。再用第二位依次与后面元素相比较，得到最小值，与第二位交换。
从原始数据中找到最小元素，并放在数组的最前面。然后再从下面的元素中找到最小元素，放在之前最小元素的后面，直到排序完成。

var arr = [5,99,2,9,1,5,67,7,10,23]
for(var i=0;i<arr.length-1;i++){       //大循环，需要比对的次数
    var min = arr[i];                  //假定一个最小值
    var minIndex = i;                  //假定最小值的索引
    for(var j=i+1;j<arr.length;j++){   //小循环，每次需要比对的次数
        if(min>arr[j]){                //判断最小值是否为真的最小值
            min = arr[j];              //获取真正的最小值
            minIndex = j;              //获取真正最小值的索引
        }
    }

    arr[minIndex] = arr[i];            //将当前元素放在最小值的位置
    arr[i] = min;                      //将最小值放在当前元素的位置
}
console.log(arr);                      //输入排序好的数组  

3. 对包含对象的数组排序

要求根据对象中的年龄进行由大到小的顺序排列，实际开发中，会经常碰到这种需求。
例如将数据[{‘name’: ‘张三’, age: 26},{‘name’: ‘李四’, age: 12},{‘name’: ‘王五’, age: 37},{‘name’: ‘赵六’, age: 4}]按照年龄进行排序。
在此之前我们先来回顾一下sort方法

• sort()排序不会产生新的数组，而是原地排序
• sort()不添加function() 时，默认按照字符串的Unicode码位点（code point）排序。
• sort()如果指明了 function(x,y) ，那么数组会按照调用该函数的返回值排序。
  1、function(x,y) 返回值为小于 0 ，那么 x 会被排列到 y 之前.
  2、function(x,y) 返回值为 0 ，那么 x和 y 的位置保持相对不变.
  3、function(x,y) 返回值为大于 0 ，那么 x 会被排列到 y 之后.

'use strict';
var arr = [10, 20, 1, 2];
arr.sort()
//排序过后 arr = [1, 10, 2, 20]

arr.sort(function(x, y) {
  return x - y
})
//排序过后 arr = [1, 2, 10, 20]

//使用箭头函数
arr.sort((x, y) => { return x - y })

接下来我们对数据进行排序，依照年龄从小到大进行排序。

var arr = [{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '王五', age: 37},{'name': '赵六', age: 4}];
var objectArraySort = function (keyName) {
 return function (objectN, objectM) {
  var valueN = objectN[keyName]
  var valueM = objectM[keyName]
  if (valueN < valueM) return -1
  else if (valueN > valueM) return 1
  else return 0
 }
}
arr.sort(objectArraySort('age'))
console.log(arr)