学员作品丨JavaScript常见的面试题

Posted 2021-04-17 睿峰培训

这是前端老学员总结的15个关于javascript的专业面试题，请大家查收。

问题1：undefined与not defined有什么区别，分别出现在什么情况下?

答：变量声明未初始化直接使用变量就是undefined，变量即未声明也未初始化直接使用就是not defined(即报未定义的错误)。示例如下：

var a;

console.log(a);//undefined

console.log(b);//error b is not defined

另外使用typeof操作符检测一个没有声明也没有初始化的变量也是undefined。如下：

console.log(typeof c);//undefined

问题2：以下代码输出什么？

var x;

if(function fn(){}){

    x += typeof fn;

}

console.log(x);

答：在控制台打印'undefinedundefined'.这里需要注意的就是条件语句中的条件表达式是一个函数，函数也是一个对象，任何除null之外的对象转换成布尔值都是true，因此就执行x += typeof fn;这条语句，这条语句等同于x = x + typeof fn;首先x是在全局中声明了的，但并没有被赋值，因此是undefined。

重点在typeof fn这个表达式上，由于条件语句中的条件表达式中是一个独立的作用域环境，因此在之后的代码块中是访问不到fn函数指针的。因此typeof fn即返回字符串'undefined'。所以最后就变成了x = undefined + 'undefined',，也就是最终的'undefinedundefined'答案呢。

以上的题还可以扩展如下：

var x = 2;

if(function fn(){}){

    x += typeof fn;

}

console.log(x);//'2undefined'

var x = 3;

if(x){

    eval(function fn(){});

    x += typeof fn;

}

console.log(x);//'3undefined'

这里只要理解eval()方法的用法就不难理解最终的答案了，由于eval()方法只接收字符串参数，如果不是字符串参数则会返回一个undefined。因此最终答案就不言而喻了。

问题3：什么是私有变量？什么是JavaScript私有方法？如何创建一个私有方法？有何缺点？

答：所谓的JavaScript私有变量和私有方法其实就是定义在一个局部作用域中的变量和函数。JavaScript作用域只有两种，全局作用域与局部作用域，也可以说是两种环境，即全局环境和局部环境。

因此在一个函数当中所定义的变量和方法其实就是私有变量和私有方法，当然在对象中定义一个方法也是私有方法。JavaScript私有方法的缺点就是很消耗内存，如下示例：

var obj = {

    name:'eveningwater',

    //私有方法

    setName:function(){

        console.log(this.name);//eveningwater

    }

}

function setName(){

    //私有变量

    var name = 'eveningwater';

    //私有方法

    function changeName(){

        name = 'loho';

    }

    changeName();

    return name;

}

setName();//loho

问题4：什么是闭包？写一个简单的示例。

闭包就是有权访问另一个作用域中的变量的局部作用域，创建闭包的常见方式就是在一个函数中创建另一个函数，来看如下两个示例：

function setName(){

    var name = 'eveningwater';

    function changeName(){

        name = 'loho';

        console.log(name);//loho

    }

    changeName();

}

for(var i = 0;i < 10;i++){

    (function(i){

        console.log(i);//0~9

    })(i);

}

问题5：写一个三次调用函数，每个函数传一个参数，调用最后返回它们之间的和。如下：

sum(1)(2)(3);//6

sum(7)(9)(4);//20

写法如下：

function sum(a){

    return function(b){

        return function(c){

            return a + b  + c;

        }

    }

}

 

解析：定义了一个sum函数，里面在返回一个匿名函数，匿名函数中再返回一个匿名函数，最后就能返回传入的三个参数之和，扩展还可以求乘积。如下：

function sum(a){

    return function(b){

        return function(c){

            return a*b*c;

        }

    }

}

问题6：JavaScript如何清空一个数组？

示例数组var arr = [1,2,3];

方法一：直接赋值法

arr = [];

方法二：长度变零法

arr.length = 0;

方法三：使用数组splice()方法

arr.splice(0,arr.length);

方法四：使用数组的pop方法结合循环实现

结合for循环：

var len = arr.length;

for(var i = 0;i < arr.length;i++){

    if(i <=  len - 1){

        arr.pop();

    }

}

console.log(arr);//[]

结合while循环

while(arr.length){

    arr.pop();

}

console.log(arr);//[]

结合do-while循环

do{

   arr.pop();

}while(arr.length);

console.log(arr);//[]

方法五：循环结合shift()

结合for循环：

var len = arr.length;

for(var i = len;i > 0;i--){

    if(i >= 1)arr.shift();

}

console.log(arr);//[]

结合while循环

while(arr.length){

    arr.shift();

}

console.log(arr);//[]

结合do-while循环

do{

   arr.shift();

}while(arr.length);

console.log(arr);//[]

问题7：如何判断一个对象是否是数组？

方法一：也是jQuery内部实现的方法

var obj = [];

Object.prototype.toString.call(obj) === '[object Array]';

方法二：利用原型链

obj.__proto__ === Array.prototype;//返回true则证明是数组

除此之外，还有Array.isArray()这个方法，只不过这个方法不兼容低版本的浏览器。另外说明一下instancof操作符和constructor属性判断不准确。

问题8：delete操作符的作用？

答：delete操作符只能删除对象的属性，包含数组(数组删除数组项)。如下：

var obj = { name:'eveningwater'};

delete obj.name;

console.log(obj);//{}

var arr = [1,2,3];

delete arr[0];

console.log(arr);//[undefinedx1,2,3]

问题9：一个示例区分Object.create()与Object.defineProperties()方法的区别？

答：虽然两者传的参数的格式相同，但两者所表达的含义不同，前者是原型式继承，等同于构造函数Object()，前者的第二个参数也不是必须的，后者必须传两个参数，因此后者完全继承了一个对象。示例如下：

var obj = { name:'eveningwater' };

var obj1 = Object.create(obj);//也可以写成Object.create(obj,{});

console.log(obj1);//{}

var obj2 = Object.defineProperties(obj,{});

console.log(obj2);//{ name:'eveningwater' }

问题10：以下代码答案是什么？

 var a = 1,b = c = typeof b;

console.log(b);

答：undefined.js赋值操作是从右到左的。

问题11：以下代码答案是什么？

var fn = function set(){ return 123 }

console.log(typeof set());

答：报错.set() is not defined.因为函数名set在其局部作用域中才能访问到，这也是函数表达式的一个特点。

问题12：什么是JavaScript"关联数组"？如何计算"关联数组"的长度？

答：传统数组就是以整数为索引的数组，如[1,2,3].而索引不一定为整数，还可以是除null以外的任意数据值，如{ a:1,b:2,c:3 }就可以被称作是关联数组。

var arr = new Array();

arr['name'] = 'eveningwater';

arr['age'] = 22;

arr['skill'] = {

    write:'哈哈哈哈'

}

console.log(arr);//[name:'eveningwater',age:22,skill:{ write:'哈哈哈'}]

其实可以使用Object.keys()方法来计算关联数组的长度。

即：Object.keys(arr).length;//3

问题13：加号操作符有哪些作用？

答：常规数值计算.，如1 + 2;

字符串拼接，如1+'3'

其中最难以理解，但也是最为重点的就是类型转换问题。

问题14：instanceof操作符的作用？

答：判断一个对象属于哪种对象的实例类型。如：

var obj = [1,2,3]

obj instanceof Array;//true

问题15：什么是变量提升？

答：JavaScript中只要使用var声明了一个变量，就会将这个变量提升到其所在环境作用域的顶部。如以下一个示例：

var a = 1;

(function(){

    console.log('a等于:'+ a);

    var a = 123;

    console.log('a等于:' + a);

})();

//返回结果为undefined,123

以上代码等价于：

var a = 1;

(function(){

    var a;

    console.log('a等于:'+ a);

    a = 123;

    console.log('a等于:' + a);

})();

从以上的结构来看，相信不难理解答案呢。再比如匿名函数与函数声明的区别也在于变量的提升，如下：

console.log(fn1());//123

console.log(fn2());//undefined

function fn1(){

    return 123;

}

var fn2 = function(){

    return 456;

}

免费试听

学习需趁早，知识不等人，现睿峰所有课程免费试听，开课一周内免费更换任何专业。

点击左下方“阅读原文”    申请试听价值1980元的任意课程。                              

TEL：[phone]

识别下方二维码，关注睿峰小峰一起嗨聊

姓名：睿小峰

性别：智能机器人

意向职位：陪聊/陪嗨