ES6新特性学习

ES6

想要在浏览器端使用ES 2015最新语法，其实很简单，只需要一个转换器即可，Babel是ES 2015最流行的转换器之一，Babel加上各种插件和polyfill能基本上支持绝大部分新语法。

let和const

• 不存在变量提升
• let。let声明的变量拥有块级作用域，

for(let i = 0;i<5;i++){
	
}
console.log(i); // i is not definded

• const
  const则很直观，用来定义常量，即无法被更改值的变量。

变量的结构赋值

解构（Destructuring）赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中

// 数组的解构赋值
let [a, b, c] = [1,2,3]

// 对象的解构赋值
let {foo: foo, bar: bar} = {foo: 'aaa', bar: 'bbb'}

// 字符串的解构赋值
let [a,b] = 'hi';

// 数值和布尔值的解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
let {prop: x} = null // TypeError

// 函数参数的解构赋值
function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

用途

1. 交换变量的值
[x, y] = [y, x]

2. 从函数返回多个值
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3.函数参数的定义 
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

字符串的扩展

1. includes(),startsWith(),endsWith()
2. 模板字符串

函数的扩展

函数参数默认值

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

rest参数（形式为…变量名），用于获取函数的多余参数

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

箭头函数 =>,箭头函数通常比匿名函数还要简洁，以后会不会全部都用箭头函数呢？

• 语法，左边参数，右边内容*

let fn = () => {
    console.log('hello world');
};

不过，使用时this的指向需要注意，比如绑定事件

$('#selector').on('click', () => {
    $(this).addClass('new');
});

会被翻译成

var _this = this;
$('#selector').on('click', function() {
    $(_this).addClass('new');
});

this为全局变量

数组的扩展

扩展找运算符...

// 替代函数的apply方法
// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

// 应用
1.复制数组
const a2 = [...a1];
2. 合并数组
[...1,...b]

// Array.from()
用于将两类对象转换为真正的数组：类似数组的对象和可遍历的对象
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// Array.of()
用于将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]

// find(),findIndex(),entries()，keys() 和 values()
includes()

Symble

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。
ES6引入了原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：

• undefined

• null

• Boolean

• String

• Number

• Object

• 用法

let s = Symbol();

typeof s
// "symbol"

var s1 = Symbol('foo');
var s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

Set和Map数据结构

Set类似数组，但是成员的值是唯一的
Map“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

size,set(key,value),get(key),has(key),delete(key),clear()

Promise

Promise是异步编程的一种解决方案。
特点

1. 对象状态不受外界影响。三种状态：pending、fufilled、rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2. 一旦状态改变就不会再变。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected
3. 如果不设置回调函数，Promise内部抛出的错误不会反映到外部

基本用法
新建后立即执行

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

Generator函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
两个特征

1. function关键字与函数名之间有一个星号
2. 函数体内部使用yield表达式，定义不同的内部状态

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

执行步骤
Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

async函数

Generator函数的语法糖。配合fetch可以很好地使用