前言

本文收集了一些前端面试题，主要是为了今后的求职，同时也借助这些面试题更进一步系统的学习、透彻的学习，形成自己的知识链。这并不是投机取巧，临时抱佛脚哈，自己也明白如果这么做肯定对未来的发展不利。

JavaScript

1、JavaScript对数组的操作方法有哪些？

（1）join()方法：接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串（2）push()方法：接收任意数量的参数，把它们逐个添加到数组末尾,并返回修改后数组的长度（3）pop()方法：从数组末尾移除最后一项,减少数组的length值,然后返回移除的项（4）shift()方法：移除数组中第一个项并返回改项,同时将数组长度减1 （5）unshift()方法：在数组前端添加任意个项并返回新数组的长度（6）sort()方法：对数组中的数据进行排序（7）concat()方法：可以基于当前数组中的所有项创建一个新数组（8）slice()方法：基于当前数组中的一或多个项创建一个新数组（9）indexOf()方法：从数组的开头(位置0)开始向后查找（10）lastIndexOf()：从数组的末尾开始向前查找（11）splice()方法：恐怕要算是最强大的数组方法了,它有很多种用法，splice()的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下3种：

删除：可以删除任意数量的项,只需指定2个参数（要删除的第一项的位置和要删除的项数），例如：splice(0,2)会删除数组中的前两项
插入：可以向指定位置插入任意数量的项,只需要提供3个参数（起始位置,0(要删除的项数)和要插入的项），例如：splice(2,0,"red","green")会从当前数组的位置2开始插入字符串"red"和"green"
替换：可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要提供3个参数（起始位置,要删除的项数和要插入的任意数量的项），例如：splice(2,1,"red","green")会删除当前数组位置2的项,然后再从位置2开始插入字符串"red"和"green"；原文地址

数组面试题 （1）计算给定数组arr中所有元素的总和

function sum(arr) {
  var result = 0;
  for (var i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
}
var arr = [4,5,6,1];
console.log(sum(arr));

（2）合并数组 arr1 和数组 arr2，不要直接修改数组 arr，结果返回新的数组

function concat(arr1, arr2) {
  var arr3 = arr1.concat(arr2);
  return arr3;
}
var Arr1 = [4, 5, 2];
var Arr2 = [7, 8, 3];
console.log(concat(Arr1, Arr2));

（3）删除数组 arr 第一个元素，不要直接修改数组 arr，结果返回新的数组

function curtail(arr) {
  var arr2 = arr.slice(0);
  arr2.shift();
  return arr2;
}
var Arr = [1, 2, 34, 5];
console.log(curtail(Arr));

（4）在数组 arr 开头添加元素 item，不要直接修改数组 arr，结果返回新的数组

function prepend(arr, item) {
  var arr2 = arr.slice(0);
  arr2.unshift(item);
  return arr2;
}

（5）移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回

function removeWithoutCopy(arr, item) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == item) {
      arr.splice(i, 1);
      i--;
    }
  }
  return arr;
}
var Arr = [3, 4, 5, 6, 6, 6, 1];
console.log(removeWithoutCopy(Arr, 6));

（6）找出元素 item 在给定数组 arr 中的位置

function indexOf(arr, item) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == item) {
      return i;
    }
  }
  return -1;
}

2、JavaScript如何设置获取盒模型对应的宽和高？

（1）dom.style.width/height（只能获取到内联样式的宽和高，输出值带单位）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="box" style="height: 200px;"></div>
    <script>
      var getHeight = document.getElementById("box");
      console.log(getHeight.style.height);
    </script>
  </body>
</html>

（2）dom.currentStyle.width/height（只有IE浏览器支持，输出值带单位）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #box {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      var getHeight = document.getElementById("box");
      document.write(getHeight.currentStyle.height);
    </script>
  </body>
</html>

（3）window.getComputedStyle(dom).width/height（兼容性好，输出值带单位）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #box {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      var getHeight = document.getElementById("box");
      document.write(window.getComputedStyle(getHeight).height);
    </script>
  </body>
</html>

（4）dom.getBoundingClientRect().width/height（兼容性好，输出值不带单位）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #box {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      var getHeight = document.getElementById("box");
      document.write(getHeight.getBoundingClientRect().height);
    </script>
  </body>
</html>

3、DOM事件的级别

（1）DOM0：element.onclick = function(){} （2）DOM2：element.addEventListener('click',function(){},false) 【拓展】所谓的0级dom与２级dom事件就是不同版本间的差异，具体的说就是，对于不同的ｄｏｍ级别，如何定义事件处理，以及使用时有什么不同。比如在dom0级事件处理中，后定义的事件会覆盖前面的，但是dom2级事件处理中，对一个按钮点击的时间处理就没有被覆盖掉。（3）DOM3：element.addEventListener('keyup',function(){},false)

4、DOM事件模型

（1）冒泡型事件处理模型（Bubbling）：冒泡型事件处理模型在事件发生时，首先在最精确的元素上触发，然后向上传播，直到根节点，反映到DOM树上就是事件从叶子节点传播到根节点。（2）捕获型事件处理模型（Captrue）：相反地，捕获型在事件发生时首先在最顶级的元素上触发，传播到最低级的元素上，在DOM树上的表现就是由根节点传播到叶子节点。【捕获事件的具体流程】 window==>document==>html==>body==>父级元素==>目标元素（3）标准的事件处理模型分为三个阶段：

父元素中所有的捕捉型事件（如果有）自上而下地执行
目标元素的冒泡型事件（如果有）
父元素中所有的冒泡型事件（如果有）自下而上地执行

5、Event对象的常见应用

（1）event.preventDefault()：阻止事件的默认行为（2）event.stopPropagation()：阻止事件的进一步传播，也就是阻止冒泡（3）event.stopImmediatePropagation()：阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。（4）event.currentTarget：返回绑定事件的元素（5）event.target：返回触发事件的元素

6、JavaScript自定义事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Event</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="ev">
      <span>目标元素</span>
    </div>
    <script>
      var event = new Event('test');
      ev.addEventListener('test', function () {
        console.log('test dispatch');
      })
      ev.dispatchEvent(event);
    </script>
  </body>
</html>

7、JavaScript类的声明

// 1、类的声明
function Animal() {
  this.name = "name";
}
// 2、ES6中类的声明
class Animal2 {
  constructor() {
    this.name = name;
  }
}
// 3、实例化类
console.log(new Animal(), new Animal2());

8、JavaScript类之间的继承

（1）借助构造函数实现不完全继承，无法继承方法：

function Parent1() {
  this.name = 'parent1';
}
function Child1() {
  Parent1.call(this);
  this.type = 'child1';
}
console.log(new Child1());

（2）借助原型链实现继承，所有的属性和方法都得去原型链上去找，因而找到的属性方法都是同一个，所以直接利用原型链继承是不现实的。

function Parent2() {
  this.name = 'parent2';
  this.play = [1, 2, 3];
}
function Child2() {
  this.type = 'child2';
}
Child2.prototype = new Parent2();
console.log(new Child2());
var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play);
s1.play.push(4);

（3）组合方式实现继承

function Parent3() {
  this.name = 'parent3';
  this.play = [1, 2, 3];
}
function Child3() {
  Parent3.call(this);
  this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);

（4）组合继承的优化1

function Parent4() {
  this.name = 'parent4';
  this.play = [1, 2, 3];
}
function Child4() {
  Parent4.call(this);
  this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
console.log(s5.play, s6.play);
console.log(s5 instanceof Child4, s5 instanceof Parent4);
console.log(s5.constructor);

（5）组合继承的优化2（俗称寄生式继承）

function Parent5() {
  this.name = 'parent5';
  this.play = [1, 2, 3];
}
function Child5() {
  Parent5.call(this);
  this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
var s7 = new Child5();
console.log(s7 instanceof Child5, s7 instanceof Parent5);
console.log(s7.constructor);

9、创建对象有几种方法？

（1）字面量：

var k1 = {
  name: 'k1'
};
var k2 = new Object({
  name: 'k2'
});

（2）通过构造函数

var m = function (name) {
  this.name = name;
};
var k3 = new m('k3');

（3）通过Object.create

var p = {
  name: 'ppp'
};
var k4 = Object.create(p);

11、什么是原型和原型链？有什么特点？

（1）每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象不存在这个属性，那么就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。（2）特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。（3）更多原型知识1

12、JavaScript的运行机制

（1）JavaScript是单线程，一个时间段内，JavaScript只能干一件事情。任务队列分为同步任务和异步任务。（2）异步任务类型：setTimeout和setInterval、DOM事件、ES6中的Promise

13、JavaScript异步加载的方式

（1）动态脚本加载；（2）defer （3）async

14、JavaScript的typeof返回哪些数据类型？

Ｏbject number function boolean underfind、String; 【拓展】比较混淆的是：介绍JavaScript的基本数据类型答案为：Undefined、Null、Boolean、Number、String、Symbol(创建后独一无二且不可变的数据类型

15、JavaScript中的事件委托是什么？

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

16、为什么要使用JavaScript的事件委托？

为了减少代码的DOM操作，提高程序性能。更多详情

17、JavaScript中的闭包

（1）有权访问另一个函数作用域内变量的函数都是闭包。（2）闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。（3）更多

18、window.onload和DOMContentLoaded的区别是？

window.addEventListener('load',function(){
    //页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行，此时图片、视频还可能没有加载完
})

19、用JavaScript创建10个标签，点击的时候弹出来对应的序号

var i;
for (i = 0; i < 10; i++) {
  (function (i) {
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function (e) {
      e.preventDefault();
      alert(i);
    });
    document.body.appendChild(a);
  })(i)
}

20、实现数组的随机排序

Array.prototype.shuffle = function () {
  var input = this;
  for (var i = input.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1));
    var itemAtIndex = input[randomIndex];
    input[randomIndex] = input[i];
    input[i] = itemAtIndex;
  }
  return input;
}
var tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
tempArray.shuffle();
console.log(tempArray);

21、JavaScript中有哪些内置函数，与内置对象的区别是什么？

（1）内置函数：是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数，如常规函数（alert等）、数组函数（reverse等）、日期函数（getDate等）、数学函数（floor等）、字符串函数（length等）；（2）内置对象：是浏览器本身自带的，内置对象中往往包含了内置函数。内置对象有Object、Array、Boolean、Number、String、Function、Date、RegExp等。

22、JavaScript变量按照存储方式区分为哪些类型，并描述其特点

//值类型
//变量的交换，按值访问，操作的是他们实际保存的值。
//等于在一个新的地方按照新的标准开了一个空间（栈内存），
//这样a的值对b的值没有任何影响
var a = 100;
var b = a;
b = 200;
console.log("a:" + a + ",b:" + b);
//引用类型
//变量的交换，当查询时，我们需要先从栈中读取内存地址，
//然后再顺藤摸瓜地找到保存在堆内存中的值；
//发现当复制的是对象，那么obj1和obj2两个对象被串联起来了，
//obj1变量里的属性被改变时候，obj2的属性也被修改。
var obj1 = {
  x: 100
};
var obj2 = obj1;
obj2.x = 200;
console.log("obj1:" + obj1.x + ",obj2:" + obj2.x);

23、如何理解JSON？

其实JSON只不过是一个JavaScript对象而已。stringify()是把对象变成字符串；parse()是把字符串变成对象。

24、JavaScript中&&和||

（1）只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值；（2）只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。（3）且在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true。

（4）只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值; （5）只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值。

25、描述new一个对象的过程

（1）创建空对象：var obj = {}; （2）设置新对象的constructor属性为构造函数的名称，设置新对象的proto属性指向构造函数的prototype对象：obj.proto = ClassA.prototype; （3）使用新对象调用函数，函数中的this被指向新实例对象：ClassA.call(obj); //{}.构造函数();
（4）将初始化完毕的新对象地址，保存到等号左边的变量中【注意】若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

26、什么是构造函数？

（1）构造函数就是初始化一个实例对象，对象的prototype属性是继承一个实例对象。（2）注意事项：

默认函数首字母大写；
构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们，当调用构造函数时，new会自动创建this对象，且类型就是构造函数类型；
也可以在构造函数中显示调用return.如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的实例会被返回；
因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。在严格模式下，当你补通过new 调用Person构造函数会出现错误；

27、函数声明和函数表达式的区别

//成功
fn()
function fn() {
  console.log("函数声明，全局");
}
//报错
fn1()
var fun1 = function () {
  console.log("函数表达式，局部")
}

28、说一下对变量提升的理解

（1）顾名思义，就是把下面的东西提到上面。在JS中，就是把定义在后面的东东（变量或函数）提升到前面中定义。

var v = 'Hello World';
(function () {
  alert(v); //undefined
  var v = 'I love you';
})()

（2）根据上面变量提升原件以及js的作用域（块级作用域）的分析，得知上面代码真正变成如下：

var v = 'Hello World';
(function () {
  var v;
  alert(v);
  v = 'I love you';
})()

（3）在我们写js code 的时候，我们有2中写法，一种是函数表达式，另外一种是函数声明方式。我们需要重点注意的是，只有函数声明形式才能被提升。

//成功
function myTest() {
  foo();
  function foo() {
    alert("我来自 foo");
  }
}
myTest();
//失败
function myTest() {
  foo();
  var foo = function foo() {
    alert("我来自 foo");
  }
}
myTest();

29、说一下this几种不同的使用场景

（1）作为构造函数执行，如果函数创建的目的是使用new来调用，并产生一个对象，那么此函数被称为构造器函数；

var Niu = function (string) {
  this.name = string;
};

（2）作为对象属性执行，对象成员方法中的this是对象本身，此时跟其他语言是一致的，但是也有差异，JavaScript中的this到对象的绑定发生在函数调用的时候；

var myObj = {
  value: 0,
  increment: function (inc) {
    this.value += typeof inc === 'number' ? inc : 1;
  }
};
myObj.increment(); //1
myObj.increment(2); //3

（3）作为普通函数执行，以普通方式定义的函数中的this：会被自动绑定到全局对象；

var value = 232;
function toStr() {　　
  console.log(this.value);
}

（4）对象方法中闭包函数的this

//在以普通方式定义的函数中的this会被自动绑定到全局对象上，
//大家应该可以看出闭包函数定义也与普通方式无异，因此他也会被绑定到全局对象上。
value = 10;
var closureThis = {
  value: 0,
  acc: function () {
    var helper = function () {
      this.value += 2;
      console.log("this.value : %d", this.value);
    }
    helper();
  }
};
closureThis.acc(); //12
closureThis.acc(); //14

var closureThat = {
  value: 0,
  acc: function () {
    that = this;
    var helper = function () {
      that.value += 2;
      console.log("that.value : %d", that.value);
    }
    helper();
  }
};
closureThat.acc(); // 2
closureThat.acc(); // 4

（5）apply函数的参数this，apply方法允许我们选择一个this值作为第一个参数传递，第二个参数是一个数组，表明可以传递多个参数。

30、如何理解JavaScript作用域？

函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。

function foo() {
  var x = 1;
  return function () {
    alert(x);
  }
};
var bar = foo();
bar(); // 1
var x = 2;
bar(); // 1

31、什么是自由变量？

自由变量就是当前作用域没有定义的变量，即“自由变量”

var a = 100;
function F1() {
  var b = 200;
  function F2() {
    var c = 300;
    //a是自由变量
    console.log(a);
    //b是自由变量
    console.log(b);
    console.log(c);
  }
  F2();
}
F1();

32、this的特点

this要在执行时才能确认值，定义时无法确认。

33、同步和异步的区别是什么？分别举一个同步和异步的例子

同步会阻塞代码执行，而异步不会；alert是同步，setTimeout是异步。

33、一个关于setTimeout的笔试题

//输出结果13542
console.log(1);
setTimeout(function () {
  console.log(2);
}, 100);
console.log(3);
setTimeout(function () {
  console.log(4);
}, 99);
console.log(5)

34、何时需要异步？

在可能发生等待的情况、等待过程中不能像alert一样阻塞程序运行、因此所有的等待的情况都需要异步

35、JavaScript中的异步和单线程

（1）其实，单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。（2）js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。

36、使用JavaScript获取当天的日期

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (date < 10) {
    date = "0" + date;
  }
  return year + "-" + month + "-" + date;
}
var dt = new Date();
var formatDate = formatDate(dt);
console.log(formatDate);

37、获取随机数，要求是长度一致的字符串

var random = (Math.random() * 10 + "0000000000").slice(0, 10);
console.log(random);

38、写一个能遍历对象和数组的通用forEach函数

function forEach(obj, fn) {
  if (obj instanceof Array) {
    //准确判断是不是数组
    obj.forEach(function (item, index) {
      fn(index, item);
    })
  } else {
    //不是数组就是对象
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        fn(key, obj[key]);
      }
    }
  }
}
//检测数组
var arr = [1, 2, 3];
//这里顺序换了，为了和对象的遍历格式一致
forEach(arr, function (index, item) {
  console.log(index, item);
});
//检测对象
var obj = {
  x: 100,
  y: 200
};
forEach(obj, function (key, value) {
  console.log(key, value);
})

39、DOM操作的常用API有哪些？

获取DOM节点，以及节点的property和Attribute；获取父节点和子节点；新增节点和删除节点

40、DOM节点的attr和property有何区别？

property只是一个JavaScript对象的属性的修改；Attribute是对html标签属性的修改

41、DOM的本质

浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可以操作的一个模型而已。

42、手动编写一个ajax，不依赖第三方库

var xmlHttp = new XMLHttpRequest() || new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp.open("提交方式", "提交地址", true);
xmlHttp.onreadystatechange = function () {
  if (xmlHttp.readyState == 4) {
    infoDiv.innerHTML = xmlHttp.responseText;
  }
}
xmlHttp.send();

更多ajax知识，请点击这里

43、什么是跨域？

（1）浏览器有同源策略，不允许ajax访问其他域接口。跨域条件（协议、域名、端口）有一个不同就算是跨域。（2）可以跨域的三个标签（、、 Githubissues.

Githubissues is a development platform for aggregating issues.

CruxF / Blog

前端开发面试题——JavaScript #5

前言

JavaScript