ES6（2015）新特性：类、模块化、箭头、函数参数默认值、模板字符串

ES6带来了特别多的新特性，新方法。对我们前端工作人员的编码习惯和编码模式都带来了翻天覆地的变化。

ES6是ECMA Script的第六个大版本，从ES2015开始，ECMA Script不再使用版本号作为更新标志，而是改成年份来标记，但是大家还是愿意用ES6来称呼ES2015，甚至很多文章对后期更新的版本更新内容也一概用ES6来进行指代，比如异步终极解决方案async await 其实是ES2017的新增内容，但是很多科普文章还是将其称为ES6的新特性，所以大家一定要分清楚哦，看到ES6要知道他是单指ES2015还是泛指ES2015之后所有的新内容~

1. 类（class）

ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。

class Man {
  constructor(name) {
    this.name = 'fly63前端';
  }
  console() {
    console.log(this.name);
  }
}
const man = new Man('fly63前端');
man.console(); // fly63前端

2. 模块化(ES Module)

ES6模块在编译时就能确定模块的依赖关系，以及输入和输出的变量。这种加载称为“编译时加载”或者静态加载，效率更高，使静态分析成为可能，比如引入宏和类型检验功能。这也导致了没法引用ES6模块本身，因为它不是对象。
ES6模块自动采用严格模式。尤其需要注意this的限制，顶层的this指向undefined。
ES6模块通过export命令规定模块的对外接口，通过import命令输入其它模块提供的功能。

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

3. 箭头（Arrow）函数

ES6可以使用“箭头”（=>）定义函数，注意是函数，不要使用这种方式定义类（构造器）。

const func = (a, b) => a + b;
func(1, 2); // 3

4. 函数参数默认值

在ES6如果函数参数没有值或未定义的，默认函数参数允许将初始值初始化为默认值。

function foo(age = 25,){ // ...}

5. 模板字符串

模板字面量是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

const name = 'fly63前端';
const str = `Your name is ${name}`;

6. 解构赋值

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1

7. 延展操作符

延展操作符 = ...可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开，还可以在构造对象时，将对象表达式按key-value的方式展开。

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

8. 对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。对象中直接写变量，非常简洁。

const name='fly63前端',
const obj = { name };

9. Promise

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ，再打印 2

10. let和const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let name = 'fly63'；
const arr = [];

链接: https://www.fly63.com/article/detial/10192