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);
}