ES6特性

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

1、类

引入类的概念，让其具有面向对象的开发

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
}

2、模块化

模块之间的相互调用关系是通过export来规定模块对外暴露的接口，通过import来引用其它模块提供的接口

export var name = 'Rainbow';                        //导出变量
export const sqrt = Math.sqrt;                      //导出常量

var name = 'Rainbow';                               //导出多个变量
var age = '24';
export {name, age};

export function myModule(someArg) {                 //导出函数
  return someArg;
}

export default class MyComponent extends Componet{  //导出组件
    render(){
        <Text>自定义组件</Text>
    }
}

定义好模块的输出以后就可以在另外一个模块通过import引用

import {myModule} from 'myModule';    //导入函数
import {name,age} from 'test';        //导入变量
import MyComponent from 'MyComponent' //导入组件

3、箭头函数

箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题

()=>{
    alert("foo");
}

错误示范

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    
    }
}

正确示范

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
    
    }
}

4、函数参数默认值

function foo(height = 50, color = 'red'){}

5、模板字符串

var name = `Your name is ${firstname} ${lastname}`

6、解构赋值

从数组中获取值

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

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

交换两个变量的值

var a = 1;
var b = 3;

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

获取对象中的值

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

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

7、延展操作符

延展操作符…，可以对数组、对象、string进行展开操作

myFunction(...iterableObj);             //对函数展开
[...iterableObj, '4', ...'hello', 6];   //对数组展开
let objClone = { ...obj };              //对对象展开

对数组展开

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // 将 arr2 中所有元素附加到 arr1 后面并返回

对对象展开

var params = {
    name: '123',
    title: '456',
    type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />

8、对象属性简写

简写前

const name='Ming',age='18',city='Shanghai';

const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);

简写后

const name='Ming',age='18',city='Shanghai';

const student = {
    name,
    age,
    city
};
console.log(student);

9、Promise

Promise是异步编程的一种解决方案，在不使用Promise的时候需要嵌套多层代码

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);

使用Promise后，只需要通过then操作符进行操作

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

10、Let与Const

const与let都是块级作用域

{
  var a = 10;   // 全局作用域
}
console.log(a); // 输出10

{
  let a = 10;   // const或let，块级作用域
}
console.log(a); //-1 or Error“ReferenceError: a is not defined”

ES7特性

• includes()
• 指数操作符

1、includes()

includes()函数用来判断一个数组是否包含一个指定的值

arr.includes(x)
//等同于
arr.indexOf(x) >= 0   

2、指数操作符

引入了指数运算符，具有与Math.pow(..)等效的计算结果

console.log(Math.pow(2, 10)); // 输出1024
console.log(2**10);           // 输出1024

ES8特性

• async/await
• Object.values()
• Object.entries()
• String padding
• 函数参数列表结尾允许逗号
• Object.getOwnPropertyDescriptors()

1、async/await

async/await是异步函数，结合Promise，在使用上使整个代码看起来很简洁

//登陆用户
login(userName) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1001');
        }, 600);
    });
}
//获取用户数据
getData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === '1001') {
                resolve('Success');
            } else {
                reject('Fail');
            }
        }, 600);
    });
}

// 不使用async/await
doLogin(userName) {
    this.login(userName)
        .then(this.getData)
        .then(result => {
            console.log(result)
        })
}

// 使用async/await
async doLogin(userName) {
    const userId=await this.login(userName);
    const result=await this.getData(userId);
}
doLogin('Hensen').then(console.log); //通过then获取异步函数的返回值

async/await支持并发操作，我们通过Promise.all来实现await的并发调用

async function charCountAdd(data1, data2) {
    const [d1,d2]=await Promise.all([charCount(data1),charCount(data2)]);
    return d1+d2;
}

charCountAdd('Hello','Hi')
    .then(console.log)
    .catch(console.log); //捕捉整个async/await函数的错误

function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}

2、Object.values()

遍历对象的所有值

const obj = {a: 1, b: 2, c: 3};

const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]

const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

3、Object.entries()

遍历对象的所有key和value

Object.keys(obj).forEach(key=>{
    console.log('key:'+key+' value:'+obj[key]);
})

for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}

4、String padding

PadStart和PadEnd函数可向左、右填充字符串（如空格），如果目标长度太短则不填充，如果目标长度有多余的空位，则填补参数padString的值

// String.prototype.padStart(targetLength [, padString])
'hello'.padStart(10); // '     hello'
'hello'.padStart(10, '0'); // '00000hello'
'hello'.padStart(); // 'hello'
'hello'.padStart(6, '123'); // '1hello'
'hello'.padStart(3); // 'hello'
'hello'.padStart(3, '123'); // 'hello';

// String.prototype.padEnd(targetLength [, padString])
'hello'.padEnd(10); // 'hello     '
'hello'.padEnd(10, '0'); // 'hello00000'
'hello'.padEnd(); // 'hello'
'hello'.padEnd(6, '123'); // 'hello1'
'hello'.padEnd(3); // 'hello'
'hello'.padEnd(3, '123'); // 'hello';

5、函数参数列表结尾允许逗号

var f = function(a,b,c,d,) {}

6、Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()获取一个对象的所有自身属性的描述符

const obj2 = {
    name: 'Jine',
    get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)