ES6 常识 Learn ES2015

Learn ES2015
在写vue用axios库时，发现有类似如下代码

axios.get(`/${this.props.subreddit}.json`)

查阅了相关资料，是ES6新特性，开此篇，以便后续收集备忘。
1. 反单引号 模板字符串

术语： Template Literals （模板对象）
语法： `${NAME}`
作用： :避免模板字符串拼接的不便。
备注：与bash脚本中的变量引用有异曲同工之妙，只不过使用了反引号而已

var x = "abc";
console.log(`start ${x} end`);

后续： 在ES6中对于多行字符串使用反引号就可以了。
官方资讯是这样讲的，好的代码会说话

// Basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`In ES5 this is
 not legal.`

// Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

2. 解构赋值

Destructuring Assignment
其丢弃值的样子，与go语言简直是如出一撤。

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

3. Default + Rest + Spread
对象展开运算符 …o

数组参数解析包，与python偏函数,php参数解包有异曲同工之妙！！！

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

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

4. 增强对象字面量

Enhanced Object Literals

5.ES2015模块
一段vue代码

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意 在ES2015+中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

• 用在模板中的自定义元素的名称
• 包含了这个组件选项的变量名

6. 生成器函数
生成器用function* 和 yield 为标识，与python类似。同样使用next 迭代，yield返回一个生成器实例，而在 ES7 中可以使用 await 表示，异步的春天马上到来了。

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}