ES6 常用新特性

ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。ES6给我们提供了许多的新语法和代码特性来提高javascript的体验。
ES6的特性比较多，在 ES5 发布近 6 年（2009-11 至 2015-6）之后才将其标准化。两个发布版本之间时间跨度很大，所以ES6中的特性比较多。

在这里列举几个常用的：

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

1、类

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

  class Animal {
    // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);
    }
  }

 var animal = new Animal('dog','white');//实例化Animal
 animal.toString();

 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true

 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super函数的constructor将会被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat('catch')
 cat.toString();

 // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

2、模块化

在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

export来导出多个变量或函数

导出单个变量

export let name = 'yinol'

导出多个变量

 let name = 'yinol';
 let age = '24';
 export {name, age};

导出函数

 export function myModule(someArg) {
   return someArg;
 } 

import 导入

无对象导入
如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中，导入之后只执行逻辑

 import './module'

导入默认对象

 import {myModule} from 'myModule'
 import {name,age} from 'test'
 //import 语句可以同时导入默认函数和其它变量
 import defaultMethod, { otherMethod } from 'xxx.js';

3、箭头函数

ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码

 //箭头函数例子
()=>1
v=>v+1
(a,b)=>a+b
//数组
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];

4、函数参数默认值

在定义函数的时候设置默认默认值

function foo(a = 50, b = 'red')
{
   // TODO
}
//但当参数的布尔值为false时，就会有问题了。比如，我们这样调用foo函数：
foo(0, "");
//因为0的布尔值为false，这样a的取值将是50。同理b的取值为‘red’。

5、模板字符串

ES6中允许使用反引号 ` 来创建字符串，使得字符串的拼接更加的简洁、直观。

//ES5
var name = 'Your name is ' + first + ' ' + last + '.';
//ES6
var name = `Your name is ${first} ${last}.`;

6、解构赋值

若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

获取数组中的值

var foo = ["one", "two", "three", "four"];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"

//你也可以这样写
var a, b; //先声明变量

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

没有从数组中的获取到值，你可以为变量设置一个默认值

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

获取对象中的值

const student = {
  name:'yinol',
  age:'18'
};

const {name,age,city} = student;
console.log(name); // "yinol"
console.log(age); // "18"

7、延展操作符

延展操作符…可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;

函数调用

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

//不使用延展操作符
console.log(sum.apply(null, numbers));

//使用延展操作符
console.log(sum(...numbers));// 6

构造数组

没有展开语法的时候，只能组合使用 push，splice，concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅：

const stuendts = ['Jine','Tom']; 
const persons = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]

数组拷贝

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4); 
console.log(arr2)//[1, 2, 3, 4]

8、对象属性简写

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

const name='Ming',age='18',city='Shanghai';
//ES5
const student = {
    name:name,
    age:age,
    city:city
};
//ES6
const student = {
    name,
    age,
    city
};

9、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

//ES5
setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);
//ES6
var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});
//两个then来进行异步编程串行化
waitSecond
    .then(function()
    {
      console.log("Hello"); // 1秒后输出"Hello"
      return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

10、Let与Const

在之前JS是没有块级作用域的，const与let填补了这方便的空白，const与let都是块级作用域,在我看来，在es6新特性中，在定义变量的时候统统使用let来代替var就好了，const则很直观，用来定义常量，即无法被更改值的变量。

{
  var a = 10;
}
console.log(a); // 输出10
{
  let b = 10;
}

console.log(b); //-1 or Error“ReferenceError: b is not defined”