ES6基础

箭头函数

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

基础语法:

a => b; 参数 a ，返回 b
(a, b) => {var temp = 1; return a + b;} 多条语句和多条参数，用括号包裹

特殊的this:

箭头函数内部不会生成新的this绑定，其this等于箭头函数所在环境的this。e.g:

//传统函数
function Person() {
  this.age = 0;

  setInterval(function growUp() {
       this.age++; //window
  }, 1000);
}

var p = new Person();
//箭头函数
function Person() {
  this.age = 0;

  setInterval(function growUp() {
       this.age++; //person
  }, 1000);
}

var p = new Person();

箭头函数会忽略strict对于this的规则。
箭头函数会忽略call/apply传递的this参数。
箭头函数没有arguments相关参数。在箭头函数内部调用arguments会引用到外部函数的arguments

类

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

基础语法

class Test {
	 //构造函数
    constructor(name) {
    		this.name = name;
    }
    //静态方法，只有class声明的时候会执行一次
    static tempFn() {
    	 return 1;
    }
    //get 方法
    get testName() {
    	return this.name + 'test';
    }
    //普通函数
    sayHello() {
    	console.log('hello'); 
    }
}
class subTest extend Test{
   sayHi() {
     super.sayHello();
   }
}

加强的对象字面量

基本用法

var obj {
   test() {
      console.log('test fn');
   }
}

模板字符串

基本用法

1 2	var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`

解构赋值

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

基本用法

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

[a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

({a, b} = {a:1, b:2})
console.log(a); // 1
console.log(b); // 2

({a, b, ...rest} = {a:1, b:2, c:3, d:4});

默认参数

基本用法

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}

剩余合并

基本用法

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

扩展

基本用法

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

let const

基本用法

1 2	let temp; const temp;

特点

let没有变量提升。
let仅在块级作用域生效。(如 if 作用域)
let 无法再同一块级作用域重复声明。
const赋值之后无法被修改。

Iterator遍历器

Iterator 主要供 for…of 遍历使用。一个 Iterator 主要有以下结构：next 方法。返回 {done: false/true,value: xxx} 在ES6中，具备 Symbol.iterator 属性的数据结构称为Iterable(可遍历) ，数组、对象、字符串等都默认实现了 Symbol.iterator。

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

for…of 方法

遍历Iterator(遍历器)

基本用法

默认数组、字符串、对象等都实现了Symbol.iterator接口，也可以自己实现，只要实现了该接口，就可以通过遍历器遍历。

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

Symbol

Symbol是ES里面的新类型。用于生成一个独一无二的属性，多用于解决命名冲突的问题。如：

1
2
3

var mySymbol = Symbol();  
obj[mySymbol] = "ok!";  // 保证独一无二的key  
console.log(obj[mySymbol]);  // ok!

Symbol也不会被for…of for…in 等遍历出来。

generator

generator可以直接返回iterator，其语法形式为:

function* test() {
  yield 1;
  yield 2;
  return 3;
}
var testGenerator = test();
test.next(); //{value: 1, done: flase}
test.next(); //{value: 2, done: flase}
test.next(); //{value: 3, done: true}

其中，generator function写作function ，在function 中，遇到 yield，代码执行就会停止，直到下次调用 next 方法，yield的返回值会作为 value，遇到return，此次iterator遍历完毕。

yield*

yield之后可以继续跟一个 generator，其效果为执行next的时候将进入到新的generator中执行，类似于深度遍历。

function *foo() {
  yield 2;
  yield 3;
  return "foo";
}
function *bar() {
  yield 1;
  var v = yield *foo();
  console.log( "v: " + v );
  yield 4;
}	
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}

Unicode

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode

Modules 模块化

基本语法

//a.js，导出变量
var a = 1;
export var a=1; 
export {a};
export {a as b};
export default a;
//b.js 引入变量

Map

基本语法

Set

Set就是不含重复值的数组。

基本语法

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {
  console.log(i);
}

Map

Map 是 object 的升级版本，可以使用任何类型作为 key值。

基本用法

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"