js前端面试题及答案整理(一)


Posted in Javascript onAugust 26, 2016

Part1 手写代码

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

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]的值,因此需做一些改变:

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最后一个元素比较
 });
}

2 快速排序的实现

方法一(尽可能不用js数组方法):

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点击事件
  }
 }

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

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 #Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 #Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 #Javascript
响应式表格之固定表头的简单实现
Aug 26 #Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 #Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 #Javascript
jquery 动态合并单元格的实现方法
Aug 26 #Javascript
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
php获取地址栏信息的代码
2008/10/08 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
AngularJS的ng-click传参的方法
2017/06/19 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python反射用法实例简析
2017/12/22 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
农民入党思想汇报
2014/01/03 职场文书
学习经验演讲稿
2014/05/10 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
招商银行工作证明
2015/06/17 职场文书