js部分面试题
}else{
obj.style[attr]=value
}
}
15.事件委托是什么?
事件委托(event delegation)：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
解释：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。
事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
16.闭包是什么，有什么特性，对页面有什么影响?
闭包就是能够读取其他函数内部变量的函数。
影响：
由于闭包会使函数中的变量都被保存到内存中，对内存的消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
17.如何阻止事件冒泡和默认事件?
if(event && event.stopPropagation){ //非IE
event.stopPropagation();
}else{ //IE
window.event.cancelBubble = true;
}
18. 添加、移除、移动、复制、创建和查找节点的方法?
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
getElementsByClassName() //通过元素的Class属性的值
19.解释jsonp的原理，以及为什么不是真正的ajax?
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
20.javascript的本地对象，内置对象和宿主对象?
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
21.document load 和document ready的区别?
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
22.””和“=”的不同?
返回值：相等true，不相等false
==是先转换数据类型再进行比较，只要值相等，就相等；
===是不转换数据类型进行等比较，必须是值相等，类型相等，才相等。
23.javascript的同源策略?
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
24.编写一个数组去重的方法?
function clearRepeatArray(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
break;
}
}
}
return arr;
}
26.排序算法?
function paiXu(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
27：希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ?
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len–) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
28：什么是Ajax和JSON，它们的优缺点?
AJAX（Asynchronous JavaScript And XML）：
即异步JavaScript和XML，它不是一种新的编程语言即异步JavaScript和XML，它不是一种新的编程语言,
而是一种用于创造更好更快以及交互性更强的Web应用程序技术（用于在web页面中实现异步数据交互）。
优点：
可以使得每一次请求更加迅捷，对于每一次请求返回的不是整个页面，只仅仅是所需要的返回数据。
也就是可以使页面不重载全部内容的情况下加载。避免用户不断刷新或者跳转页面，提高用户体验 。
缺点：
对搜索引擎不友好，（要实现ajax下的前后退功能成本较大，可能造成请求数据的增加跨域问题限制）
JSON（Java Script Object Notation）：
是一种轻量级的数据交换格式，ECMA的一个子集。可在不同平台之间进行数据交换，是数据的载体。
是一种轻量级的数据交换格式，ECMA的一个子集。可在不同平台之间进行数据交换，是数据的载体。
优点：
轻量级的数据交换格式, 易于人的的阅读和编写，占用宽带小； 便于机器（JavaScript）解析，
（可以通过简单的eval()进行json数据的读取）和生成 ,支持复合数据类型（数组，对象，字符串，数字） 支持多种语言;
缺点:没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性。
JSON格式目前在Web Service中推广还属于初级阶段
29：有这样一个URL：http://item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e，
请写一段JS程序提取URL中的各个GET参数(参数名和 参数个数不确定)，将其按key-value形式返回到一个json结构中，
如{a:’1′, b:’2′ , c:”, d:’xxx’, e:undefined}?*/
function test(){
var url=“http://item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e”;
//找到问号的下标，截取下标加1之后的字符
var index=url.lastIndexOf(“?”);
var str=url.substring(index+1);
//1、split(“&”)变成数组
var arr = str.split(“&”);
//2、遍历数组
for(var i=0;i<arr.length;i++){
if(arr[i].indexOf(“=”)>-1){//如果元素有等号；把等号替换成:" 再在最后拼接 "
//a=1 --》 a:“1”
arr[i]=arr[i].replace(“=”,“:\”“)+”\“”;
}else{
//如果元素没有等号，直接在后面拼接 :undefined;
//e --》 e:undefined;
arr[i]=arr[i]+“:undefined”;
}
}
//3、把数组的每个元素用join拼接成字符串 resultStr；
var resultStr = arr.join(“,”);
//4、在resultStr的两端分别拼接上 左花括号和右花括号
resultStr = “{”+resultStr+“}”;
//5、把json的字符串形式变成对象；
var keyValueJson = eval(“(”+resultStr+“)”);
console.log(keyValueJson.a);
console.log(keyValueJson.b);
console.log(keyValueJson.c);
console.log(keyValueJson.d);
console.log(keyValueJson.e);
}
30：正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？*/
当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var regMail = /^\w+@\w+(\.(net|com|cn))+$/;
31：.Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
案例：
那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；
假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
32： 下面这个ul，如何点击每一列的时候alert其index?（闭包）？
- 这是第一条
- 这是第二条
- 这是第三条
- \*/
var lis;
window.onload = function(){
lis = document.getElementById(“test”).children;
for(var i=0;i<lis.length;i++){
lis[i].onclick = demo;
}
}
function demo(){
for(var i=0;i<lis.length;i++){
lis[i].ord = i;
function liIndex(){
alert(this.ord);
}
lis[i].onclick = liIndex;
}
}
33： 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace(“hello world”) // -> ‘h e l l o w o r l d’*/
function addSpace(str){
var newStr = “”;
for(var i=0;i<str.length;i++){
newStr += str.charAt(i);
if(str.charAt(i)!=" "){
newStr += " ";
}
}
return newStr.substring(0,newStr.length-1);
}
function test(){
var s = addSpace(“hello world”);
alert(s);
}
34：函数声明与函数表达式的区别？
// 函数声明
function funDeclaration(type){
return type===“Declaration”;
}
// 函数表达式
var funExpression = function(type){
return type===“Expression”;
}
案例：
funDeclaration(“Declaration”); //=> true
function funDeclaration(type){
return type===“Declaration”;
}
funExpression(“Expression”); //=>false
var funExpression = function(type){
return type===“Expression”;
}
结论：
用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用；
而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。
为什么会这样呢？！这就要理解Javascript Function两种类型的区别：
用函数声明创建的函数可以在函数解析后调用（解析时进行等逻辑处理）；
而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用。
35：在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：
无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
在 JavaScript 中， 函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合（NodeList）都不是真正的数组，
不能使用 push 等方法，在有这种需要的时候只能先转换为真正的数组。
对于 arguments，可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的，
但对于 NodeList 则不行了，其在 IE8 及以下将会报错，只能说其 JS 引擎有所限制。
因此，如果需要把 NodeList 转换为真正的数组，则需要做下兼容处理。
function makeArray© {
try{
return Array.prototype.slice.call©;
}catch(e){
var ret = [];
var len = c.length;
for(var i=0;i<len;i++) {
ret[i] = c[i];
}
return ret;
}
}
36：想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）?
/*
1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
2.mousedown事件触发后，开始拖拽
3.mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4.mouseup时，拖拽结束
5.需要注意浏览器边界的情况
*/
37：var numberArray = [3,6,2,4,1,5]; （考察基础API）?
-
实现对该数组的倒排，输出[5,1,4,2,6,3]
-
实现对该数组的降序排列，输出[6,5,4,3,2,1]*/
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3 reverse() 方法用于颠倒数组中元素的顺序。
numberArray.sort(function(a,b){ //6,5,4,3,2,1
return b-a;
});
38：.将字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{name}替换成Tony （使用正则表达式）?*/
“{id}{id}{id}_{$name}”.replace(/{\$id}/g, ‘10’).replace(/{\$name}/g, ‘Tony’);
39：foo = foo||bar ，这行代码是什么意思？为什么要这样写？*/
if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：
作为"&&“和”||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
40：为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义?*/
function escapeHtml(str) {
return str.replace(/[<>"&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\”":
return “”";
}
});
}
41：写一个function，清除字符串前后的空格。（兼容所有浏览器）?
使用自带接口trim()，考虑兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, “”).replace(/\s+$/,“”);
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == “test string”); // alerts “true”
42：Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
43：谈一谈你对javascript的理解，javascript能做什么?
理解：
1. javascript是主要用在web中的一种动态的解析型语言。
2. 可以改变网页里的数据，根据用户点击等操作告诉服务器可以动态的改变网页的大小。
3. JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,是一种轻量级的编程语言。
同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作,
可以将动态的文本放入 HTML 页面, 可以对事件作出响应, 可以读写 HTML 元素, 可被用来验证数据, 可被用来检测访问者的浏览器, 可被用来创建 cookies
语法：
1. 要记住JavaScript是一门面向对象的语言，JavaScript 中所有变量都是对象，除了两个例外 null 和 undefined。注意数字也是对象
2. 要记住JavaScript中函数是一等公民。比如在Java这样的基于类的编程语言中，每个方法不能独立存在，必须定义在某个类中，而Javascript中是可以单独定义函数的。
3. 要记住JavaScript不是基于类的面向对象语言，它是基于原型的。现在的主流的面向对象的编程语言都是基于类来设计的，
所以很多人难以理解一门面向对象语言里为什么会没有类。但实际上基于类还是基于原型（Prototype）都只是面向对象编程语言的不同的实现风格。
44：在javascript中如何检测客户端的浏览器和操作系统类型?
Navigator对象包含了Web浏览器的基本信息(如名称，版本，操作系统等)
通过window.navigator方式可以引用该对象，并利用它的属性读取客户端基本信息
Navigator的5个主要属性：
appName:Web浏览器的名称
appVersion:浏览器的版本号和其他版本信息
userAgent:浏览器在它的USER-AGENT HTTP标题中发送的字符串。该属性包含appName,appVersion属性的所有信息
appCodeName:浏览器的代码名
platform:客户浏览器所在的操作系统
案例：
45：Cookie在客户机上是如何存储的?
理解：
Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，
Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。
当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，
有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
46：Prompt box是什么？它的返回值有什么用？
提示框 （prompt()）：
1. prompt() 方法用于显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮，则返回 null。
如果用户单击确认按钮，则返回输入字段当前显示的文本。
2. 在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。
在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
47：如何获取javascript所能表示的最大值和最小值？
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
48：Null和Undefined有和区别与联系?
/*
概念：
null ：
文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0
-