web前端面试题之JavaScript篇

Javascript面试题合集

ps：自己最近整理的一些关于js 的问题，不喜勿喷，有错的地方请指正，谢谢！！！

1.输出下列函数的值

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};var getName = function () { alert (4);};
function getName() { alert (5);}
//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1new Foo.getName();//2new Foo().getName();//3new new Foo().getName();//3

2.描述一下渐进增强和优雅降级之间的不同
答：
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

3.线程和进程的区别
答：
一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

4.JavaScript的typeof返回的类型有哪些？
答：string boolean number undefined function object

5.例举3种强制类型转换和2种殷式类型转换？
答：强制：parseInt pareseFloat number
隐式：== ===

6.split()和join()的区别
答：split()是将字符串切割成数组形式，join()是将数组转换为字符串形式

7.数组方法pop() push() unshift() shift()
答：push () 尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除

8.IE和标准下有哪些兼容性的写法？
答：var ev =ev || window.event
Document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement || ev.target

9.Ajax请求时get和post方式的区别
答：
一个在url后面，一个放在虚拟载体里面
Get由大小限制（只能提交少量参数）
Post方式相对于get方式显得更加安全
应用不同，get是请求数据，post是提交数据

10.Call和apply 的区别
答：object.call(this,obj1.obj2,obj3) object.apply(this,arguments)
Call可以接受多个参数，apply只能接受两个参数，apply相对于是把多个参数放在一个数组里面进行传递

11.Ajax请求时，如何解析json数据
答：使用JSON.parse()

12.事件委托是什么？
答：利用冒泡事件的原理，让自己的所触发的事件，让他的父元素代替执行

13.闭包是什么？有什么特性？对页面有什么影响？
答：

 function a(){
   var i=0;
   function b(){
     alert(++i);
   }
   return b;
 }
 var c = a();
 c();

通俗地讲就是：函数a的内部函数，被函数a外部的函数c引用的时候就形成了一个闭包
闭包就是能够读取其他函数内部变量的函数
特性：封闭性：外界无法访问闭包内部的数据；持久性：使得函数不被GC回收
缺点：如果过多使用闭包就会导致内存泄漏

14.如何阻止冒泡事件？
答：IE阻止冒泡事件：ev.cancelBubble=true
非IE阻止冒泡事件：ev.stopPropagation()

15.如何阻止默认事件？
答：(1)Return false; (2)ev.preventDefault();

16.添加、删除、替换、插入到某个节点的方法
答：
1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

17.解释jsonp的原理，以及为什么不是真正的Ajax？
答：jsonp的原理是动态创建script标签，然后回调服务器提供的js脚本
因为ajax的核心是通过XmlHttpRequest获取非被页面的内容，是页面无刷新请求数据操作

18.Jsonp和ajax的不同点？
答：
实质不同：
Jsonp的核心是动态添加script标签回调服务器提供的js脚本
ajax的核心是通过XmlHttpRequest获取非被页面的内容

Jsonp也不并不排斥同域的数据获取
Ajax通过服务器端代理也可以实现跨域

Jsonp是一种方式或者说非强制性的协议
Ajax也不一定非要用json格式来传递数据

Jsonp只支持get请求
Ajax支持get和post请求

19.Document.load和document.ready的区别是什么？
答：document.onload是在结构和样式外部，外部js以图片形式加载完才执行js
Document.ready是dom树创建完成就执行的方法，原生的js 中没有这个方法，jquery中有$().ready(function(){})

20==和 ===的区别是什么？
答：前者会自动转换类型，在判断是否相等；后者不会自动转换类型，直接比较

21.函数声明和函数表达式的区别是什么？
答：在JavaScript中，解析器会率先读取函数声明，并使其在任何执行代码之前可用，函数表达式则必须等到解析器执行到他所在的代码行，他才会被真正的解析执行；另外函数声明中的变量是可以提升的，但是函数表达式中的变量是无法提升的。

22.对作用域上下文和this的理解
答：

var User = {
 count: 1,
 getCount: function() {
  return this.count;
 }
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?
问两处console输出什么？为什么？
答案:是1和undefined。
func是在window的上下文中被执行的，所以不会访问到count属性。

23.看下面的代码，给出输出结果

for(var i = 1; i <= 3; i++){  //建议使用let 可正常输出i的值
  setTimeout(function(){
      console.log(i);   
  },0); 
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。

24.当dom节点被点击时，我们希望执行一个函数该怎么做？
答：
Box.onclick = function(){}
box.addEventLister(‘click’,function{},false)
<Button ’xxx()’></Button>

25.JavaScript的事件流模型都有什么？
答：
事件冒泡：事件开始由具体的元素接受，然后逐级向上传播
事件捕捉：事件由最不具体的节点先被接受，然后逐级向下，一直到具体
Dom事件流：三个阶段：事件捕捉，目标阶段，事件冒泡

26.看下列代码，输出什么？为什么？

var a = null;
alert(typeof a);
答案：object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

27.看下列代码，alert的值分别是多少？

<script>
     var a = 100;  
     function test(){  
    	alert(a);  
   	 a = 10;  //去掉了var 就变成定义了全局变量了
    	alert(a);  
}  
test();
alert(a);
</script>
正确答案是： 100， 10， 10

28.判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30
答：var reg = /¹\w{5,29}$/

29.JavaScript的2种变量范围有什么不同？
答：全局变量：当前页面内有效
局部变量：函数方法内有效

30.Null和undefined的区别
答：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

31.New操作符具体做了什么？
答：
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

32.Js延迟加载的方式有哪些？
答：defer async 动态创建dom方式（创建script，插入到dom中，加载完毕后callback） 按需异步加载js

33.Flash ajax各自的优缺点，在使用中如何取舍？
答：Flash ajax对比
(1)Flash 适合处理多媒体，矢量图形，访问机器；对css，处理文本上不足，不容易被搜索
(2)Ajax对css、文本支持很好，支持搜索；多媒体、矢量图形、访问机器不足
共同点：
都是与服务器的无刷新传递消息、用户离线和在线状态、操作dom

34.写一个获取非行间样式的函数
答：

function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obj,false)[attr] 
}
}

35.希望获取到页面中所有的checkbox该怎么做？（不使用第三方插件库）
答：

var inputs = document.getElementsByTagName("input");//获取所有的input标签对象  
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
  var obj = inputs[i];
  if(obj.type=='checkbox'){
     checkboxArray.push(obj);
  }
}

36.写一个function，清除字符转前后的空格
答：
String.prototype.trim= function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}

37.JavaScript语言特性中，很多方面的和我们基础的其他编程语言不一样，请举例
答：javascript语言实现继承机制的核心就是1(原型)，而不是Java语言那样的类式继承 。Javascript解析引擎在读取一个Object的属性的值时，会沿着2(原型链)向上寻找，如果最终没有找到，则该属性值为3undefined；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。

38.Cookie在客户机上是如何存储？
答：Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

39.如何获取JavaScript三个数中的最大值和最小值？
答：Math.max(a,b,c)//最大值 Math.min(a,b,c)//最小值

40.JavaScript是面向对象的，怎么体现JavaScript的继承关系？
答：使用prototype原型来实现

41.Form中的input可以设置为readonly和disable，请问这两者有什么区别？
答：readonly不可编辑，但是可以复制和选择，值是可以传递到后台的
Disabled不能编辑，不能复制，不能选择，值不可以传递到后台

42.列举JavaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。
答：主要数据类型：string Boolean number
复合数据类型：function object
特殊数据类型：undefined null

43.程序中捕获异常的方法是什么？
答：
try{
}catch(e){
}finally{
}

44.Ajax原理
答：
(1)创建对象
var xhr = new XMLHttpRequest();
(2)打开请求
xhr.open(‘GET’, ‘example.txt’, true);
(3)发送请求
xhr.send(); 发送请求到服务器
(4)接收响应
xhr.onreadystatechange =function(){}
(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
(2)当readystate==4时，表示已经接收到全部响应数据。
(3)当status ==200时，表示服务器成功返回页面和数据。
(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

45.解释什么是Json？
答：JSON是一种轻量级的数据交换格式
JSON是独立于语言和平台，JSON解析器和JSON库支持许多不同的编程语言
JSON的语法表示3种类型：简单值（字符串，数值，布尔值，null），数组，对象

46.JavaScript中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令是什么？
答： alert confirm prompt

47.以下代码的结果是什么？

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()
分别alert出 undefined，lily，（变量声明提前问题）

48.浏览器的滚动距离
答：可视区域距离页面顶部的距离scrollTop=document.documentElement.scrollTop||document.body.scrollTop
49.可视区的大小
答:(1) innerXXX（不兼容IE）
Window.innerHeight 可视区高度，包含滚动条宽度
Window.innerWidth 可视区宽度，包含滚动条宽度
(2)document.documentElement.clientXXX（兼容IE）
Document.documentElement.clientWidth 可视区宽度，不包含滚动条宽度
Document.documentElement.clientHeight 可视区高度，不包含滚动条宽度

50.节点的种类有几种，分别是什么？
答：元素节点：nodeType=1
文本节点：nodeType=3
属性节点：nodeType=2
注释节点：nodeType=8
文档节点：nodeType===9
通过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。

51.innerHTML和outerHTML的区别
答：innerHTML（元素内包含的内容）
outerHTML（自己以及元素内的内容）

52.offsetWidth offsetHeight和clientWidth clienHeight的区别
答：
(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）

53.闭包的好处是什么？
答：
(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高

54.冒泡排序法算法

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
if (array[j] > array[j + 1]){
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
 }
}
}

55.快速排序
答：思路：采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边。

var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
    if(arr.length == 0) {
        return [];  // 返回空数组    }
    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }
    return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
//[1, 2, 3, 4, 5, 6, 7]

56.JavaScript种截取字符串的方式
答：slice() substring() substr()
substring()方法返回一个索引和另一个索引之间的字符串，语法如下：
str.substring(indexStart, [indexEnd])
substr()方法返回从指定位置开始的字符串中指定字符数的字符，语法如下：
str.substr(start, [length])
slice()方法返回一个索引和另一个索引之间的字符串，语法如下：
str.slice(beginIndex[, endIndex])

57.JavaScript面向对象种实现继承
答：

function Person(name){
  this.name = name;
}
Person.prototype.showName = function(){
  alert(this.name);
}
function Worker(name, job){
  Person.apply(this,arguments)
  this.job = job;
}
for(var i in Person.prototype){
  Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();

58.判断一个字符串中出现次数最多的字符，统计这个字符
答：

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
  if(!json[str.charAt(i)]){
    json[str.charAt(i)] = 1;
  }else{
    son[str.charAt(i)]++;
  }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
  if(json[i]>iMax){
    iMax = json[i];
    iIndex = i;
  }
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

59.编写一个函数，求一个字符串的字节长度
答：
//假设一个中文占两个字节

var str = '22两是';
alert(getStrlen(str))
function getStrlen(str){
  var json = {len:0};
  var re = /[\u4e00-\u9fa5]/;
  for (var i = 0; i < str.length; i++) {
    if(re.test(str.charAt(i))){
       json['len']++;
     }
  };
 return json['len']+str.length;
}

60.编写一个函数，去掉一个数组的重复元素
答：方法一：

var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
  if(!json[arr[i]]){
    json[arr[i]] = true;
  }else{
    json[arr[i]] = false;
  }
  if(json[arr[i]]){
    arr2.push(arr[i]);
  }
};
for (var i = 0; i < arr.length; i++) {
  if(!aa(arr[i], arr2)){
    arr2.push(arr[i])
  }
};
function aa(obj, arr){
   for (var i = 0; i < arr.length; i++) {
      if(arr[i] == obj) return true;
      else return false;
   };
}
alert(arr2)

方法二：ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

function unique(arr) {
  return [...new Set(arr)]
}var arr = [1,2,3,3,3,2];
unique(arr);

方法三：使用includes来判断数组是否含有某个值

var arr = [1,2,3,4,2,3];
var arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(!arr2.includes(arr[i])){
       arr2.push(arr[i]);
    }
} 
console.log(arr2);

61.写出3个使用this的经典应用
答：
事件： 如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this

62.如何实现深度克隆？
答：

var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';
var json2 = clone(json);
alert(json['c'])
function clone(obj){
  var oNew = new obj.constructor(obj.valueOf());
  if(obj.constructor == Object){
    for(var i in obj){
    oNew[i] = obj[i];
    if(typeof(oNew[i]) == 'object'){
       clone(oNew[i]);
    }
  }
 }
return oNew;
}

63.JavaScript中是如何检测是一个变量还是string类型，请写出函数实现
答：
typeof(obj) == ‘string’
obj.constructor == String;

64.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
答：

var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

65.请解释什么是JavaScript的模块模式，并举出实用实例
答：js模块化mvc（数据层，表现层，控制层）
Seajs
命名空间

66.实现一个函数，获取url的参数值
答：
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + “=([^&]*)(&|$)”, “i”);
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}

67.降维数组
答：
var arr=[[1,2],[3,4]];
function Jw(obj){
return Array.prototype.concat.apply([],obj);
}
Jw(arr);

68.对象变成数组
答：

var data={a:1,b:2,c:3};function toArr(obj){
var arr1=[];
for(var i in obj){
    arr1.push(obj[i]);
}
return arr1;
// arr1.fitter(function(x){console.log(arr1(x))});}
console.log(toArr(data));

69.如何清除定时器
答：window.clearInterval()和window.cleatTimeout()

70.下列程序输出什么？

'11' * 2
'a8' * 3
var a = 2, b = 3;
var c = a+++b; // c = 5

71.下列程序输出什么？

    var num = 10;
    var obj = {
        num:8,
        inner: {
            num: 6,
            print: function () {
                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
(obj.inner.print = obj.inner.print)(); //888 这个点没有太理解，虽然答对了

72.Dom事件委托原理是什么？有什么优缺点？
答：原理是事件冒泡机制
优点是：可以大量节省内存的占用，减少事件注册；可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适。
缺点是：事件代理的常用应用程序应该仅限于上述需求，如果把所有事件都用事件代理处理，可能会出现事件误判，也可能会导致内存泄露

73.API是什么？
答：API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。在编程语言中，API通常指语言中内置的函数、接口、类等系统工具。我们编程人员无需关心这些函数的实现细节，只需要按照API文档的要求，给函数传入指定参数接受返回值即可。在前后台传递数据，API也是后台提供给前台的接口，前台只需要按照要求请求接口并发送指定参数，结课接受JSON字符串

74.哪些操作会导致内存泄露？
答：大量使用全局变量 大量使用闭包 清除DOM节点时，只清除节点，而没有删除事件

75.有这样一个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 serilizeUrl(url) {
 var urlObject = {};
  if (/\?/.test(url)) {
   var urlString = url.substring(url.indexOf("?") + 1);
   var urlArray = urlString.split("&");
   for (var i = 0, len = urlArray.length; i < len; i++) {
    var urlItem = urlArray[i];
    var item = urlItem.split("=");
    urlObject[item[0]] = item[1];
   }
  return urlObject
}
return null;}

76.JavaScript如何实现继承？
答：构造继承法 原型继承法 实例继承法

77.JavaScript创建对象的几种方式？
答：4种方式；使用json创建对象 使用object创建对象 通过构造函数创建对象 使用内置函数创建对象
1、var obj = {};（使用json创建对象）
如：obj.name = ‘张三’;​
obj.action = function ()
{
alert(‘吃饭’);
};
2、var obj = new Object();（使用Object创建对象）
如：obj.name = ‘张三’;​
obj.action = function ()
{
alert(‘吃饭’);
}​;
3、​通过构造函数创建对象。
(1)、使用this关键字​
如：var obj = function (){
this.name =‘张三’;
this.age = 19;
this.action = function ()
alert(‘吃饭’);
}​;
}​
(2)、使用prototype关键字
如：function obj (){}
​ obj.prototype.name =‘张三’;
​obj.prototype.action=function ()
{
alert(‘吃饭’);
}​;
4、使用内置对象创建对象。
如：var str = new String(“实例初始化String”);
var str1 = “直接赋值的String”;
var func = new Function(“x”,“alert(x)”);//示例初始化func
var obj = new Object();//示例初始化一个Object

78.字符串反转，如将’123456789’变成‘987654321’
答：//思路：先将字符串转为数组split()，利用数组的反序函数reverse()，再利用join(‘’)转为字符串
var str = ‘12345678’;
str = str.split(’’).reverse().join(’’);

79.将数字123456789转化为rmb形式123,456,789
答：//思路：先将数字转为字符， str= str + ‘’ ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！

function re(str) {
    str += '';
    return str.split("").reverse().join("");
}
function toRMB(num) {
    var tmp='';
    for (var  i  =  1;  i  <=  re(num).length;  i++) {    
        tmp  +=  re(num)[i  -  1];    
        if (i  %  3  ==  0  &&  i  !=  re(num).length) {        
            tmp  +=  ',';    
        }
    }
    return re(tmp);
}

80.生成五个不同的随机数
答：//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放 弃当前生成的数字！

var num1 = [];
for(var i = 0; i < 5; i++){
 num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
 for(var j = 0; j < i; j++){
   if(num1[i] == num1[j]){
     i--;
   }
 }
}

81.window.location.search()返回的是什么？
答：http://localhost:8080/xxx?ver=1.0&id=123
返回值：?ver=1.0&id=timlq 也就是问号后面的部分

82.window.location.reload()作用？
答：刷新当前页面

83.JavaScript的循环语句有哪些？
答：for for…in while do…while for…of foreach

84.闭包：下面这个ul，如何实现点击每一列的时候alert其index？

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
window.function(){
var lis = document.getClementById(‘test’).children;
For(var i=0;i<lis.length;i++){
lis[i].(function(i){
return function(){
alert(i)
}
})(i)
}
}

85.列出3条以上ff和IE的脚本兼容问题
答：
(1) window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源，而FF用target获取事件源
(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)

86.在JavaScript中什么时伪数组？如何将伪数组转换为真正的数组？
答：伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

87.请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到：http://127.0.0.1/save.php
答：

window.function(){
    var form=document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "http://127.0.0.1/save.php");
    var input=document.createElement("input");
    form.appendChild(input);
    document.body.appendChild(form);
    input.value="cxc";
    form.submit();//提交表单
}

88.使用JavaScript实现升序排序，数据为23、45、18、37、92、13、24
答：

function sort(arr){
    for (var i = 0; i <arr.length; i++) {
        for (var j = 0; j <arr.length-i; j++) {
            if(arr[j]>arr[j+1]){
                var c=arr[j];//交换两个变量的位置
                arr[j]=arr[j+1];
                arr[j+1]=c;
            }
        };
    };
    return arr.toString();
}
console.log(sort([23,45,18,37,92,13,24]));

89.一些程序题

第1题：
function setName(){
    name="张三";
}
setName();
console.log(name);
答案："张三"
第2题：
//考点：1、变量声明提升 2、变量搜索机制
var a=1;
function test(){
    console.log(a);
    var a=1;
}
test();
答案：undefined
第3题：
var b=2;
function test2(){
    window.b=3;
    console.log(b);
}
test2();
答案：3
第4题：
c=5;//声明一个全局变量c
function test3(){
    window.c=3;
    console.log(c);        //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值
    var c;
    console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c
}
test3();
第5题：
var arr = [];
arr[0]  = 'a';
arr[1]  = 'b';
arr[10] = 'c';
alert(arr.length); //答案：11
console.log(arr[5]); //答案：undefined
第6题：
var a=1;
console.log(a++);        //答案：1
console.log(++a);        //答案：3
第7题：
console.log(null==undefined); //答案：true
console.log("1"==1);       //答案：true，因为会将数字1先转换为字符串1
console.log("1"===1);     //答案：false，因为数据类型不一致
第8题：
typeof 1;        "number"
typeof "hello";        "string"
typeof /[0-9]/;        "object"
typeof {};        "object"
typeof null;        "object"
typeof undefined;   "undefined"
typeof [1,2,3];     "object"
typeof function(){}; //"function"
第9题：
parseInt(3.14);             //3
parseFloat("3asdf");         //3
parseInt("1.23abc456");
parseInt(true);//"true" NaN
第10题：
//考点：函数声明提前
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    //var foo = 11;
}
alert(typeof bar());//"function"
第11题： 
//考点：函数声明提前
var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
alert(foo);//答案：1
第12题：
console.log(a);//是一个函数
var a = 3;
function a(){}
console.log(a);3
第13题：
//考点：对arguments的操作
function foo(a) {
    arguments[0] = 2;
    alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值
}
foo(1);
第14题：
function foo(a) {
    alert(arguments.length);//答案：3，因为arguments是对实参的访问
}
foo(1, 2, 3);
第15题
bar();//报错
var foo = function bar(name) {
    console.log("hello"+name);
    console.log(bar);
};
//alert(typeof bar);
foo("world");//"hello"；
console.log(bar);//undefined
console.log(foo.toString());
bar();//报错
第16题： 
function test(){
    console.log("test函数");
}
setTimeout(function(){
    console.log("定时器回调函数");
}, 0)
test();
结果：
test函数
定时器回调函数

90.解决跨域问题的方式
答：jsonp nginx反向代理 window.name+iframe实现跨域 代理页面+iframe实现跨域 WebSocket window.postMessage() location.hash+iframe 跨域资源共享（CORS） nodeJS中间件代理跨域

91.Jquery绑定事件的方式有几种？
答：4种，bind on live delegate

92.Git和svn的区别
答：SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而干活的时候，用的都是自己的电脑，所以首先要从中央服务器哪里得到最新的版本，然后干活，干完后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作，如果在局域网还可以，带宽够大，速度够快，如果在互联网下，如果网速慢的话，就纳闷了。
Git是分布式版本控制系统，那么它就没有中央服务器的，每个人的电脑就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本都是在自己的电脑上。既然每个人的电脑都有一个完整的版本库，那多个人如何协作呢？比如说自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，你们两之间只需把各自的修改推送给对方，就可以互相看到对方的修改了

93.Jquery中attr和prop有什么区别？
答：HTML原生自带的属性用prop，我们自己定义的属性使用attr

94.简述一下你理解的面向对象
答：万物皆对象，把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.
面向对象具有封装性,继承性,多态性。
封装:隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.

95.JavaScript提供了哪几种异步方式
答：回掉函数 事件监听 promise对象

96.Ajax请求的方式有几种
答：8种
$.get(url,[data],[callback])
$.getJSON(url,[data],[callback])
$.post(url,[data],[callback],[type])
$.ajax(opiton)
$.getScript( url, [callback] )
jquery对象.load( url, [data], [callback] )
serialize()
serializeArray()

97.slice()和splice()的区别
答：slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
返回end-start个数，没有定义end，就是start后面的全部
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,…,itemX)
index是开始位置，howmany是删除个数，后面是添加元素
98.如果已经有三个promise，A、B和C，想串行执行，该怎么写？
答：
// promise
A.then(B).then©.catch(…)
// async/await
(async ()=>{
await a();
await b();
await c();
})()

99.JavaScript是一门什么样的语言，它有哪些特点？
答：JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，也是直接作用于客户端的脚本语言。特点是简单、动态、跨平台、安全

100.把两个数组合并，并删除第二个元素。
var array1 = [‘a’,‘b’,‘c’];
var bArray = [‘d’,‘e’,‘f’];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

101.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];
        }
   }
}

102.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
答：给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束
需要注意浏览器边界的情况

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		#box {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var box = document.getElementById("box");
			box.onmousedown = function (e) {
				var e = e || window.event;
				var diffX = e.clientX - box.offsetLeft;
				var diffY = e.clientY - box.offsetTop;
				document.onmousemove = function (e) {
					var e = e || window.event;
					box.style.left = e.clientX - diffX + "px";
					box.style.top = e.clientY - diffY + "px";
				};
				document.onmouseup = function () {
					document.onmousemove = null;
					document.onmousedown = null;
				};
			};

		};
	</script>
</head>

<body>
	<div id="box"></div>
</body>
</html>

103.Js函数中得arguments是数组吗？不是数组如何转换为数组？
答：在call的方法里面是数组，其他的地方视情况而定。
将不是数组的arguments转为数组的方法
方法一：

function fun(arguments){
  var arr =[];
  for(var i = 0 ; i<arguments.length;i++){
      arr.push(arguments[i]);
  }
  return arr;
}
方法二：
function fun(){
return [].slice.call(arguments); 
}

依旧可以转化成数组。也许有人对第二种方法有疑惑，arr.slice(param1,param2) 这个应该不会陌生。
而call（）在这里就是让arguments对象（本来是没有slice（）这一方法的）但是借用了array对象的这个方法 的一种手段。

104.以最小的改动修改以下代码的错误（可用es6）

 const obj = {
        skills: ['vue', 'react', 'angular'];
        say: function () {
            for (var i = 0 ,len = this.skills.length; i < len; i++) {
                setTimeout(function () {
                    console.log('......no.$ {i}$ {this.skills[i]}')
                })
                console.log(i)
            }
        }
};
obj.say()

修改:关键点是要在循环内以此输出i，可以使用let声明变量；另外因为函数的多层嵌套，setTimeout函数面的this.skills指代不明确，如果没有在setTimeout中声明，那么它就会去全局搜索，如果全局不存在这个变量，就会报。
Es6 的箭头函数的this定义是：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

const obj = {
        skills: ['vue', 'react', 'angular'],
        say: function () {
            for (let i = 0, len = this.skills.length; i < len; i++) {
                setTimeout(() => {
                    console.log('......no.' + i + ' ' + this.skills[i])
                })
                console.log(i)
            }
        }
    }
obj.say();

105.求最大公约数
编写一个递归函数，传入两个值，求出最大公约数;
答案：
//最大公约数

function gcd( x ,  y){  
     var max,min,temp;  
     max = x > y ? x : y ;  
     min = x < y ? x : y ;  
     while( max % min ){  
        temp = max % min;  
        max = min;  
        min = temp;  
    }  
     return min;  
}

//通过递归实现

function digui(m , n){
     return m%n==0?(n):(digui(n,m%n));
}

106.下列代码输出什么

var a = [];
for(let i = 0; i < 10; i++){
    a[i] = function () {
        console.log(i);
    }
}
a[6]();

//输出结果：6
//这个题考的匿名函数，
//for循环是给每个数组元素赋予相对应的匿名函数：a[0] = function(){console.log(0)}、a[1] = function(){console.log(1)}、a[2] = function(){console.log(2)}…a[9] = function(){console.log(9)};但是此时函数都没有被调用，只有被调用用函数才会执行；

持续更新中~~~

---

1. a-zA-Z ↩︎