V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
hkongm
V2EX  ›  JavaScript

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

  •  
  •   hkongm · 2015-06-23 09:53:24 +08:00 · 4703 次点击
    这是一个创建于 3434 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    • Arrows function
    • default + reset + spread
    • let + const
    • Classes
    • Map + Set
    • Destructuring
    • String
    • Modules
    • Iterators
    • Symbols
    • Enhanced Object Literals

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

    第 1 条附言  ·  2015-06-23 17:32:21 +08:00
    PDF已更新,开头图片不会挡住文字了。
    下面朋友们提的问题,在被挡住的内容中已有提及。
    babel如何使用的例子(向导)
    https://babeljs.io/docs/setup/
    20 条回复    2015-06-26 08:48:15 +08:00
    soli
        1
    soli  
       2015-06-23 11:00:06 +08:00
    赞一个先!
    kuno1
        2
    kuno1  
       2015-06-23 11:34:10 +08:00
    谢谢分享,学习了 :)
    poke707
        3
    poke707  
       2015-06-23 11:46:18 +08:00 via Android
    之前一直期待ES6,但直到这个PDF才认真地了解一次:)
    真是令人兴奋的ES6啊
    onlyice
        4
    onlyice  
       2015-06-23 11:51:06 +08:00
    赞一个,如果大家的浏览器都能迅速支持新标准就好了。。
    onlyice
        5
    onlyice  
       2015-06-23 12:10:16 +08:00   ❤️ 1
    看了一下,很多概念跟 Python 很类似。

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

    helone
        6
    helone  
       2015-06-23 12:11:43 +08:00
    @onlyice 前端就别想尽快支持了,5.1都支持不全,老版本浏览器淘汰得一些年,但是后端node可以尽快用上
    sinux
        7
    sinux  
       2015-06-23 13:16:08 +08:00
    汽车之家
    hbkdsm
        8
    hbkdsm  
       2015-06-23 13:33:09 +08:00
    大赞!
    lonelygo
        9
    lonelygo  
       2015-06-23 13:38:41 +08:00
    @hkongm keynote生成PDF,可以选择每个动画生成一页的,第三页图片挡住了文字,看不到了,泪奔
    xcatliu
        10
    xcatliu  
       2015-06-23 13:45:15 +08:00
    @helone @onlyice 可以用 babel 编译一下 https://babeljs.io/
    sodatea
        11
    sodatea  
       2015-06-23 14:04:37 +08:00   ❤️ 2
    @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
        12
    hkongm  
    OP
       2015-06-23 14:10:40 +08:00
    @sodatea 括号这里,其实我也没搞明白,某个系统教程中的例子里特别提到了这么一个特殊的括号,然而那篇文章中也没有给个正确的解释,so...

    多谢
    onlyice
        13
    onlyice  
       2015-06-23 14:15:02 +08:00 via Android
    @sodatea
    @xcatliu
    原来如此,多谢指点...
    Babel 我也来关注下
    br00k
        14
    br00k  
       2015-06-23 15:07:37 +08:00
    学习了。。
    br00k
        15
    br00k  
       2015-06-23 15:09:25 +08:00
    用ES6规范编写的能编译出兼容的ES5的代码么。
    hkongm
        16
    hkongm  
    OP
       2015-06-23 17:28:44 +08:00
    @br00k 用babel
    官网有例子,其适应性超高
    https://babeljs.io/docs/setup/
    SoloCompany
        17
    SoloCompany  
       2015-06-23 22:50:48 +08:00 via Android
    谢谢分享
    SoloCompany
        18
    SoloCompany  
       2015-06-25 16:07:52 +08:00   ❤️ 1
    @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
        19
    SoloCompany  
       2015-06-25 16:08:39 +08:00
    更正一下
    上面最后一个 {x} 漏了打括号了
    应该是({x})
    hkongm
        20
    hkongm  
    OP
       2015-06-26 08:48:15 +08:00
    @SoloCompany 明白了!多谢指正!
    {x:a}这里,a是point中没有的keyname,所以x没有被赋值
    ()后强制解释成object就能拿到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1047 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:25 · PVG 03:25 · LAX 11:25 · JFK 14:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.