上周给组内做的一个 ES2015 的技术分享,这里同时放个 PDF 分享下

2015-06-23 09:53:24 +08:00
 hkongm

两个月前就开始准备的ES2015(原名ECMA Script 6)的技术分享,正值ES6规范正式定稿之际(完全是巧合,哈哈),在上周五的时候,给组内做了次技术分享,其中涵盖了比较能说明新特性的若干例子。

介绍了新版本规范的若干新特性:

http://caichao.me/前端/2015/06/23/es2015/

4713 次点击
所在节点    JavaScript
20 条回复
soli
2015-06-23 11:00:06 +08:00
赞一个先!
kuno1
2015-06-23 11:34:10 +08:00
谢谢分享,学习了 :)
poke707
2015-06-23 11:46:18 +08:00
之前一直期待ES6,但直到这个PDF才认真地了解一次:)
真是令人兴奋的ES6啊
onlyice
2015-06-23 11:51:06 +08:00
赞一个,如果大家的浏览器都能迅速支持新标准就好了。。
onlyice
2015-06-23 12:10:16 +08:00
看了一下,很多概念跟 Python 很类似。

但是下面这个例子就不理解了,为啥加了个括号就 OK 了?

helone
2015-06-23 12:11:43 +08:00
@onlyice 前端就别想尽快支持了,5.1都支持不全,老版本浏览器淘汰得一些年,但是后端node可以尽快用上
sinux
2015-06-23 13:16:08 +08:00
汽车之家
hbkdsm
2015-06-23 13:33:09 +08:00
大赞!
lonelygo
2015-06-23 13:38:41 +08:00
@hkongm keynote生成PDF,可以选择每个动画生成一页的,第三页图片挡住了文字,看不到了,泪奔
xcatliu
2015-06-23 13:45:15 +08:00
@helone @onlyice 可以用 babel 编译一下 https://babeljs.io/
sodatea
2015-06-23 14:04:37 +08:00
@onlyice 我觉得楼主这里应该是搞错了

不带括号的形式,不论是 Chrome Developer Tools、Firefox Web Console 还是 Babel REPL,报的错都是 SyntaxError,因为此处 {x: a} 解析起来有歧义,可能是 block statement 也可能是 object literal

而套了括号之后,这一行能够被确定为是 expression statement,所以可以被解析,但是严格模式下仍然会出错(ReferenceError,严格模式禁止隐式创建全局变量)(不过 Chrome 非严格模式下也报 Uncaught ReferenceError: Invalid left-hand side in assignment 错误,不太明白……)

这个 trick 在 ES6 之前也有的

@helone 前端可以用 babel 嘛
hkongm
2015-06-23 14:10:40 +08:00
@sodatea 括号这里,其实我也没搞明白,某个系统教程中的例子里特别提到了这么一个特殊的括号,然而那篇文章中也没有给个正确的解释,so...

多谢
onlyice
2015-06-23 14:15:02 +08:00
@sodatea
@xcatliu
原来如此,多谢指点...
Babel 我也来关注下
br00k
2015-06-23 15:07:37 +08:00
学习了。。
br00k
2015-06-23 15:09:25 +08:00
用ES6规范编写的能编译出兼容的ES5的代码么。
hkongm
2015-06-23 17:28:44 +08:00
@br00k 用babel
官网有例子,其适应性超高
https://babeljs.io/docs/setup/
SoloCompany
2015-06-23 22:50:48 +08:00
谢谢分享
SoloCompany
2015-06-25 16:07:52 +08:00
@sodatea
@onlyice

同意11楼的,这里是楼主搞错了
这里出现的是语法错误,和 a 是否有定义完全无关

因为 ES 解释器在这个上下文中遇到左大括号,优先解释为块定义,而不是 Object literal;而如果前面加了小括号,就会强制解释为 Object literal 了。

看看这个
```
{a:x}
ReferenceError: x is not defined //-- 这是楼主误以为报错的原因,但实际不是他想的那样

x=1
1

{a:x}
1 //-- 这里没有出现语法错的,是因为 a: 被解释成 label 了

{x}
1 //-- 没有 label 结果也是一样的

({a:x})
Object { a: 1 } //-- 加了括号,看出来区别了吧

{x}
Object { x: 1 } //-- 这是 object literal 的新语法
```

另外,ppt 里面还有个拼写错误,就是对应上面的 object literal 新语法的
```
var obj = {
 // hander: hander 的简写 ------- 拼写错误
handler
, };
```
SoloCompany
2015-06-25 16:08:39 +08:00
更正一下
上面最后一个 {x} 漏了打括号了
应该是({x})
hkongm
2015-06-26 08:48:15 +08:00
@SoloCompany 明白了!多谢指正!
{x:a}这里,a是point中没有的keyname,所以x没有被赋值
()后强制解释成object就能拿到了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/200471

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX