8个你可能不知道答案的常见JavaScript面试问题

不管你喜不喜欢，棘手的问题仍然会被野外的面试官问到。

 

原因是，这些问题可以告诉你很多关于你对语言的核心理解，因此你是否适合这份工作。

这些问题中涉及的常见概念包括：

• Hoisting
• 关闭
• 范围
• 值与引用类型
• 原型继承

今天我们要一石二鸟。

准备好迎接下一次面试并立即复习核心概念。

1、为什么 typeoff是未定义的？

var y = 1;
if (function f() {}) {
 y += typeof f;
}

console.log(y); // 1undefined

解释

• 条件语句if(function f() {})返回function f() {}真值，因此代码在 if 语句内执行。
• typeof f返回undefined，因为该函数f(){}从未在语句外if声明，所以它不“存在”在if括号外if (f(){}) { It doesn't exist here }

这就是我们“修复”此代码片段的方式：

var y = 1;

function f() {}; //declare function outside if brackets

if (f) { //f exists so we enter the if block
 y += typeof f; //here typeof f is function
}

console.log(y); // 1function

2、写一个闭包的例子

function createFunction(msg) {
   return function(name) {
       return msg + name;
  }
}

let myFunc = createFunction("Hey ");
console.log(myFunc("Dude")); // Hey Dude

解释

• 第一个函数（createFunction）返回一个匿名函数
• 匿名函数msg从外部函数（createFunction（））+name自身返回参数。

当我们声明变量javascript let myFunc = createFunction("Hey ")时，变量myFunc持有对外部返回的匿名函数的引用

有趣的是，当您调用javascript myFunc("Dude")（仅传递“名称”参数）时，它仍然“记住”执行msg时传入的值createFunction()。

从创建函数的外部“范围”访问变量的能力是闭包的定义之一。

在此处了解有关闭包的更多信息

3、编写一个可以像 multiply(2)(5)(10) 一样调用并返回 100 的 multiply() 函数

这与上面的示例类似，不同之处在于我们正在重新调整一个附加函数并立即调用所有函数（不使用变量来保存引用）

function multiply(x) {
   return function(y){
       return function(z) {
         return x*y*z;
      };
  }
}

multiply(2)(5)(10) //100

通过调用 multiply like

javascript multiply(2)(5)(10)

我们正在一个接一个地调用返回的函数。

我们可以使用中间变量使其更清晰。我们来看一下：

let func1 = multiply(2); // x is 2
console.log(func1) // function(y) { return function(z) { return x*y*z } }

let func2 = func1(5); // y is 5
console.log(func1) // function(z) { return x*y*z }

func2(10); // z is 10
// finally has all 3 values and returns their product.

在此处了解有关嵌套函数的更多信息

4、delete局部变量的运算符

以下代码的输出是什么？

let output = (function(x) {
   delete x;
   return x;
})(0);

*删除运算符旨在用于删除对象的属性，而不是值类型（在本例中为数字）。

这会起作用：

let obj = { name: 'Gus', age: 32 }
delete obj.age;

console.log(obj) // { name: 'Gus' }

5、delete对象运算符

const Person = {
   name: 'Gus',
   age: 32,
}

const person1 = Object.create(Person);
delete person1.age

console.log(person1.age); // 32

• person1创建时将其原型设置为Person对象。
• 当实例person1的age属性被删除时，我们仍然可以访问age原型对象（Person）的属性
• 这就是为什么它似乎不起作用的原因。

这是一个很大的话题，你可以在这里了解更多

6、delete数组运算符

记录 arr.length 的结果是什么？

 let arr = ["a", "b", "c", "d"];
 delete arr[2];

 arr.length // 4

• 在数组上使用时，删除运算符将删除元素设置为“空”，但不会将其从数组中删除，也不会更改数组的长度。

7、两个 console.log 的值是多少？

var favouriteAnime = "Dragon Ball";
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

// undefined
// Naruto

以下是编译器如何解释这段代码：

var favouriteAnime; // declared and initialized with undefined
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

favouriteAnime = "Dragon Ball";

// undefined
// Naruto

声明 JavaScript 函数和变量时要记住一些事情。

• 变量赋值(myVar = 5) 优先于函数声明(function func(){})
• 函数声明(function func(){}) 优先于变量声明(var myVar;) *let 或 const
• 函数声明 (function func(){}) 被提升到变量声明 (var myVar;) 之上，但未被提升到变量赋值 (myVar = 5;) 之上。

作为最佳实践，您应该始终在调用函数之前声明它们。

在此处了解有关提升的更多信息

8、你会如何检查一个数字是否是整数？

检查数字是否为十进制或整数的最简单方法是使用内置的Number.isInteger()

console.log(Number.isInteger(4)); // true
console.log(Number.isInteger(12.2)); // false
console.log(Number.isInteger(0.3)); // false

另一种方法是看除以 1 是否还有余数。

function isInt(num) {
 return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

注意：在处理浮点数时，JavaScript 的精度是有限制的。如果你检查Number.isInteger(1.0000000000000001)将返回true。你可以在这里了解更多

结论

请记住按 F12 并亲自尝试这些示例。

这个微小的动作将帮助您更长时间地记住所学内容。

这是我们今天看到的内容的回顾：

• 为什么 typeoff是未定义的？
• 写一个闭包的例子
• 编写一个可以像 multiply(2)(5)(10) 一样调用并返回 100 的 multiply() 函数
• 局部变量的删除运算符
• 对象上的删除运算符
• 数组上的删除运算符
• 两个 console.log 的值是多少？
• 你会如何检查一个数字是否是整数？

谢谢阅读！如果你喜欢这篇文章*在下面发表评论（你可以打个招呼！），如果对你有帮助，记得点赞支持哦！

为了更好的让大家认识到 JavaScript 的精髓，我们在三十天计划群里推出了几节非常重要的 JavaScript 课程体系，而且每个系列知识点都保障是完整的。感兴趣可以通过下方的练习方式参与课程哦 。如果你正在学习 JavaScript，我们已经在三十天计划中完成了 4 个综合项目实战，那不妨可以听下这个课程体系，三十天计划群里还提供了算法、数组等知识体系！

 

 

 

前端工程师成长方法

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现，包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

 

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

 

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30 天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC 端项目开发（1 个）
• 移动 WebApp 开发（2 个）
• 多端响应式开发（1 个）

共 4 大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO 优化规范

从蓝湖 UI 设计稿 到 PC 端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux 环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30 天挑战学习计划》中每一个细节都有讲到，包含视频 + 图文教程 + 项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加 30 天挑战学习计划，来自博客园！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程