ES6的学习（一）

箭头函数

• 与函数表达式相比，箭头函数有更短的语法。

    function (i) { return i * 2} //ES5
    (i) => i * 2    //ES6

复杂时需要{}包裹

    function (i, j) {
        i++
        j++
        return i + j
    }  // ES5
    (i, j) => {i++, j++, return i + j} // ES6

• 箭头函数没有自身的this，从外层继承this。
• 箭头函数通常是匿名的。

块级作用域

• ES5中只有全局作用域与函数作用域,因此内层变量将会覆盖外层变量
• let 提供块级作用域,let命名的变量只在当前块内起作用
• const 声明的是常量，不可更改

var a = 1
var b = 2
var c = 3
if (true) {
  var a = 10  // 函数作用域
  let b = 20  // if块内的作用域
      c = 30  // es5解决方法
  console.log('a:' + a)
  console.log('b:' + b)
  console.log('c:' + c)
}
console.log('a:' + a)
console.log('b:' + b)
console.log('c:' + c)

var声明的变量在循环时新值会覆盖旧值，导致输出的变量都为最终值

var a = []
for (var i = 0; i < 9; i++) {
  a[i] = function () {
        console.log(i)
    }
}
a[2]() // 9

ES5中利用闭包解决这一问题

function test (index) {
        var testback = function () {
            console.log(index)
        }
        return testback
}
var a = []
for (var i = 0; i < 9; i++) {
  a[i] = test(i)
}
a[2]()

ES6中仅仅使用let即可解决

var a = []
for (let i = 0; i < 9; i++) {
  a[i] = function () {
        console.log(i)
    }
}
a[2]() // 2

const声明常量

const a = 1
a = 10
console.log(a)

模版字符串

• ES5中，当需要插入大量html文档时需要引用template插件或是用大量‘+’连接
• 模版字符串可直接用'``'标识起始
• 模板字符串可以包含嵌入式表达式,对象字面量,甚至是函数

var myName = 'xunfeng'
console.log(`your name is ${myName}`) // your name is xunfeng
var people = {
  name: 'xunfeng',
  age: 20
}
console.log(`your name is ${people.name}, your age is ${people.age}`)
// your name is xunfeng, your age is 20
function fn () {
  return 'function'
}
console.log(`可以嵌套函数：${fn()}`)

• 模板字符串可以在表达式内进行数学运算

var a = 10
var b = 20
console.log(`a+b=${a+b}`) //a+b=30

• 模板字符串内保留空格，不需要换行符即可换行

console.log(`第一行
第二行`)
// 第一行
// 第二行

数值扩展 Numeric Literals

• 支持二进制(0b)和八进制(0o)新写法

0b111110111 === 503 // true
0o767 === 503 // true
将二进制或八进制转换成十进制
Number('0b111')  // 7
Number('0o10')  // 8

• 新的方法

Number.isFinite() // 检查一个数值是否为有限
Number.isNaN()  // 检查一个数值是否为NaN
Number.isInteger()  // 检查一个数值是否为整数
Number.EPSILON  // 极小的常量，设定的误差范围

• Math对象的扩展

Math.trunc()  // 去除一个数的小数部分，返回整数部分
Math.sign() // 判断一个数到底是正数、负数、还是零
Math.cbrt() // 用于计算一个数的立方根
Math.hypot() // 返回所有参数的平方和的平方根
Math.expm1() // Math.expm1(x)返回ex - 1，即Math.exp(x) - 1
Math.log1p() // Math.log1p(x)方法返回1 + x的自然对数
Math.log10() // Math.log10(x)返回以10为底的x的对数
Math.log2() // Math.log2(x)返回以2为底的x的对数
Math.sinh(x) // 返回x的双曲正弦（hyperbolic sine）
Math.cosh(x) // 返回x的双曲余弦（hyperbolic cosine）
Math.tanh(x) // 返回x的双曲正切（hyperbolic tangent）
Math.asinh(x) // 返回x的反双曲正弦（inverse hyperbolic sine）
Math.acosh(x) // 返回x的反双曲余弦（inverse hyperbolic cosine）
Math.atanh(x) // 返回x的反双曲正切（inverse hyperbolic tangent）

• 指数运算符 **

console.log(2 ** 3) // 8

对象部分扩展

• 变量和函数可直接作为对象的属性和方法

<!-- ES6 -->
var object = {
  value: 42,
  toString() {
    return this.value
  }
}
console.log(object.toString() === 42) // true
<!-- ES5 -->
var object = {
  value: 42,
  toString: function toString() {
    return this.value
  }
}
console.log(object.toString() === 42) // true

• 计算属性名可以用变量当做对象的属性名

var computed = 'calc'
var comFn = {
  [computed + 'xun']: 'hi',
  [computed + 'feng']: 'hello'
}
console.log(comFn['calcxun']) // hi
console.log(comFn['calcfeng']) // hello

解构

• 允许从数组或对象中提取数据并对变量赋值

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

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

默认参数 default

• ES6可以指定默认参数在arguments中

function myFn(mes = 'hello') {
  console.log(mes)
}
myFn(); // hello
myFn('hi'); // hi

其他参数 rest

• 允许将部分参数作为一个单独的数组

function myFn(a, ...b) {
  var result = a
   for(let i = 0; i<b.length; i++) {
     result += b[i]
   }
   return result
}
console.log(myFn(1,2,3,4)) // 10

迭代器 iterators && for of

• 可以直接遍历容器的内容

var a=['x', 'y', 'z']
for (let i of a){
  console.log(i)  // x y z
}

类 classes

• constructor(构造方法)
  创建实例对象时设定的属性
• extends(继承)
  class之间可以通过extends相互继承，相比于原形链更简洁易懂
• super
  在子类constructor中调用父类的constructor
• getter && setter
  在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
• static 静态方法
  不会被实例对象继承，只能通过类或类继承来调用

class student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  getName () {
    console.log(this.name)
  }
  get myAge() {
    return this.age
  }
  set myAge(value) {
    this._age = value
  }
  static bar() {
    console.log('static')
  }
}
// 创建实例对象
var xun = new student('xun', 20)
xun.getName() // xun
xun.bar() // TypeError: xun.bar is not a function. (In 'xun.bar()', 'xun.bar' is undefined)
student.bar() // static
// 继承
class Tom extends student {
  constructor(name, age, sex) {
    super(name, age)
    this.sex = sex
  }
}
var tom = new Tom('tom', 20, 'man')
console.log(tom)  // 实例对象属性
tom.myAge = 22
console.log(tom._age) // 22
console.log(tom.myAge) // 20

模块 modules

• export 暴露对外接口
• import 导入其他模块接口

<!-- export.js -->
//命名导出
export var foo = ...
export let bar = ...
export const MY_CONST = ...

export function myFunc() {
   ...
}
export function* myGeneratorFunc() {
   ...
}
export class MyClass {
   ...
}
// default 导出
export default 123
export default function (x) {
   return x
}
export default x => x;
export default class {
   constructor(x, y) {
       this.x = x
       this.y = y
   }
};
//也可以自己列出所有导出内容
const MY_CONST = ...
function myFunc() {
   ...
}

export { MY_CONST, myFunc }
//或者在导出的时候给他们改个名字
export { MY_CONST as THE_CONST, myFunc as theFunc }

//还可以导出从其他地方导入的模块
export * from 'src/other_module'
export { foo, bar } from 'src/other_module'
export { foo as myFoo, bar } from 'src/other_module'

<!-- import.js -->

// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib'
import theDefault from 'src/mylib'
import { named1, named2 } from 'src/mylib'

// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib'

// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib'

// Only load the module, don’t import anything
import 'src/mylib'

参考链接

30分钟掌握ES6/ES2015核心内容
ECMAScript 6 入门
ECMAScript 6 equivalents in ES5

如有错误，欢迎指正。