前端面试之JS

javascript部分

（1）：简要的描述JavaScript 中的作用域链
任何一段JavaScript代码都对应一个作用域链，作用域链中存放一系列对象，代码中声明的变量将作为对象的属性存放。 在JavaScript的顶层代码中，作用域链由一个全局对象组成；当定义一个函数
时，它保存一个作用域链，作用域链上有两个对象，一个是函数对象，一个是全局对象。 每当一个函数被调用时，会创建一个活动对象（也叫上下文对象），函数中的局部变量将作为该对象的属性存放。 当需要使用一个变量时，将从作用域链中逐个查找对象的属性。比如：要使用变量a，将先查找作用域中的第一个对象是否有属性a，如果有就使用；如果没有就查找作用域链中 下一个对象的属性，以此类推。如果作用域链上没有任何一个对象含有属性x，则认为这段代码的作用域链上不存在x，将抛出引用错误异常。 当函数调用完成后，如果没有其他引用指向为此次调用所创建的上下文对象，该对象将被回收。

---

（2）简述JavaScript中创建自定义对象的方式
自定义对象（user-defined object）指由用户创建对象，兼容性问题需要由编写者注意。创建自定义对象的方式有：
1>对象直接量
2>new Object（）
3> function对象模板
4> Object.create（）

---

（3）javaScript中，this关键字的作用是什么?
笼统的说，关键字this指向当前的对象。比如，顶级代码中的this指向全局对象，在指定元素事件的时候，this指定当前发生事件的元素对象，对于嵌套函数，如果嵌套函数作为方法被调用，其this指向调用他的对象；如果作为函数调用，this是全局对象或者为undefined（严格模式下）

---

（4）简要描述javaScript中的匿名函数
匿名函数指的是在定义时没有指定名字的函数，且定义后往往直接调用。如
这种方式所定义的匿名函数，往往需要直接调用

匿名函数常用于定义不需要重复使用的函数，用完即释放。另外，对于直接调用的匿名函数而言，可以看成是一个临时的命名空间，其区域内定义的所有变量，不会污染到全局命名空间

---

（5）：什么是正则表达式？在JavaScript中，如何应用正则表达式？
正则表达式(Regular Expression) 本身就是一个字符串，由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式。 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如：词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。许多程序设计语言都支持利用正则表达式进行字符串操作。 在JavaScript 中，正则表达式的应用分为两种： 1、结合String 对象的replace、search和match方法，实现对字符串的替
换、查找和匹配；
2、定义正则表达式对象，实现对字符串的复杂匹配操作.

---

（6）：编写函数，实现对身份证号码最后一位的验证
二代身份证号码为18位，其最后一位（第18位）的计算方法为： 将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分别为： 7－9－10－5－8－4－2－1－6－3－7－9－10－5－8－4－2
将 这17位数字和系数相乘的结果相加 3、用加出来和除以11，看余数是多少？ 4、余数只可能有0－
1－2－3－4－5－6－7－8－9－10这11个数字。每个数字所对应的最后一位身份证的号码为：1－0－X－9－8－7－6－5－4－3－2。即，如果余数是2，就会在身份证的第18位数字上出现罗马数字的X。如果余数是10，身份证的最后一位号码就是2。 例如：某男性的身份证号码是34052419800101001X。验证其最后一位是否正确时，首先需要得出前17位的乘积和是189，然后用189除以11得出的结果是17+2/11，也就是说其余数是2。最后通过对应规则就可以知道余数2对应的数字是x。所以，可以判定此身份证号码的最后一位是合格的。

---

（7）：编写函数，实现冒泡排序

---

（8）：简要描述JavaScript中定义函数的几种方式
JavaScript中有3中定义函数的方式
1，函数语句：即使用function关键字显示定义函数。如：
function f(x){
return x+1;
}
2，函数定义表达式：也称为“函数直接量”。形如：
var f=function(x){
return x+1;
}
3,使用Function()构造函数式定义

---

（9）简述arguments 对象的作用
在函数代码中，使用特殊对象arguments可以访问函数的参数。即，开发者在定义函数时，无需明确的为方法声明参数，也可以在方法体中使用arguments 来访问参数。这是因为，arguments 是一种特殊对象，在函数代码中，表示函数的参数数组。 正因为arguments 表示参数组成的数组，因此，首先可以使用arguments.length检测函数的参数个数，其次，可以通过下标（arguments[index]）来访问某个参数。这样，可以用arguments 对象判断传递给函数的参数个数并获取参数，适用于函数参数无法确定个数的情况下。

---

（10）：什么是“逻辑短路”？
逻辑短路是对于逻辑运算而言，是指，仅计算逻辑表达式中的一部分便能确定结果，而不对整个表达式进行计算的现象。 对于“&&”运算符，当第一个操作数为false时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是false； 对于“||”运算符，当第一个操作数为true时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是true。

---

（11）：列举几个JavaScript中常用的全局函数，并描述其作用
JavaScript 中常用的全局函数及其作用如下： parseInt：解析一个字符串并返回一个整数； 2. parseFloat：解析一个字符串并返回一个浮点数； 3. isNaN：检查某个值是否是数字，返回true 或者false； 4. encodeURI ：把字符串作为URI 进行编码； 5. decodeURI ：对encodeURI() 函数编码过的URI 进行解码； 6. eval：计算某个字符串，以得到结果，或者用于执行其中JavaScript 代码。

---

（12）：解释一下javaScript中局部变量与全局变量的区别
全局变量拥有全局作用域，在JavaScript 代码的任何地方都可以访问；在函数内声明的变量只在函数体内有定义，即为局部变量，其作用域是局部性的。 需要注意的是，在函数体内声明局部变量时，如果不使用var 关键字，则将声明全局变量。

---

（13）：简要描述JavaScript 的数据类型？

JavaScript 的数据类型可以分为原始类型和对象类型。 原始类型包括string、number 和boolean 三种。其中，字符串是使用一对单引号或者一对双引号括起来的任意文本；而数值类型都采用64
位浮点格式存储，不区分整数和小数；布尔（逻辑）只能有两个值：true 或false。 复杂类型指其他对象，如Array、Date、Object 等。 除此之外，JavaScript中还有两个特殊的原始值：null（空）和undefined（未定义），它们代表了各自特殊类型的唯一成员。

---

（14）：如何动态的操作表格？
可以象普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作

---

（15）：String.match与RegExp.exec有何区别？
这2个函数都是从指定的字符串中提取符合条件的字串
1、正则表达式为非全局检索时,2者是等价的
返回符合条件的第一个子串以及对应的分组（如果存在存在）构成的伪数组:第一个元素是匹配的字串，余下的为匹配的分组。
伪数组包含2个属性：
input 返回要检索的字符串
index 返回匹配的子串在字符串的位置，在非全局检索时始终为0
2、正则表达式为全局检索时，2者的处理机制和返回结构不同
exec处理机制
当正则表达式为全局检索时，exec会记录每次匹配开始、结束的位置。匹配结束位置存储在正则表达式的lastIndex中，匹配开始位置存储在结果的index中。当exec继续被调用时，正则表达式会从lastIndex进行新的匹配，并返回新的符合条件的子串及分组，并更新正则表达式的lastIndex。重复这样的操作，直到全部匹配完（exec返回null）。此时正则表达式的lastIndex为0。
match处理机制
match在要匹配的正则表达式为全局检索时，会直接返回字符串中符合条件的子串数组（不包含分组，即使存在
总的来说
match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果； 而exec可以利用循环返回全部匹配结果

---

（16）：正则的i标记与g标记各有何用途？
i：不区分大小写；g：全局匹配，如果没有此标记，正则不会第二个之后的结果

---

（17）：为String添加trim()方法

String.prototype.trim = function() {  return this.replace(/^ +| +$/g,"");  }

---

（18）：简述COOKIE。在JS中如何操作Cookie?
概念
Cookie 可以翻译为“小甜品，小饼干” ，Cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现 ：你好 XXX，这会让我们感觉很亲切，就好像吃了一个小甜品一样。这其实是通过访问主机中的一个文件来实现的，这个文件就是 Cookie。一般网络用户习惯用其复数形式 Cookies。
Cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。
在默认情况下，Cookie是临时存在的。在一个浏览器窗口打开时，可以设置Cookie，只要该浏览器窗口没有关闭，Cookie就一直有效，在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。这种状态信息称作“Persistent Client State HTTP Cookie” ，简称为 Cookies。
而一旦浏览器窗口关闭后，Cookie也就随之消失。如果想要Cookie在浏览器窗口之后还能继续使用，就需要为Cookie设置一个生存期。所谓生存期也就是Cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该Cookie。一旦终止日期到达之后，该Cookie将会从Cookie文件中删除。
一个网站可以创建多个Cookie,不同的Cookie可以拥有不同的值，例如将用户名和密码存在Cookie中，就可能用到两个Cookie，一个用来存放用户名，一个用来存放密码，使用Document的Cookie属性可以用来设置与读取Cookie。
JS如何操作Cookie
使用Document的Cookie属性可以用来设置与读取Cookie。Cookie是以键值对的形式保存的，即key=value的格式。各个Cookie之间一般是以“;”分隔。
添加一个cookie

<script language="javascript' type="text/javascript">

function   addCookie(name,value,expiresHours){

var  cookieString=name+"="+escape(value);

//判断是否设置过期时间,0代表关闭浏览器时失效

if(expiresHours>0){

var  date=newDate();

date.setTime(date.getTime+expiresHours*3600*1000);

cookieString=cookieString+"; expires="+date.toGMTString();

}

document.cookie=cookieString;

}

script>

根据指定名称的Cookie修改Cookie的值

<script language="javascript"  type="text/javascript">

function  editCookie(name,value,expiresHours){

var  cookieString=name+"="+escape(value);

//判断是否设置过期时间,0代表关闭浏览器时失效

if(expiresHours>0){

var  date=newDate();

date.setTime(date.getTime+expiresHours*3600*1000);//单位是多少小时后失效

cookieString=cookieString+"; expires="+date.toGMTString();

}

document.cookie=cookieString;

}

script>

获取指定名称的cookie值

<script language="javascript" type="text/javascript">

function   getCookie(name){

var   strCookie=document.cookie;

var   arrCookie=strCookie.split("; ");

for(var  i=0;ivar  arr=arrCookie[i].split("=");

if(arr[0]==name){

returnunescape(arr[1]);

}else{

return"";

}

}

}

script>

删除指定名称的cookie

<script language="javascript"  type="text/javascript">

function   deleteCookie(name){

var  date=newDate();

date.setTime(date.getTime()-10000);//设定一个过去的时间即可

document.cookie=name+"=v; expires="+date.toGMTString();

}

script>

---

（19）：谈谈innerHTML outerHTML innerText之间的区别。
innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法； innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；
outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码；
innerText代表一个元素节点内由所有子文本节点内容组成的文本；

---

（20）：谈谈innerHTML、nodeValue 与textContent之间的区别
innerHTML属性读取或设置节点起始和结束标签中的HTML内容；
nodeValue 属性读取或设置指定节点的文本内容，适用于文本类型的节点；

---

（21）：你在js中用过array吗？如果用过，array中添加数据用什么方法
用过。
在尾部添加使用push()；
在头部添加使用unshift()；
在任意位置添加使用splice()，但要注意把它的删除个数设置为0。

---

（22）：简述javascript的优缺点。
优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具 编写， 只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；
缺点：不适合开发大型应用程序；

---

（23）Javascript有哪些内置对象?
只有Math和Global（在浏览器环境中，Global就是Window）

---

（24）：列举Javascript的本地对象。

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError 、RangeError、ReferenceError、SyntaxError、TypeError、URIError

---

（25）：什么是Ajax？
客户端向服务器端发送请求,而无需刷新页面的技术 Ajax包含的技术 * HTML、CSS、JavaScript、XML和XMLHttpRequest等

---

（26）：解释XMLHttpRequest是什么？
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

---

（27）：谈谈你对Ajax的理解。你在项目中如何使用Ajax？
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA（Rich Internet Application，富互联网应用系统）【技术允许我们在因特网上以一种像使用Web一样简单的方式来部署富客户端程序。这是一个用户接口，它比用HTML能实现的接口更加健壮、反应更加灵敏和更具有令人感兴趣的可视化特性。无论将来RIA是否能够如人们所猜测的那样完全代替HTML应用系统，对于那些采用胖客户端技术运行复杂应用系统的机构来说，RIA确实提供了一种廉价的选择。】的一种基础技术。 因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。

---

（28）：谈谈你对JSON的理解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于 人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。 所以它往往在AJAX中替代XML，交换数据。

---

（29）：你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？
有。 一个网站，主要是使用其它网站提供的javascrip api如QQ。使用script的src可以直接读取跨域资源。 当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

---

（30）：你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？
没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。

---

（31）：你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？
遇到过。 一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。

---

（32）：你使用过jQuery吗？如果有，你为什么要使用jQuery呢？
用过。 如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。
当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等

---

（33）：在jQuery中如何注册事件？
使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，

如：click()、hover()等。

---

（34）：如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？
可以使用html()获取html内容。 使用text()获取文本内容。 使用attr()可以获取属性值，使用css()可以获取样式属性值。 通过val()便可以获取input的值
把节点元素名加上<、>作为参数调用jQuery方法便可创建新节点,如：jQuery(“

”)。

---

（35）：ajax、get、post、ajaxSetup、getJSON各有何用途？
ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。
get：专门用于发送get请求的便捷方法。
post：专门用于发送post请求的便捷方法。
ajaxSetup：设置调用ajax方法时的黑认值。
getJSON：专门用于向服务器请求json格式数据的便捷方法。

---

（36）：如何使用从服务器获取一个复杂数据（对象）？
通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。
在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象

---

（37）：DOM操作中，如何获取元素的属性值？
对于元素节点，获取其某属性的值有多种方式，如下所示：
1、element.attributes[下标].value
2、element.attributes[‘属性名’].value
3、element.getAttributeNode(‘属性名’).value
4、element.getAttribute(‘属性名’)

---

（38）：简要描述DOM操作中查找元素的方式
通过HTML 中的信息选取元素，比如：
a) getElementById()方法：根据元素的id 属性值查询单个节点；
b) getElementsByTagName()方法：根据元素标签的名称查询点；
c) getElementsByName()方法：根据元素name 属性的值查询点。
2、通过CSS 类选取元素
a) getElementsByClassName(‘className’)方法：根据class名称选取元素；
b) querySelector(‘selector’)和querySelectorAll(‘selector’)方法：根据CSS 选择器选取元素。
3、通过document 对象选取，如document.all、document.body等；
4、通过节点遍历选取节点，如parentNode、firstChild等。

---

（39）：例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== - ===）

---

（40）：IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

---

（41）：IE和标准下有哪些兼容性的写法

Var ev = ev || window.event 
 document.documentElement.clientWidth || document.body.clientWidth  Var target = ev.srcElement||ev.target

---

（42）：JavaScript原型，原型链 ? 有什么特点？
原型(prototype)：保存所有子对象共有成员的对象
原型链：由各级对象的proto逐级向上引用形成的多级继承关系
特点：1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠proto 而非prototype

---

（43）：null，undefined 的区别？
Null: 这是一个对象，但是为空。因为是对象，所以 typeof null 返回 ‘object’ 。
Undefined: undefined是全局对象（window）的一个特殊属性，其值是未定义的。

---

（44）：Node.js的适用场景?
高并发、聊天、实时消息推送

---

（45）：[“1”, “2”, “3”].map(parseInt) 答案是多少？
[1,NaN,NaN]
[“1”,”2”,”3”].map(function (){ console.log(arguments) })
[“1”, 0, Array[3]]
[“2”, 1, Array[3]]
[“3”, 2, Array[3]]
然后看 parseInt
parseInt(string, radix);
parseInt() 函数将给定的字符串以指定基数（radix/base）解析成为整数。就是 你想把string当成radix进制数解析成10进制
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
radix传入0时会把1当成是10进制数，所以“1”成功了。
radix传入1时…没有1进制数，所以不可能转换成功，返回NaN
radix传入2时，”3”不能当作2进制数处理所以也返回NaN

---

（46）：事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
3. ev.stopPropagation();

---

（47）：Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty

---

（48）：jquery 中如何将数组转化为json字符串，然后再转化回来？

 jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：     $.fn.stringifyArray = function(array) {        
  return JSON.stringify(array)   
   }  
    $.fn.parseArray = function(array) { 
        return JSON.parse(array)     }        然后调用：      $("").stringifyArray(array)

（49）：如何编写高性能的Javascript？
1使用 DocumentFragment 优化多次 append
2通过模板元素 clone ，替代 createElement
3使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
4使用三目运算符替代条件分支
5需要不断执行的时候，优先考虑使用 setInterval …….

---

（50）：什么是web worker?为什么我们需要他们？
Web worker帮助我们用异步执行javascript文件；
Web worker线程的限制是什么？
Web worker线程不能修改HTML元素，你可以自由使用javascript数据类型。
如何在javascript中创建一个worker线程？
var worker=new Worker(... .js);
如何终止web worker?
W.terminate(); //terminate(终止)；

---

（51）：.body中的onload()函数和jQuery中的$(document).ready()有什么区别
onload（）和document.ready（）的区别如下： 可以在页面中使用多个document.ready()，但只能使用一次onload()； document.ready()函数在页面DOM元素加载完成以后就会被调用，而onload()函数则要在所有的关联资源（包括图像，音频）加载完毕才会调用。