JS面试题集锦及解析(个人向)

1 、

var a=10;
function test(){
    a=100;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}
test();

//输出： 100 10 100

这道题目是考察对变量声明提升的理解 和 this关键字的指向性问题。

首先是变量提升，在JS中，使用var声明的变量会被提升到当前词法作用域的顶部，函数在编译时变成了这样

var a=10;
function test(){
    var a;
    a=100;
    console.log(a);
    console.log(this.a);
    console.log(a);
}
test();

这样子就清晰了，第一次打印时，函数内部声明了一个a,是100，第二次log时，因为函数是直接调用的，window.test()谁调用this就指向谁，所以是window.a结果是10.

2、下题输出什么？

(function(){
  var a = b = 3;
})();

console.log(a) //报错a is not defined
console.log(b) //输出3

这里面的声明语句很容易被误解为是 var a = 3,var b = 3.实际上并不是这样，而是这样。

b = 3;
var a = b;

a 在局部作用域里用var 关键字声明，所以是一个局部变量，在函数外面接受不到，所以会报错。

而 b 是没有var声明，就是this下的一个属性. this.b .所以在外面能访问到

3、

'a' + + 'b' // -> "aNaN"
// 因为 + 'b' -> NaN
// 你也许在一些代码中看到过 + '1' -> 1

4、[] == ![]

[] == ![] // -> true

//下面是分析
// [] 转成 true，然后取反变成 false
[] == false
// 将Boolen值转换为数字
[] == 0
// 将对象转化为字符串
// [].toString() -> ''
'' == 0
// 将字符串转化为数字
0 == 0 // -> true

在JS中 == 是会进行隐式转换的

执行类型转换的规则如下：
如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则：
值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
5、你知道哪些CSS伪类？

:link， :hover，:enabled，:disabled，:checked，:not(selector) 

在这里我随便列举几个，其实还有很多，在文档资料里都能查得到 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

这题要注意的其实是伪类和伪元素(::after)的区别

推荐一篇文章：CSS3伪类与伪元素的区别及注意事项

6、下面输出什么

function a () {
    return 
    {
        a: 'hello'
    }
}
// 输出： undefined

为什么输出undefined

因为return后面的换行会被规则转为分号

MDN资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/return