ES6入门介绍

ES6 新增 API

• 类；
• 模块化；
• 箭头函数；
• 函数参数默认值；
• 模版字符串；
• 解构赋值；
• 延展操作符；
• 对象属性简写；
• Promise；
• Let 与 Const；

API 解读

1. 类

引入了 class 类。

2. 模块化

        ES5不⽀持原⽣的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每⼀个模块都有⾃⼰单独的作⽤域，模块之间的相互调⽤关系是通过 export 来规定模块对外暴露的接⼝，通过import来引⽤其它模块提供的接⼝。同时还为模块创造了命名空间，防⽌函数的命名冲突。

⚠️：一条 impirt 语句可以同时导入默认函数和其他变量。

3. 箭头函数

        箭头函数的使用可以简写 function 函数，同时使用箭头函数可以改变 this 指向。

4. 函数参数默认值

        ES6 支持在定义函数时为其设置默认值。

function f(height = 8,width = 10){ …… }

5. 模版字符串

ES6 支持模版字符串，使得字符串的拼接更加地简洁、直观。

不使用模版字符串：

var name = ' Your name is ' + first + ' ' + last + ' . '

使用模版字符串：

var name = ' Your name is  ${first} ${last} '

在 ES6 中通过 ${ } 就可以完成字符串的拼接，将变量放在 { } 中间即可。

6. 解构赋值

        作为 JavaScript 中的一种表达式，解构赋值可以方便地从数组或对象中快速提取赋给定义的变量。

        从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。

        从对象中获取值并赋值给变量的话，变量名要统一。

7. 延展操作符

        延展操作符 ... 可以在函数调⽤/数组构造时, 将数组表达式或者string在语法层⾯展开；

还可以在构造对象时, 将对象表达式按key-value的⽅式展开

8. 对象属性简写

        在 ES6 中允许我们在设置一个对象的属性的时候不指定属性名。

不使用 ES6 ：

const name = 'Ming',
age = '18',
city = 'Shanghai';
const student = {
 name: name,
 age: age,
 city: city
};
console.log(student);//{age: "18",city: "Shanghai",name: "Ming"}

使用 ES6：

const name = 'Ming', 
age = '18', 
city = 'Shanghai'; 
const student = { 
 name, 
 age, 
 city 
}; 
console.log(student); 

9. Promise

        Promise 是异步编程的一种解决方案，相比于使用 callback 更优。

10. Let 与 Const

        在 ES6 之前 JavaScript 中没有块级作用域，let 与 const 的出现使得 JavaScript 中出现了块级作用域，而以前使用的 var 是函数作用域。