10道精选JavaScript面试题——前端面试必备

前几天得到一个赚$的大公司的前端面试机会，平时本来就菜，不相信自己的运气然后没咋准备，抱着去看看的心态，结果人家是来真的，首先给一份笔试题，再实操题，做完笔试之后回来看了看发现很多错了，难怪人家不要我。都说“面试造大炮，上班拧螺丝” 别说造大炮了，这些JS的基本知识还是要会的，再怎么菜鸟我们也要在第一关过了才能到公司继续学习。现在我就为那些前端面试的小白准备了10道前端必考的JavaScript面试题及答案，题型难道属中等，也是帮我自己总结以下。

1、对作用域上下文和this的理解

例如：

var person = {
num: 1,
getNum:function(){
return this.num;
}
}
console.log(person.getNum());//1
var fun = person.getNum;
console.log(fun());//undefined
//fun是在window上下文被执行的，上下文中没有num，所以为undefined

2、setTimeout事件处理器

for(var i = 0; i < 5; i++){
setTimeout(function(){
console.log(i)//5,5,5,5,5
},0)
}
//Javascript事件处理器在线程空闲之前不会运行,要等到全部执行完了才开始执行，所以是5次5

3、JS数据类型

var j = null;
console.log(typeof(j));//object
//null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象,是对象类型

//还有其他几种数据类型也要熟悉和了解，比如undefined和null的区别。

4、JavaScript作用域

var a = 10;
function num(){
console.log(a);//10
a = 100;
console.log(a);//100
}

num();
console.log(a)//100
//这里考的是作用域的问题，全局作用域中有a,所以执行函数时，按照先后顺序，先输出10，然后函数体中改变了变量a,s所以再次输出时时100，最后，在windon中输出的是已经被改变数值的a，所以是100

//全局变量：当前页面内有效
//局部变量：函数方法内有效

5、new操作符

function User(name,password){
this.name = name;
this.password = password;
this.fun = function(){
console.log(name+","+password)
}
}

var user = new User("lucy",11212)
console.log(user.name);
user.fun();
//new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例
//创建一个new实例，其实就是创建了一个空的对象{}，然后再把这个对象和另外一个对象相连链接，将获得另外一个对象的属性和方法。

6、DOM操作

获取页面上所有的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'){// 判断input的属性type是否为checkbox
checkboxArray.push(obj);//如果是就添加到数组里面去
}
}

7、数组处理（算法）

去掉数组中重叠的元素：

var arr = [1,2,5,5,6,5,4,5,6,8,7,9,2,4];//定义一个数组
var array = [];//定义一个空的数组，用于存放唯一的元素
for(var i = 0; i<arr.length; i++){//遍历数组
var j = arr[i];//数组中的元素
if(array.indexOf(j) == -1){//检查array数组，如果里面没有元素j,就把j添加到数组里，如果已经存在就不会执行
array.push(j)
}
}
console.log(array)//[1, 2, 5, 6, 4, 8, 7, 9]

8、处理字符串

例如更具空格‘ ’分割字符串：

var str = "dmj kaf nndjsaj infjnf hf knmklja";
var str_arr = str.split(' ');//分割字符
var sort_arr = str_arr.sort();
console.log(sort_arr)//["dmj", "hf", "infjnf", "kaf", "knmklja", "nndjsaj"]

字符串还可以考到怎么找出出现最多次数的字符。

9、let和var的区别

for(var i = 0; i<5; i++){
var a = "luara"
}

console.log(a);//luara
console.log(i);//5

//Js没有块级作用域，for之后全局作用域和函数作用域，for不是函数，所以就算不在for里面也是可以访问到i,a


for(let i = 0; i<5; i++){
let a = "luara"
}
console.log(a);//报错：a is not defined
console.log(i);//报错：i is not defined

//let声明的变量拥有块级作用域,在函数或者方法体内定义的变量不会被外层访问到；
//另外，var定义的全局变量是window的属性，可以通过window.访问到，而let定义的不能。

10、ES6的新特性

（1）新增的let和const，let用于声明变量，const用于声明常量。

（2）使用箭头函数

let fun = function(){
console.log("a");
}

//剪头函数简写函数
let fun = ()=>{
console.log("a");
}

这里两个是比较明显语法上的修改，另外就是新增了一些处理字符串的方法等。