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

简版 es6 教程

  •  2
     
  •   SimplyY · 2016-01-11 21:45:10 +08:00 · 8835 次点击
    这是一个创建于 3246 天前的主题,其中的信息可能已经有所发展或是发生改变。

    花了 6 天终于看完阮一峰的 es6 ,并且写好了对应的简版 es6 教程,祝大家看这个能 5 个小时学会 es6 。 这是我的教程地址: http://t.cn/R4N3Qsf

    第 1 条附言  ·  2016-01-12 09:42:15 +08:00
    觉得我写的不错博客还算有用的话,快来 star 我的博客项目吧。(别人博客项目少则都有 50 60 ,我才 3star sad)

    https://github.com/SimplyY/Blog
    第 2 条附言  ·  2016-01-22 10:56:18 +08:00
    话说博客重写中=。=


    这段时间,想看我的博客的,其实我的所有博文都在 github repo 的,欢迎 star 。
    不过大家要在 repo 里找找,没博客那么方便。
    https://github.com/SimplyY/blog/tree/master/Article
    第 3 条附言  ·  2016-02-16 17:32:17 +08:00
    博客主要功能重写好了,简版 es6 教程 在这里 http://localhost:8080/tag/56c2d7976ba384e02299f9c8
    第 4 条附言  ·  2016-02-16 17:47:10 +08:00
    刚才打错了,应该是这里。。 http://simplyy.space/tag/56c2d7976ba384e02299f9c8
    47 条回复    2016-12-12 17:00:44 +08:00
    thinkif
        1
    thinkif  
       2016-01-11 21:54:52 +08:00
    这个主意不错,支持楼主
    SimplyY
        2
    SimplyY  
    OP
       2016-01-11 22:08:10 +08:00
    @thinkif 阮一峰里面,“下面的例子,另一个例子”,还有很多可以举一反三的也很详细的写上去了,总之太多了,看的太累了。

    他的非常适合新手看,但是现在学 es6 的新手应该不多吧。。。
    SimplyY
        3
    SimplyY  
    OP
       2016-01-11 22:10:50 +08:00
    咦,,我写的博客在服务器里出问题了。。我去瞧瞧。。
    SimplyY
        4
    SimplyY  
    OP
       2016-01-11 22:13:30 +08:00
    重启服务器就好了= =,不知名 bug ,寒假重写势在必行。。
    banricho
        5
    banricho  
       2016-01-11 22:17:30 +08:00   ❤️ 1
    我已经看了 10 天了……心好累 - -
    canesten
        6
    canesten  
       2016-01-11 22:20:06 +08:00 via Android
    解构赋值这么反人类的阅读体验不知道是哪个白痴设计的
    SimplyY
        7
    SimplyY  
    OP
       2016-01-11 22:20:15 +08:00
    @banricho 23333 ,我写完心更累,每天 3 小时以上。。。
    SimplyY
        8
    SimplyY  
    OP
       2016-01-11 22:20:48 +08:00
    @canesten 我觉得还好啊,
    klmd99
        9
    klmd99  
       2016-01-11 22:21:04 +08:00
    我也在看,新手,很好的教程!不过需要耐心。
    klmd99
        10
    klmd99  
       2016-01-11 22:21:46 +08:00
    @canesten 很理想的功能
    br00k
        11
    br00k  
       2016-01-11 22:33:48 +08:00
    欢迎加入 typescript ,😄😄
    canesten
        12
    canesten  
       2016-01-11 22:33:53 +08:00 via Android
    @SimplyY
    @klmd99
    let [foo, [[bar], baz]] = [1, [[2], 3]]
    这种大圈套小圈的写多层纯属自找苦吃
    根本没有一行解决一个赋值清楚

    let { first: f, last: l } = obj;
    这种冒号等于是 as 的语义,为什么不用 as 更直观?

    var [a, b, c] = [1, 2, 3];
    这种最简单的写长了对不准都很难查 bug
    SimplyY
        13
    SimplyY  
    OP
       2016-01-11 22:36:50 +08:00
    @canesten 语法糖。。。何必写的复杂,,就好比列表推导,复杂起来, debug 也很蛋疼。

    但是我觉得吧,语法糖放在一杯子水里面它是甜的,放到水瓶里,它就没味道,反而累赘
    canesten
        14
    canesten  
       2016-01-11 22:41:35 +08:00 via Android
    @SimplyY
    这种影响阅读的根本就不算糖
    ES6 就算没有这样的糖也完全不受影响
    加了如果被滥用反而增加维护难度
    yyfearth
        15
    yyfearth  
       2016-01-11 22:47:24 +08:00
    @canesten 这个是没办法的事情 任何好东西 如果在极端情况下都是行不通的
    这些很多情况下是为了简化函数传递参数时候大量的代码
    一行解决一个赋值 虽然清楚 但是如果这个 object 非常复杂的话 你会发现一个函数可能超过一半的代码是在一个个赋值 我就遇到过无数次了

    对于第一个例子 那很明显只是一个比较极端的例子 真是情况下 估计除了按照模式解开 JSON 这种情况外 都是没事找抽

    @SimplyY 我觉得这些语法糖 应该是要有的 毕竟可以提高写代码的效率
    我可不希望写代码的时候 大部分都是无关逻辑的废话(比如很多赋值和转换)
    当然任何时候 如果过于使用这些 都会造成这些困难 本来 JS 就已经是这样了
    这个是看人 而不是看工具
    SimplyY
        16
    SimplyY  
    OP
       2016-01-11 22:51:30 +08:00
    @yyfearth 非常赞同,“任何好东西 如果在极端情况下都是行不通的 ” “语法糖 可以提高写代码的效率 ”
    canesten
        17
    canesten  
       2016-01-11 23:00:44 +08:00 via Android
    @yyfearth
    认同,所以我认为官方提供一个按模式解 JSON 的功能足矣,把其他找抽的途径关闭。
    再不济大家在博客和论坛传播的时候也应该多指出找抽的点,并提倡规避他。
    gouflv
        18
    gouflv  
       2016-01-11 23:01:47 +08:00
    太好了 要的就是简明易查
    canesten
        19
    canesten  
       2016-01-11 23:03:51 +08:00 via Android
    @yyfearth
    另外那个 as 语义的冒号真是非常低劣,之前冒号都是赋值的语义,从左往右读,在这里生生的变歧义了,从右往左读。
    klmd99
        20
    klmd99  
       2016-01-11 23:07:32 +08:00
    多一种方法,在某些情况下适用,而不是适合所有情况。
    怎么写还是需要发挥主观能动性。
    canesten
        21
    canesten  
       2016-01-11 23:11:05 +08:00 via Android
    @klmd99
    这主观能动性失控以后 js 要走上 perl 的老路
    作为一个工程化的语言
    如何尽可能的减少初级程序员犯错的可能才是最重要的
    bdbai
        22
    bdbai  
       2016-01-11 23:17:03 +08:00 via iPhone
    感谢楼主的整理。如果博客样式能照顾一下小屏就更好了。

    http://ww1.sinaimg.cn/large/a04a339djw1ezvyn5ob4fj20k00zk0xk
    bdbai
        23
    bdbai  
       2016-01-11 23:17:50 +08:00 via iPhone
    klmd99
        24
    klmd99  
       2016-01-11 23:20:48 +08:00
    然而并没有证据表明这会增加‘初级程序员犯错的可能’,不用也不会减少犯错的可能
    如果事实证明这个特性鸡肋,那么下个 ES7 或者以后的版本应该会淘汰。
    毕竟实践出真知。
    bdbai
        25
    bdbai  
       2016-01-11 23:22:48 +08:00 via iPhone
    bdbai
        26
    bdbai  
       2016-01-11 23:23:53 +08:00 via iPhone
    对不起...老是写错链接
    http://t.cn/R4NkaqN
    SimplyY
        27
    SimplyY  
    OP
       2016-01-11 23:26:28 +08:00 via Android
    @bdbai 你屏幕分辨率多少来着,,,我寒假准备重写,
    bdbai
        28
    bdbai  
       2016-01-12 00:26:47 +08:00 via iPhone
    @SimplyY 1280x720 不知道是不是高 DPI 的坑。
    lizhuoli
        29
    lizhuoli  
       2016-01-12 03:32:08 +08:00 via iPhone
    @canesten 你写一下 Haskell 就知道没模式匹配的语言有多恶心
    Nixus
        30
    Nixus  
       2016-01-12 06:24:42 +08:00
    阮一峰老师: http://es6.ruanyifeng.com/
    廖雪峰老师: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
    请问这两位大神的课程,应该选哪个?
    loading
        31
    loading  
       2016-01-12 07:02:29 +08:00 via Android
    es5 还没学会呢~
    SimplyY
        32
    SimplyY  
    OP
       2016-01-12 07:15:31 +08:00
    @Nixus 俩不一样好吧,,一个 es6 ,一个 es5 吧
    SimplyY
        33
    SimplyY  
    OP
       2016-01-12 08:11:54 +08:00 via Android
    @bdbai 我 mac , chrome 开发的, chrome 会把我俩电脑分辨率宽度应该和你都当做 1280 来着我觉得,,,你截图让我看看,你那长什么样,
    SimplyY
        34
    SimplyY  
    OP
       2016-01-12 08:12:37 +08:00 via Android
    @bdbai 你之前的图挂了,,
    SimplyY
        35
    SimplyY  
    OP
       2016-01-12 08:14:53 +08:00 via Android   ❤️ 1
    @bdbai 我知道原因了,你应该用电脑看。我没对手机适配来着,,而且手机的分辨率是宽,浏览器会当做 400 到 500 之间,所以,,,,总之我寒假重写,肯定会去适配手机的
    66beta
        36
    66beta  
       2016-01-12 08:52:11 +08:00
    楼主也用 cmder
    SimplyY
        37
    SimplyY  
    OP
       2016-01-12 09:12:27 +08:00 via Android
    @66beta 那是啥,,命令行嘛
    Nixus
        38
    Nixus  
       2016-01-12 09:37:01 +08:00
    @SimplyY 请问可以跳过 5 直接学 6 吗?
    SimplyY
        39
    SimplyY  
    OP
       2016-01-12 09:39:15 +08:00 via Android
    @Nixus 不能, es6 教程内容不包括 5 ,而是默认你会 5
    geek123
        40
    geek123  
       2016-01-12 09:47:45 +08:00
    @SimplyY 我也写过一个 es6 入门,用空帮忙瞅瞅?
    http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/
    SimplyY
        41
    SimplyY  
    OP
       2016-01-12 14:49:15 +08:00
    @geek123 要登录啊,,没有开源精神,,有点麻烦。。我这个是简版的,适合用户是擅长 js 的学习者,想在 5 小时内,学好 es6 的人
    horizon
        42
    horizon  
       2016-01-12 14:49:58 +08:00
    @canesten 很赞的语法啊。。。
    66beta
        43
    66beta  
       2016-01-12 17:02:49 +08:00
    @SimplyY 我去难道不是。。。
    kisnows
        44
    kisnows  
       2016-01-12 20:09:01 +08:00
    解构赋值和箭头函数如果被**滥用**,那么代码可读性将大大下降,不敢想象。
    SimplyY
        45
    SimplyY  
    OP
       2016-01-13 00:02:19 +08:00 via Android
    @kisnows 我觉得还是好处大于坏处的。
    geek123
        46
    geek123  
       2016-01-14 08:45:24 +08:00
    @SimplyY 第三方登录都麻烦吗,还有什么其他选择?⊙﹏⊙b 汗
    wangws
        47
    wangws  
       2016-12-12 17:00:44 +08:00
    刚开始看,写的挺好
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 11:43 · PVG 19:43 · LAX 03:43 · JFK 06:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.