7大常用ES6特性，助力你写出更现代化的JavaScript

1. 模板字符串

模板字符串是一种新的字符串类型，它允许你在字符串中插入变量，方便了JavaScript开发者的开发体验。

ES6的模板字符串（Template Strings）是一种新的字符串类型，使用反引号``包裹起来的字符串。它允许你在字符串中插入变量、表达式、函数等，使得字符串拼接更加简便。

举个例子，使用模板字符串进行字符串拼接：

const name = 'Jack';
  const message = `Hi, my name is ${name}.`;
  console.log(message);

上述代码中，模板字符串中用 ${} 包裹的是变量，可以方便快捷地实现变量插入字符串中。输出结果为：Hi, my name is Jack.

再来一个例子，使用模板字符串进行函数调用：

function add(a, b) {
    return a + b;
  }
  const a = 10;
  const b = 20;
  const msg = `The result of adding ${a} and ${b} is ${add(a, b)}.`;
  console.log(msg);

在这个代码里，我们在模板字符串中调用了函数，并把函数的返回值插入到模板字符串里。输出的结果为：The result of adding 10 and 20 is 30.

总之，使用ES6的模板字符串可以使字符串的拼接和传递变得更加方便，简化代码编写和阅读过程。

2. 箭头函数

箭头函数是一种语法精简的函数，它表达了一种更简洁和便于维护的语法形式。

ES6中的箭头函数（Arrow Functions）是一种新的函数定义方式，它能够更简单地定义函数，并且能够保留原函数的this值，避免引用上下文出现的混乱情况。箭头函数最大的特点就是可以利用更精简的语法表示函数，减少代码量，提高编写代码的效率。

举个例子，箭头函数的一般语法如下：

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

上述代码中，我们使用箭头函数定义了一个加法函数，它的参数是 a 和 b，函数体使用 return 返回 a + b 的值。

如果箭头函数只有一条语句，还可以进一步省略花括号和 return，例如：

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

上述代码中，我们省略了花括号和return关键字，这样不仅减少了编码难度、降低了代码的阅读难度。

如果箭头函数只有一个参数，则可以省略小括号，例如：

const double = num => num * 2;

上述代码中的箭头函数省略了小括号。

总之，箭头函数几乎在所有方面都比传统的函数表达式更简单、更灵活、更易于阅读和编写。

3. let 和 const

let 和 const 是新的关键字，它们能够定义块级作用域变量并解决了很多旧版 JavaScript 的问题。

ES6引入了两个新的变量声明方式： let 和 const。let 和 const 具有和 var 不同的作用域特性，比 var 更加灵活，能够更好地控制变量的作用域和生命周期。其中，const 用于定义常量，其定义的值不允许修改。

下面我们用代码进行演示：

使用let声明变量

let age = 28;
  if (true) {
    let age = 36;
    console.log(age); // 36
  }
  console.log(age); // 28

在 if 语句块中，我们再次声明了 age变量，此时已经允许了 let关键字的声明，输出结果为 36。而在 if 块外，age变量还是被声明为28，输出结果为 28。

使用const声明常量

const PI = 3.1415926535;
  PI = 3; // 抛出一个错误！

在这个示例中，我们定义了一个常量 PI，定义时赋值为 3.1415926535，由于 PI 是常量，无法被修改， 所以输入 PI=3会抛出一个错误。常量的值定义一次后不可改变。

总之，使用 let 和 const 定义变量和常量能够提供可控制的作用域以及不可修改的常量等特性，这些特性极大的增强了代码的可读性，并且提高了程序的质量。

4. 解构赋值

解构赋值是一种快捷的从数组或者对象中获得值的方式，它可以减少代码量并使代码更易读。

ES6 的解构赋值（Destructuring Assignment）语法是一种方便、灵活的方法，允许我们将一个数组或者对象的值赋给独立的变量。解构赋值可以消除冗长的代码和用以中间值传递数据的临时变量。

下面我们举例来说明解构赋值的用法：

使用数组解构赋值

const [a, b, c] = [1, 2, 3];
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3

在上面代码中，我们将一个数组 [1, 2, 3] 分解并赋值给变量 a, b 和 c。解构赋值的语法使用中括号 [] 包裹变量，以便从右侧的数组中提取已知的数量的值。

使用对象解构赋值

const person = {
    name: 'Mike',
    age: 25,
    address: 'Los Angeles'
  };
  const { name, age, address } = person;
  console.log(name); // Mike
  console.log(age); // 25
  console.log(address); // Los Angeles

在这个示例中，我们将 person 对象的属性使用花括号 {} 进行包裹、并赋值给新的变量 name，age 和 address。解构赋值也可以按照这种形式，将一个对象的属性分解并赋值给变量。

总之，ES6的解构赋值语法是一个灵活、强大和易于使用的方式，允许我们轻松的操纵数组和对象，简化了许多编码过程。

5. 函数默认参数

函数默认参数是一种比旧版JavaScript函数参数更好的语法特性，它能够让函数变得更简短，并在不给定参数时提供默认值。

ES6 的函数默认参数（Default Parameters）是一种新的方式，提供为函数参数指定默认值的能力。默认值可以是任何值类型包括基本类型、函数、数组、对象等等。

下面我们用代码进行演示：

const add = (a, b = 10) => {
    return a + b;
  }
  console.log(add(5)); // 15
  console.log(add(5, 6)); // 11

在上述代码中，我们定义了一个加法函数 add，默认参数 b 被赋值为 10。当只传入一个参数时，b 将取默认值 10，第一个输出 15，而当传入两个参数时，第二个输出 11，使用的是传入的参数值 5 和 6 的求和结果。

再看一个使用对象作为默认值的例子：

const createUser = ({ name = 'Anonymous', age = 18 }) => {
    return { name, age };
  };
  console.log(createUser({ name: 'Mike', age: 25 })); // {name: 'Mike', age: 25}
  console.log(createUser({ name: 'Jack' })); // {name: 'Jack', age: 18}
  console.log(createUser({})); // { name: 'Anonymous', age: 18}

在上述代码中，我们使用对象作为参数并定义默认值。如没有传入任何参数时，使用的是默认值。

总之，ES6的函数默认参数语法允许我们在定义函数时为参数定义默认值，提高了代码的兼容性和可读性，是一种强大且有用的特性。

6. 模块化

ES6在语言层面提供了对模块化的支持，改变了传统的模块化开发方式，提高了组件的复用性、可维护性和可测试性。

ES6的模块化是一种令人兴奋的新特性，它提供了一种简单、结构化的方式来组织和加载代码。通过使用模块，我们能够将代码合理的分成模块、提高代码的可读性和可维护性。

下面是使用ES6模块化的一个简单的示例：

我们定义一个 add.js的文件，其中定义一个 add 函数：

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

在这个文件中，我们使用 export 将函数 add 暴露给外部，使得其他模块可以加载这个模块，并在他们自己的代码中使用它。

在另一个文件 main.js 中，我们使用 import 语句来导入 add 函数。

import { add } from './add.js';
  console.log(add(5, 10)); // 15

在这个文件中，我们通过 import导入了名为 add 的函数，因为 add.js模块导出了这个函数。

注意：上述代码中的 import 语句使用了相对路径（./add.js），必须确保脚本执行的上下文（例如浏览器或Node.js）中的相对路径是正确的。

总之，ES6的模块化提供了一种清晰、可扩展且易于维护的代码组织方式。可以简单的将函数、类和变量等封装在模块中，导出和导入需要实现的功能，允许我们更高效的开发和管理应用程序。

7. Promise

Promise是一种解决异步编程的语法糖，对于回调函数（Callback Hell）的问题提供了一种优雅的解决方案。

ES6 的 Promise 是一种非常有用的异步编程方式，比传统的回调函数更加清晰易懂。Promise 表示一个异步操作的最终状态，并且可以为异步操作的结果、成功与错误监听回调函数。使用 Promise 可以消除回调地狱（callback hell）的问题。

下面我们用代码进行演示：

const fetchData = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('fetch data success'); // 成功情况下调用resolve
      }, 2000);
    });
  };
  const displayData = () => {
    fetchData()
      .then((data) => {
        console.log(data); // 输出："fetch data success"
      })
      .catch((err) => {
        console.log(err); // 捕获错误并输出
      });
  };
  displayData(); // "fetch data success"

在上述代码中，我们首先定义了一个 fetchData 函数，以模拟一个异步操作，并返回 Promise 对象。在该异步操作成功时，我们调用了 resolve 函数，将一个字符串值 "fetch data success" 传递到 Promise 的回调函数中。然后，在 displayData 函数中，我们调用了 fetchData 函数，并通过 then 方法监听 Promise 对象状态的变化。在 Promise 对象状态成功时。then 方法的函数回调函数捕获成功回调并输出。如果 Promise 对象状态失败，我们使用 catch 方法处理错误情况，输出错误信息。

总之，ES6 的 Promise 是一种非常有用的异步编程方式，可以降低代码复杂度、避免回调地狱等问题，并且可以更清晰的编写异步代码。