【面试宝典】47道ES67高频题库整理(附答案背诵版)

1.ES5、ES6（ES2015）有什么区别?

ES5（ECMAScript 5）和ES6（也称为ECMAScript 2015）是JavaScript语言的两个版本，它们之间有一些重要的区别和改进：

1. let 和 const 关键字： ES6引入了let和const关键字来声明变量，以替代ES5中仅有的var。let允许声明块级作用域变量，而const是用于声明块级作用域的常量，这些都是ES5中不具备的特性。

• 例子：

• ES5: 只能用var声明变量，它没有块级作用域。

  for(var i = 0; i < 5; i++) {
       
       
    // do something
  }
  console.log(i); // 输出5，`i`在循环外部仍然可访问。
  

• ES6: 使用let和const声明块级作用域的变量或常量。

  for(let j = 0; j < 5; j++) {
       
       
    // do something
  }
  console.log(j); // ReferenceError: j is not defined，`j`在循环外部不可访问。
  

2. 箭头函数（Arrow Functions）： ES6引入了箭头函数，这是一种更简洁的函数写法，它不仅语法简洁，而且箭头函数没有自己的this，它会捕获其所在上下文的this值作为自己的this值，这对于回调函数特别有用。

• 例子：

// ES5
var add = function(x, y) {
   
   
  return x + y;
};

// ES6
const add = (x, y) => x + y;

3. 模板字符串（Template Strings）： ES6提供了模板字符串，使得字符串的拼接更加方便和直观。模板字符串使用反引号（`）标记，并且可以嵌入变量或表达式，它们会在运行时被处理和替换。

• 例子：

// ES5
var name = "world";
var greeting = "Hello, " + name + "!";

// ES6
const name = "world";
const greeting = `Hello, ${
     
     name}!`;

4. 类（Classes）： ES6引入了基于类的面向对象编程语法。在ES5中，我们通过构造函数和原型链实现类似的功能。ES6的类语法使得创建对象、继承更加直观和简洁。

• 例子：

// ES5
function Person(name) {
   
   
  this.name = name;
}
Person.prototype.sayHello = function() {
   
   
  return "Hello, " + this.name;
};

// ES6
class Person {
   
   
  constructor(name) {
   
   
    this.name = name;
  }
  sayHello() {
   
   
    return `Hello, ${
     
     this.name}`;
  }
}

5. 扩展运算符（Spread Operator）和剩余参数（Rest Parameters）： ES6引入了扩展运算符...，允许一个数组表达式或字符串等在字面量中被展开，或者在函数调用时将数组表达式展开为多个参数。同时，剩余参数允许我们将一个不定数量的参数表示为一个数组。

• 例子：

// ES6 扩展运算符
const parts = ['shoulders', 'knees'];
const body = ['head', ...parts, 'toes'];

// ES6 剩余参数
function sum(...numbers) {
   
   
  return numbers.reduce((prev, current) => prev + current, 0);
}

这些仅仅是ES6相比于ES5的一些显著改进。ES6还引入了许多其他特

性，如模块化导入/导出、Promise、Map和Set数据结构等，极大地增强了JavaScript的编程能力和开发体验。

2.解释babel是什么，有什么作用?

Babel是一个广泛使用的JavaScript编译器，它的主要作用是将使用最新JavaScript特性编写的代码转换为旧版本的浏览器或环境中可执行的代码。这样，开发者就可以利用JavaScript的最新和最先进的语言特性来编写代码，而不必担心兼容性问题。

Babel的主要作用和特点包括：

1. 转译新特性： Babel能够将ES6及更高版本的JavaScript代码转译为ES5代码，这意味着你可以在项目中使用最新的语言特性，而不用担心老旧浏览器或环境的兼容性问题。

2. 插件系统： Babel的功能可以通过插件来扩展。这些插件可以用于转换JavaScript的新特性、特定的库或者框架的语法糖等。

3. 预设（Presets）： 预设是一组Babel插件的集合，它们被打包在一起以实现特定的转译目标。例如，@babel/preset-env是一个智能预设，能够根据目标环境自动确定需要转译的JavaScript特性。

4. 多环境支持： Babel可以针对不同的运行环境（如不同版本的浏览器或Node.js）进行配置，以确保输出代码的最佳兼容性。

5. 源码映射（Source Maps）： Babel支持生成源码映射，这使得开发者可以在调试时看到原始代码，而不是转译后的代码，从而简化了调试过程。

示例：

假设你在使用ES6的箭头函数特性编写代码：

const add = (a, b) => a + b;

不是所有的浏览器都原生支持箭头函数，特别是一些老旧的浏览器。Babel可以将上面的代码转译成ES5代码，以确保它在那些不支持箭头函数的环境中也能运行：

var add = function(a, b) {
   
   
return a + b;
};

通过这种方式，Babel极大地提高了开发者使用现代JavaScript特性的灵活性，同时还保持了对旧版浏览器的兼容性。

3.简述ES6 let有什么用，有了var为什么还要用let？

let关键字在ES6（ECMAScript 2015）中被引入，用于声明变量，它提供了比var更强大的变量作用域控制。let的使用解决了var存在的一些问题并增加了代码的可读性和可维护性。下面是let相比于var的几个关键优势：

1. 块级作用域

• var 声明的变量只有函数级作用域和全局作用域，没有块级作用域，这意味着var声明的变量在包含它们的函数或全局上下文中都是可见的，即使它们是在一个控制块（如if语句或循环）中声明的。
• let 允许声明在块级作用域内有效的变量。块级作用域是由最近的一对{}包围的区域，比如在if语句、循环、块中声明的变量，在外部是不可访问的。

2. 不存在变量提升

• var 声明的变量会被提升到函数或全局作用域的顶部，这意味着无论变量在哪里声明，都会被视为在当前作用域顶部声明的变量。
• let 声明的变量不会被提升。如果你在声明之前尝试访问它们，JavaScript会抛出ReferenceError，这有助于避免由于变量提升导致的运行时错误。

3. 暂时性死区

• 使用let声明的变量在声明之前是不可访问的，这段时间被称为暂时性死区（Temporal Dead Zone, TDZ）。这有助于开发者更好地控制变量的声明位置和使用时机，减少因变量提前使用导致的逻辑错误。

4. 防止重复声明

• 在同一作用域内，let不允许重复声明同一个变量，这有助于避免编程中的一些错误，比如不小心重复声明变量。而var允许重复声明，这可能会导致意外覆盖值或引入难以追踪的bug。

示例：

// var的问题演示
if (true) {
   
   
var x = 5;
}
console.log(x); // 输出5，因为var没有块级作用域

// let的使用
if (true) {
   
   
let y = 5;
}
console.log(y); // ReferenceError: y is not defined，因为let有块级作用域

总之，let提供的块级作用域、没有变量提升、暂时性死区以及防止重复声明的特性，使得它成为一个比var更安全、更易于管理的变量声明关键字。因此，建议在现代JavaScript开发中优先使用let（和const）来声明变量。

4.简述ES6对String字符串类型做的常用升级优化?

ES6（ECMAScript 2015）对字符串类型进行了多项升级和优化，增强了对字符串的处理能力。这些改进提高了开发效率，使代码更加简洁和易于理解。以下是一些主要的升级优化：

1. 模板字符串（Template Strings）

• 描述： ES6引入了模板字符串，这是一种允许嵌入表达式的字符串字面量。它们使用反引号 (`) 而不是单引号 (') 或双引号 (") 来定义，可以包含占位符（${expression}），占位符内的表达式及其结果会被自动插入到结果字符串中。
• 优势： 模板字符串简化了字符串的拼接操作，使得创建包含变量或表达式的字符串更加直观和易读。

示例：

const name = "world";
const greeting = `Hello, ${
     
     name}!`; // 使用模板字符串
console.log(greeting); // 输出: Hello, world!

2. 多行字符串

• 描述： 在ES6之前，创建跨多行的字符串需要使用反斜杠 (\) 或者字符串拼接。ES6的模板字符串天然支持多行文本，使得创建多行字符串变得非常简单。
• 优势： 直接在模板字符串中书写多行文本，无需使用额外的连接操作或特殊字符，代码更加清晰。

示例：

const multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);

3. 新的字符串方法

ES6还引入了一些新的字符串方法，以支持更加方便的文本处理：

• .startsWith(searchString [, position])：判断当前字符串是否以另一给定的子字符串“开头”，并根据情况返回true或false。
• .endsWith(searchString [, length])：判断当前字符串是否以另一给定的子字符串“结尾”，并根据情况返回true或false。
• .includes(searchString [, position])：判断当前字符串是否包含另一给定的子字符串，返回true或false。
• .repeat(count)：将当前字符串重复指定次数后返回。

示例：

const str = "Hello, world!";

console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true
console.log(str.includes("world"))