ECMAScrpit6 学习笔记

let and const

let

原来的javascript中没有块级作用域，只有函数级作用域。在es6中，使用let声明的变量具有块级作用域。

if(true) {  //  if不是函数，没有块级作用域
  var nico = 'nico'
  console.log('nihao')
}

console.log(nico)  // 'nico'

// 隔壁二狗说，我要块级作用域
if(true) {
  let nico = 'nico'
  console.log('nihao')
}

console.log(nico)  // undefined

const

const也具有块级作用域，且const声明的值不可修改

const NICO_AGE = 12
NICO_AGE = 18  //SyntaxError

Template String

空格和换行都会被保留

// 传统的字符串
var name = 'es6'

var sayhello = 'hello,my name is ' + name

console.log(sayhello)

// 隔壁二狗说，要优雅
let name = 'es6'

let sayHello = `hello, my name is ${name}`

console.log(sayHello)

Arrow Function

箭头函数自动绑定当前上下文的this

function (a, b) {
    console.log(a + b);
    return a + b;
}

// 隔壁二狗说，嗯哼，麻烦
 (a,b) => {
  console.log(a + b)
  return a + b
}

Promise

原生的 Promise 实现，不再需要 bluebird 或 Q+。

Generator

Generator生成器允许你通过写一个可以保存自己状态的简单函数来定义一个迭代算法。和Generator一起出现的通常还有yield。

function *gen() {
  yield 'hello'
  yield 'world'
  return true
}

Generator（迭代生成器）与普通函数的区别是function关键字后面有个*号，函数体内可以使用yield语句进行流程控制

let iter = gen()
let a = iter.next()
console.log(a)  // {value: 'hello', done: false}
let b = iter.next()
console.log(b)  // {value: 'world', done: false}
let c = iter.next()
console.log(c)  // {value: true, done: true}

执行gen()的时候，返回一个迭代器iterator，迭代器具有next()方法，每次调用next()，函数就执行到yield语句的地方。next()方法返回一个对象，value属性表示yield关键字后面表达式的值，done属性表示是否遍历结束。generator生成器通过next和yield的配合实现流程控制，上面的代码执行了三次next()，generator函数体才执行完毕。

Class

在Javascript中引入OO面向对象。

function Point(x,y){
  this.x = x
  this.y = y
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')'
}

var lent = new Point(1, 5)
console.log(lent.toString())

// 隔壁二狗说，我要Class
class Point {
  constructor(x ,y) {
    this.x = x
    this.y = y
  }
  
  toString() {
    return `(${this.x}, ${this.y})`
  }
}

let pointo = new Point(1, 5)
console.log(pointo.toString())

ES6 Module

export and import

export let firstName = 'arashi'
export let lastName = 'nico'
export let year = 2017

/* index.js */
import { firstName, lastName, year} from './lls'

模块整体输出

let firstName = 'nico'
let lastName = 'arashi'
let year = 2017

export { firstName, lastName, year}

/* index.js */
import * as Lls from './lls'

console.log(Lls.firstName,Lls.lastName, Lls.year)

export default整体输出

export default function() {
  console.log('My name is nico')
}

/* index.js */
import sayName from './lls'

console.log(sayName())