【前端技术】es6语法知识总结

ES6（ECMAScript 2015）是JavaScript的一个重大更新版本，它引入了许多新特性，旨在使JavaScript代码更加简洁、易于理解和维护。以下是一些ES6中最为重要和常用的新特性及其简要讲解：

1. 箭头函数（Arrow Functions）

箭头函数提供了一种更简洁的函数写法。它们使用=>符号，而不是传统的function关键字。箭头函数不绑定自己的this、arguments、super或new.target，这些在函数体内共享外层函数作用域的同名值。

const add = (a, b) => a + b;  
console.log(add(2, 3)); // 5  
  
// 箭头函数也支持多行表达式，但需要用大括号括起来，并返回一个对象字面量时需要用圆括号包起来  
const multiplyAndAdd = (a, b, c) => {  
  const result = a * b;  
  return result + c;  
};  
  
console.log(multiplyAndAdd(2, 3, 4)); // 10

2. 模板字符串（Template Literals）

模板字符串允许你嵌入表达式（在${}中），并且支持多行字符串和字符串插值。

const name = "Alice";  
const greeting = `Hello, ${name}!`;  
console.log(greeting); // Hello, Alice!  
  
// 多行字符串  
const multiline = `This is a  
multi-line  
string.`;  
console.log(multiline);

3. 解构赋值（Destructuring Assignment）

解构赋值允许你从数组或对象中提取数据，并将其赋值给声明的变量。

const [a, b, ...rest] = [1, 2, 3, 4, 5];  
console.log(a); // 1  
console.log(b); // 2  
console.log(rest); // [3, 4, 5]  
  
const { foo, bar } = { foo: 'foo', bar: 'bar' };  
console.log(foo); // foo  
console.log(bar); // bar

4. 默认值、剩余参数和展开运算符

• 默认值：在函数参数中可以为参数指定默认值。

  function greet(name = 'World') {  
    console.log(`Hello, ${name}!`);  
  }  
  greet(); // Hello, World!

• 剩余参数：允许你将一个不定数量的参数表示为一个数组。

  function sum(...numbers) {  
    return numbers.reduce((total, num) => total + num, 0);  
  }  
  console.log(sum(1, 2, 3)); // 6

5. let 和 const

• let声明一个块作用域的局部变量，与var声明的变量不同，let声明的变量的作用域限于其声明所在的块或子块中。
• const声明一个只读的常量，一旦声明，常量的值就不能改变（如果常量是一个对象，则对象本身的内容仍然可以修改）。

6. 类（Classes）

ES6引入了基于原型的类（class），作为构建对象的模板。

class Rectangle {  
  constructor(height, width) {  
    this.height = height;  
    this.width = width;  
  }  
  
  getArea() {  
    return this.height * this.width;  
  }  
}  
  
const rect = new Rectangle(10, 20);  
console.log(rect.getArea()); // 200

7.Promise

Promise 是一种用于处理异步操作的对象，类似Java中的 CompletableFuture。它可以将异步操作封装成一个 Promise 对象，通过 then() 方法来添加回调函数，当异步操作完成时自动执行回调函数。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

promise.then((message) => {
    console.log(message); // Success!
}).catch((error) => {
    console.error(error);
});