ES6面试题详解

一、箭头函数

箭头函数是ES6中新增的语法，是一种更为简洁的函数写法，适用于匿名函数的定义，也可以代替一些回调函数的使用。箭头函数不能够被用作构造函数，也不能够使用arguments对象。

箭头函数的语法如下：

const add = (a, b) => {
  return a + b;
};

箭头函数也可以像下面这样省略花括号和return：

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

箭头函数没有自己的this，它的this只会指向定义时所在的对象，而不是执行时所在的对象。这使得箭头函数非常适用于嵌套函数中，避免this指向出现问题。

下面的代码演示了箭头函数的使用：

const obj = {
  name: 'Alice',
  age: 20,
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
    }, 1000);
  }
};

obj.sayHello(); // 输出：Hello, my name is Alice, I'm 20 years old.

二、const和let

const和let是ES6中新增的两个关键字，用来声明变量。其中const用于声明常量，一旦值被赋予，就不能够再次修改。而let用于声明可变的变量，它类似于var，但有一个重要的区别：let声明的变量只在定义所在的块级作用域内有效，而var声明的变量则是函数作用域的。

下面的代码演示了const和let的使用：

const name = 'Alice';
name = 'Bob'; // 报错：Assignment to constant variable.

function testVar() {
  var i = 0;
  if (true) {
    var i = 1;
  }
  console.log(i); // 输出：1
}

function testLet() {
  let i = 0;
  if (true) {
    let i = 1;
  }
  console.log(i); // 输出：0
}

三、解构赋值

解构赋值是ES6中新增的一种语法，可以从数组或对象中提取值，然后赋给变量，更方便地进行数据操作。解构赋值可以用于数组、对象、函数参数等多个方面。

下面的代码演示了解构赋值的使用：

// 数组解构赋值
const arr = [1, 2];
const [x, y] = arr;
console.log(x, y); // 输出：1 2

// 对象解构赋值
const obj = {
  name: 'Alice',
  age: 20
};
const { name, age } = obj;
console.log(name, age); // 输出：Alice 20

// 函数参数解构赋值
function test({ name, age }) {
  console.log(name, age); // 输出：Alice 20
}
test(obj);

四、模板字符串

模板字符串是ES6中新增的一种语法，用来更方便地处理字符串。模板字符串使用反引号（`）包围，可以在其中使用${}来引用变量或表达式。模板字符串还支持多行字符串的书写。

下面的代码演示了模板字符串的使用：

const name = 'Alice';
const age = 20;

console.log(`My name is ${name}, I'm ${age} years old.`);

const text = `This is a
multi-line
string.`;
console.log(text);

五、默认参数值和剩余参数

ES6新增了函数的默认参数值和剩余参数特性，使得函数的编写更加灵活。默认参数值可以为函数提供一个默认值，如果函数调用时不传入参数，则使用默认的参数值。剩余参数可以将函数传入的所有参数合并成一个数组，方便进行操作。

下面的代码演示了默认参数值和剩余参数的使用：

// 默认参数值
function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}
greet(); // 输出：Hello, World!
greet('Alice'); // 输出：Hello, Alice!

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 输出：6

六、展开运算符

展开运算符是ES6中的一个新特性，它可以将数组、对象、字符串等转换为用逗号分隔的参数序列。展开运算符可以用于函数调用、数组的拼接、对象的合并等多个场景。

下面的代码演示了展开运算符的使用：

// 数组展开
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出：[1, 2, 3, 4]

// 对象合并
const obj1 = { name: 'Alice' };
const obj2 = { age: 20 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出：{ name: 'Alice', age: 20 }

七、类和继承

ES6引入了class和extends关键字，使得面向对象的编程更加简洁和易用。class定义一个类，可以定义constructor、方法和静态方法；extends用来继承一个类，可以覆盖父类的方法。

下面的代码演示了类和继承的使用：

// 定义一个类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
  static sayHi() {
    console.log('Hi.');
  }
}

// 继承一个类
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, I'm in grade ${this.grade}.`);
  }
}

// 调用静态方法
Person.sayHi();

// 创建一个对象
const person = new Person('Alice', 20);
person.sayHello();

// 创建一个继承自Person的对象
const student = new Student('Bob', 18, 3);
student.sayHello();

八、Promise和async/await

ES6引入了Promise，是一种用于异步编程的新模型，可以有效地避免回调地狱的问题。ES8又引入了async/await，是一种更为简洁和易读的异步编程方法。

Promise的基本用法如下：

const promise = new Promise((resolve, reject) => {
  // 异步代码
  if (success) {
    resolve(result); // 成功状态
  } else {
    reject(error); // 失败状态
  }
});

promise.then(result => {
  // 处理成功状态
}).catch(error => {
  // 处理失败状态
});

async/await是Promise的语法糖，代码更加简洁和易读：

async function getData() {
  try {
    const result = await fetch(url);
    // 处理结果
  } catch (error) {
    // 处理错误
  }
}