es6学习

背景

所有的新技术方案都是着手解决当下技术不足之处的，让我们更易理解、更方便使用，所以需要学习然后加以运用，去极大提高工作效率！！

es6初识

es6 全称 ECMAScript 6 ，是JavaScript语言的下一代标准，2015年6月发布，距离发布已经过去快3年了，虽然现在大多数浏览器还不能支持es6的全部语法，不过我们可以用babel( http://babeljs.io/)进行转换成浏览器所能识别的es5的语言（有木有很爽~~），目前就一些常用的知识点做下整理。

let、const

es6以前都是通过var声明变量，无论声明在何处，都会被声明在函数的最顶部，具有变量提升的概念；同时没有块级作用域（有函数作用域、全局作用域）。

而es6使用let定义变量，const定义常量，没有变量提升的概念，并且常量不能被修改，同时两者的声明创建了块级作用域(即{}大括号内的代码块)。

{
    let a = 1;
    var b = 0;
}
const c = 2;

a // ReferenceError: a is not defined
b // 0
c = 4; // TypeError: Assignment to constant variable.

解构赋值

es6可以按照一定模式，从数组和对象中提取值，对变量进行赋值。

let a = 1;
let b = 2;
let c = 3;
// 以上可以写成下边的方式
let [a, b, c] = [1, 2, 3];

// 数组的解构赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

// 对象的解构赋值
var { foo, bar } = { foo: "aaaa", bar: "bbbb" };
foo; // "aaaa"
bar; // "bbbb"

// 字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

如果解构不成功，变量的值就等于undefined。

函数的扩展

给函数的参数指定默认值，可结合解构赋值使用
允许使用(=>)箭头函数定义函数

es6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

function log(x, y) {
    if (typeof y === 'undefined') {
      y = 'World';
    }
    console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

es6允许为函数的参数设置默认值。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

箭头函数的使用方式：

1
2
3

var f = () => 5;
// 等同于
var f = function () { return 5 };

箭头函数使用注意点：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（还未看完）
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。（还未看完）

简洁易读，棒棒棒~

对象的扩展

Object.is()

es5 比较两个值相等，我们都知道使用相等运算符（==）和严格相等运算符（===）来比较。

但是他们两者都有各自的缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。

Object.is('foo', 'foo') // true
Object.is({}, {}) // false

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

Symbol

新的原始类型

Promise对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected

es6规定Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject){
     if(/*异步操作成功*/){
        resolve(value);
     }else{
        reject(error);
     }
})

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value){
    // success
}, function(error){
    // fail
})

Class

生成实例对象的传统方法是通过构造函数。

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

Person.prototype.toString = function(){
 return this.name + ',' + this.age
}

var p = new Person('墨鱼', 18);

es6引入了Class类这个概念，让对象原型的写法更加清晰、更像面向对象编程的语法。

class Person{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    toString(){
        return this.name + ',' + this.age;
    }
}

Module

模块的主要功能两个命令构成：export和import。

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

小结

es6这本书还在撸!