面试准备——JavaScript基础篇（1）

我们都知道 JavaScript 面试（尤其是前端面试）可能非常难，因为面试官可能会问到旧版 JS、新版 ES6 JS、DOM 元素操作、旧版 CSS 布局、新版 FlexBox 和 CSS Grid 布局、算法和复杂性、小型编码问题、ReactJS 及其生命周期方法等方面的问题。

如今，面试形式多种多样，由于其性质不同，所问问题的类型也各不相同。这些面试环节主要适用于中小型企业，而非科技巨头（如Facebook、谷歌、Flipkart等）。它们大致可分为以下几类。

• 第一轮面试——通常是电话面试——从介绍你自己开始，问一些关于 var、React 及其生命周期方法的基本旧 JS 问题。
• 第一轮 - 限时在线问答 -要么在 1 小时内完成 30 道基础 JS、CSS 问题，要么在 1 小时内完成 3 道难题。
• 第一轮面试 - Skype 面试 -首先是自我介绍，然后是一些旧的 JS 问题，以及一个用 ReactJS/JavaScript 编写的小组件或程序。
• 第一轮——小型创业公司——给你一个需要对其现有网站进行的小改进。
• 第二轮面试——面对面面试——同样以介绍你自己开始，然后是一个简单的JS问题（在纸上/白板上）。
• 第三轮——与架构师面对面——非常棘手的 JavaScript 问题或在白板上解决问题。
• 第四轮——客户面试——仅限服务型公司。主要通过Skype屏幕共享，在jsfiddle中解决一些小问题。
• 第五轮——人力资源部——主要进行薪资谈判。

本系列文章基于我自身的面试经验，以及众多前端开发朋友的建议。此外，我还引用了techsith网站上精彩的面试系列文章中的一些例子。

我们先从基本的 JavaScript 问题开始，这些问题通常会在第一轮面试中出现，有时也会在第二轮面试中出现。

问题 1： 关键字 let、const 和 var 有什么区别？
答案： var 变量从 JavaScript 诞生之初就存在，而 let 和 const 变量则是在 ES6 中才引入的。var
是函数作用域，而 let 和 const 是块级作用域。
我们首先来理解 var 和 let 的区别。考虑以下示例。它包含一个立即执行函数表达式 (IIFE)，其中有一个 if 语句。if 语句为 let 变量创建了一个作用域，但 var 不是块级作用域，因此也可以在 if 语句外部访问。

(function(){
  if(true){
    var v = 10;
    let l =20;    
  }
  console.log('v is ', v);
  console.log('l is ', l);
})()

如果我们运行下面的代码，我们会得到 var 的值，但是 let 会出现引用错误。

let 的引用错误

现在我们来了解一下 const。它用于在 JavaScript 中声明常量变量。对于整数和字符串等基本类型，我们不能在初始声明之后为其赋值，但对于数组和对象等非基本类型，我们可以添加值。

我们来看一些例子。重新赋值一个常量整数值会导致引用错误。

(function(){
  const c = 12;
  c = 14;
  console.log('c is ', c);
})()

/*
Exception: TypeError: invalid assignment to const `c'
[@Scratchpad](http://twitter.com/Scratchpad)/1:3:3
[@Scratchpad](http://twitter.com/Scratchpad)/1:1:2
*/

重新赋值常量字符串值会导致引用错误。

(function(){
  const s = "coder";
  s= "developer"
  console.log('s is ', s);
})()

/*
Exception: TypeError: invalid assignment to const `s'
[@Scratchpad](http://twitter.com/Scratchpad)/1:9:3
[@Scratchpad](http://twitter.com/Scratchpad)/1:7:2
*/

重新赋值数组会导致错误。

(function(){
  const arr = [1, 2, 3];
  arr = [3, 4, 5];  
  console.log('arr is ', arr);
})()

/*
Exception: TypeError: invalid assignment to const `arr'
[@Scratchpad](http://twitter.com/Scratchpad)/1:15:16
[@Scratchpad](http://twitter.com/Scratchpad)/1:13:2
*/

但是，向数组中添加值是可行的。

(function(){
  const arr = [1, 2, 3];
  arr.push(4);  
  console.log('arr is ', arr);
})()

//output - arr is [1, 2, 3, 4]

此外，还可以添加和更改对象的值。

(function(){
  const obj = {name: 'Nabendu', skill: 'JS'};
  obj.skill = 'React'; 
  obj.profession= 'Developer';
  console.log('obj is ', obj);
})()

//output is obj is { name: "Nabendu", skill: "React", profession: "Developer" }

问题 2： == 和 === 有什么区别？
答案：它们都是 JavaScript 中的比较运算符。== 会在比较之前进行类型转换，而 === 只进行严格比较，不进行类型转换。

考虑以下 == 运算符。字符串 1 和数字 1 之间的比较结果为真，因为数字 1 在比较之前被转换为字符串。

if('1' == 1) {
  console.log('They are equal')
}

//Output - They are equal

现在，考虑一下 === 的相同示例。它将返回 false，因为没有进行类型转换。

if('1' === 1) {
  console.log('They are equal')
} else {
  console.log('They are not equal')  
}

//Output - They are not equal

问题 3： null 和 undefined 有什么区别？
答案：两者都表示空值。区别在于，当你定义一个变量但未赋值时，JavaScript 会将其赋值为 undefined。null 通常由用户在想要清除某些值时赋值。

let a;
console.log(a);

//output - undefined

另一个区别是，`typeof(undefined)` 返回 `undefined`，而`typeof(null)` 返回 `object`。它本应是 `null`，但这却是 JavaScript 早期的一个 bug。

问题 3： 什么是原型继承？
答案：原型继承是指使用原型创建新的功能。让我们考虑以下示例。这里，我们创建了一个 Car 构造函数，然后使用 new 关键字调用它。现在，nabsCar 和 shikhaCar 变量各自拥有 Car 的实例，但它们可以共享同一个原型函数 getModel()。

let Car = function(model) {
  this.model = model;
}

Car.prototype.getModel = function() {
  return this.model;
}

let nabsCar = new Car('maruti800');
console.log(nabsCar.getModel()); //Output - maruti800

let shikhaCar = new Car('hyndaiAccent');
console.log(shikhaCar.getModel()); //Output - hyndaiAccent

注：我写过一系列关于对象和原型方面的详细文章，你可以在这里找到。

以上就是JavaScript基础面试题的第一部分。