ES6 常用特性
ES6 给我们提供了许多的新语法和代码特性来提高 javascript 的体验,对于前端开发者而言,掌握 ES6 已经成为了一种必须。
let 与 const
在我看来，在 es6 新特性中，在定义变量的时候统统使用 let 来代替 var 就好了，const 则很直观，用来定义常量，即无法被更改值的变量。let 与 const 具有块级作用域的特性，可以避免变量污染。
for (let i = 0; i < 2; i++) {
console.log(i); //输出: 0,1
}
箭头函数
ES6 中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：
let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter(item => item < 10);
console.log(newArr); //[6, 8, 9];
字符串模板
ES6 中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：
//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
解构赋值
若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在 ES6 中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子：
function getVal() {
return [1, 2];
}
var [x, y] = getVal(); //函数返回值的解构
console.log("x:" + x + ", y:" + y); //输出：x:1, y:2
扩展运算符
let arrPerson = ["wn", "ls"];
let arrNewPerson = [...arrPerson, "zs"];
console.log(arrNewPerson); // 输出 ["wn", "ls", "zs"]
默认参数
在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name) {
var name = name || "tom"; //传统的指定默认参数的方式
console.log("Hello " + name);
}
//运用ES6的默认参数
function sayHello2(name = "tom") {
//如果没有传这个参数，才会有默认值，
console.log(`Hello ${name}`);
}
sayHello(); //输出：Hello tom
sayHello("jarson"); //输出：Hello jarson
sayHello2(); //输出：Hello tom
sayHello2("jarson"); //输出：Hello jarson
注意： sayHello2(name=’tom’)这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。
定义函数
我们先来看一个基本的新特性，在 javascript 中，定义函数需要关键字 function，但是在 es6 中，还有更先进的写法，我们来看： es6 写法：
var human = {
breathe(name) {
//不需要function也能定义breathe函数。
console.log(name + " is breathing...");
}
};
human.breathe("jarson"); //输出 ‘jarson is breathing...’
转化为 js 代码:
var human = {
breathe: function(name) {
console.log(name + "is breathing...");
}
};
human.breathe("jarson");
类与继承
class App extends React.Component{
constructor(props){
super(props);
this.state={
visible:false;
}
render(){
return (
<div>
<p>hello,world!</p>
</div>
)
}
}
}
模块
在 ES6 标准中，javascript 原生支持 module 了。将不同功能的代码分别写在不同文件中，各模块只需导出(export)公共接口部分，然后在需要使用的地方通过模块的导入(import)就可以了。下面继续看例子：
内联导出 先看模块文件 app.js：
export class Human {
constructor(name) {
this.name = name;
}
breathe() {
console.log(this.name + " is breathing");
}
}
export function run() {
console.log("i am runing");
}
function eat() {
console.log("i am eating");
}
例子中的模块导出了两个对象：Human 类和 run 函数， eat 函数没有导出，则仍为此模块私有，不能被其他文件使用。 导出一组对象 另外，其实如果需要导出的对象很多的时候，我们可以在最后统一导出一组对象。 更改 app.js 文件：
class Human {
constructor(name) {
this.name = name;
}
breathe() {
console.log(this.name + " is breathing");
}
}
function run() {
console.log("i am runing");
}
function eat() {
console.log("i am eating");
}
export { Human, run };
这样的写法功能和上面一样，而且也很明显，在最后可以清晰的看到导出了哪些对象。
Default 导出 导出时使用关键字 default，可将对象标注为 default 对象导出。default 关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。 查看导出 default 对象的语法：
... //创建类、函数等等
export default { //把Human类和run函数标注为default对象导出。
Human,
run
};
无对象导入 如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中，导入之后只执行逻辑。如：
import "./module1.js";
导入默认对象 使用 Default 导出方式导出对象，该对象在 import 声明中将直接被分配给某个引用，如下例中的”app”。
import app from "./module1.js";
上面例子中，默认./module1.js 文件只导出了一个对象；若导出了一组对象，则应该在导入声明中一一列出这些对象，如：
import { Human, run } from "./app.js";
