前端面试题及答案整理（一）

时间 2019-11-12

标签端面试题答案整理繁體版

原文原文链接

各公司秋招很快就开始了，最近在准备面试的东西，干脆将发现的各种面试题整理一下共享出来，大部分面试题是没有标准答案的，我给出的答案也是仅供参考，若是有更好的解答欢迎在评论区留言。javascript

Part1 手写代码

现场手写代码是如今面试中很常见的一类面试题，考察基础的数据结构与算法能力。html

1 数组去重的实现

基本数组去重

Array.prototype.unique = function(){
    var result = [];
    this.forEach(function(v){
        if(result.indexOf(v) < 0){
            result.push(v);
        }
    });
    return result;
}

利用hash表去重，这是一种空间换时间的方法

Array.prototype.unique = function(){
    var result = [],hash = {};
    this.forEach(function(v){
        if(!hash[v]){
            hash[v] = true;
            result.push(v);
        }
    });
    return result;
}

上面的方法存在一个bug，对于数组[1,2,'1','2',3]，去重结果为[1,2,3]，缘由在于对象对属性索引时会进行强制类型转换，arr[‘1’]和arr[1]获得的都是arr[1]的值，所以需作一些改变：java

Array.prototype.unique = function(){
    var result = [],hash = {};
    this.forEach(function(v){
        var type = typeof(v);  //获取元素类型
        hash[v] || (hash[v] = new Array());
        if(hash[v].indexOf(type) < 0){
            hash[v].push(type);  //存储类型
            result.push(v);
        }
    });
    return result;
}

先排序后去重

Array.prototype.unique = function(){
    var result = [this[0]];
    this.sort();
    this.forEach(function(v){
        v != result[result.length - 1] && result.push(v); //仅与result最后一个元素比较
    });
}

利用ES6 Set去重

//ES6环境下
    Array.prototype.unique = function(){
         return [...new Set(this)];
    }

2 快速排序的实现

方法一(尽量不用js数组方法）：node

function quickSort(arr){
    qSort(arr,0,arr.length - 1);
}
function qSort(arr,low,high){
    if(low < high){
        var partKey = partition(arr,low,high);
        qSort(arr,low, partKey - 1);
        qSort(arr,partKey + 1,high);
    }
}
function partition(arr,low,high){
    var key = arr[low];  //使用第一个元素做为分类依据
    while(low < high){
        while(low < high && arr[high] >= arr[key])
            high--;
        arr[low] = arr[high];
        while(low < high && arr[low] <= arr[key])
            low++;
        arr[high] = arr[low];
    }
    arr[low] = key;
    return low;
}

方法二（使用js数组方法）：面试

function quickSort(arr){
   if(arr.length <= 1) return arr;
   var index = Math.floor(arr.length/2);
   var key = arr.splice(index,1)[0];
   var left = [],right = [];
   arr.forEach(function(v){
       v <= key ? left.push(v) : right.push(v);
   });
   return quickSort(left).concat([key],quickSort(right));
}

另外要知道，快速排序的平均时间复杂度O(nlogn),最坏状况是有序的状况，时间复杂度为n的平方，另外快速排序是不稳定的。算法

Part2 JavaScript相关

1 JavaScript基础数据类型

JavaScript数据类型包括原始类型和引用类型，原始类型有五个:数组

Number（数值） String（字符串） Boolean（布尔） Null（空） Undefined（未定义）

引用类型有一个：网络

Object（对象）

经过typeof(x)能够返回一个变量x的数据类型“number”、“string”、“boolean”、“undefined”、"object"，这里要注意一点：typeof运算符对于null类型返回的是object。数据结构

《JavaScript高级程序设计》：
这其实是JavaScript最初实现中的一个错误，后来被ECMAScript沿用了。如今null被认为是对象的占位符，从而解释了这一矛盾。可是从技术上来讲，它仍然是原始值。闭包

2 谈一谈JavaScript做用域链

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会建立为其建立一个做用域又称为执行上下文（Execution Context），在页面加载后会首先建立一个全局的做用域，而后每执行一个函数，会创建一个对应的做用域，从而造成了一条做用域链。每一个做用域都有一条对应的做用域链，链头是全局做用域，链尾是当前函数做用域。

做用域链的做用是用于解析标识符，当函数被建立时（不是执行），会将this、arguments、命名参数和该函数中的全部局部变量添加到该当前做用域中，当JavaScript须要查找变量X的时候（这个过程称为变量解析），它首先会从做用域链中的链尾也就是当前做用域进行查找是否有X属性，若是没有找到就顺着做用域链继续查找，直到查找到链头，也就是全局做用域链，仍未找到该变量的话，就认为这段代码的做用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

3 如何理解JavaScript原型链

JavaScript中的每一个对象都有一个prototype属性，咱们称之为原型，而原型的值也是一个对象，所以它也有本身的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的做用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用做构造函数来建立实例时，该函数的原型属性将被做为原型赋值给全部对象实例，好比咱们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象自己, 找到则返回; 若未找到, 则继续查找其原型对象的属性(若是还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在全部的实例中找到，若整个原型链未找到则返回undefined；

4 JavaScript变量声明提早

《JavaScript权威指南》中是这样解释的：JavaScript变量在声明以前已经可用，JavaScript的这个特性被非正式的称为声明提早（hoisting），即JavaScript函数中声明的全部变量（但不涉及赋值）都被“提早”至函数的顶部。

从一个例子来看：

var scope = "global";
function myFunc(){
    console.log(scope); 
    var scope = "local";
}

控制台打印出来的不是“global”而是“undefined”，这是由于在myFunc这个函数的做用域中，局部变量scope声明被提早至函数顶部，而此时，scope仅声明，未赋值，所以输出undefined。实际上，上面的代码和下面的效果是同样的：

var scope = "global";
function myFunc(){
    var scope;
    console.log(scope);
    scope = "local";
}

5 如何理解和应用JavaScript闭包

关于闭包具体的定义文献中给的概念很抽象，我认为闭包是一种使函数可以都去其它函数的局部变量的语法机制。

举个例子：

function outFunc(){
    var name = "Vicfeel";
    function inFunc(){
        console.log(name);
    }
    return inFunc;
}
inFunc(); //控制台显示"Vicfeel"

这这个例子咱们能够看出，在函数inFunc中依然能够访问outFunc的局部变量name。

闭包应用举例，模拟类的私有属性,利用闭包的性质，局部变量只有在sayAge方法中才能够访问，而name在外部也访问，从而实现了类的私有属性。

function User(){
        this.name = "Vicfeel";  //共有属性
        var age = 23;    //私有属性
        this.sayAge:function(){
            console.log("my age is " + age); 
        }
    }
    var user = new User();
    console.log(user.name); //"Vicfeel"
    console.log(user.age);  //"undefined"
    user.sayAge();   //"my age is 23"

要了解详细的闭包，推荐一下阮一峰的网络日志-学习Javascript闭包（Closure）。

6 new构建对象的本质

function User(){
        this.name = "Vicfeel";
        this.age = 23;
    }
    
    var user = new User();

经过new操做符，实际上在构造函数User中完成了以下操做：

建立一个新的对象，这个对象的类型是object；
设置这个新的对象的内部、可访问性和prototype属性为构造函数（指prototype.construtor所指向的构造函数）中设置的；
执行构造函数；
返回新建立的对象。

function User(){
        //this = {};  
        //this.constructor = User；
        this.name = "Vicfeel";
        this.age = 23;
        //return this;
    }
    
    var user = new User();

若是构造函数默认返回的新建立的this对象，若是手动return 一个变量的话，若是该变量是原始类型则无效，若是是对象，则返回该对象。

7 JavaScript代理

当咱们须要对不少元素添加事件的时候，能够经过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

好比咱们须要向一个ul中动态添加不少个li，须要遍历li逐个添加点击事件

<ul id='list'></ul>

var count = 100;
    var ulList = document.getElementById("list");
    //动态构建节点
    for(var i = count;i--;){
        var liDom = document.createElement('li');
        ulList.appendChild(liDom);
    }
    //绑定点击事件
    var liNode = ulList.getElementByTagName("li");
    for(var i=0, l = liNodes.length; i < l; i++){
        liNode[i].onClick = function(){
            //li点击事件
        }
    }

众所周知，DOM操做是十分消耗性能的。因此重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是经过尽可能少的绑定，去监听尽可能多的事件。如何作呢？答案是利用事件冒泡机制,对其父节点ul进行事件绑定（Event Bubble),而后经过event.target来判断是哪一个节点触发的事件，从而减小不少EventHandler的绑定。

var count = 100;
    var ulList = document.getElementById("list");
    //动态构建节点
    for(var i = count;i--;){
        var liDom = document.createElement('li');
        ulList.appendChild(liDom);
    }
    //绑定点击事件
    var liNode = ulList.getElementByTagName("li");
    liNode.onClick = function(e){
        if(e.target && e.target.nodeName.toUpperCase == "LI") {
            // li点击事件
        }
    }

发现新内容会持续更新...

博文做者：vicfeel
博文出处：http://www.cnblogs.com/vicfeel 本文版权归做者和博客园共有，欢迎转载，但须保留此段声明，并给出原文连接，谢谢合做！若是阅读了本文章，以为有帮助，您能够为个人博文点击“推荐一下”！