简版 es6 教程

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3225 天前的主题，其中的信息可能已经有所发展或是发生改变。

花了 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

ES6

简版

教程

阮一峰

47 条回复 • 2016-12-12 17:00:44 +08:00

thinkif

2016-01-11 21:54:52 +08:00

这个主意不错，支持楼主

SimplyY

2016-01-11 22:08:10 +08:00

@thinkif 阮一峰里面，“下面的例子，另一个例子”，还有很多可以举一反三的也很详细的写上去了，总之太多了，看的太累了。

他的非常适合新手看，但是现在学 es6 的新手应该不多吧。。。

SimplyY

2016-01-11 22:10:50 +08:00

咦，，我写的博客在服务器里出问题了。。我去瞧瞧。。

SimplyY

2016-01-11 22:13:30 +08:00

重启服务器就好了= =，不知名 bug ，寒假重写势在必行。。

banricho

2016-01-11 22:17:30 +08:00

我已经看了 10 天了……心好累 - -

canesten

2016-01-11 22:20:06 +08:00 via Android

解构赋值这么反人类的阅读体验不知道是哪个白痴设计的

SimplyY

2016-01-11 22:20:15 +08:00

@banricho 23333 ，我写完心更累，每天 3 小时以上。。。

SimplyY

2016-01-11 22:20:48 +08:00

@canesten 我觉得还好啊，

klmd99

2016-01-11 22:21:04 +08:00

我也在看，新手，很好的教程！不过需要耐心。

klmd99

2016-01-11 22:21:46 +08:00

@canesten 很理想的功能

br00k

2016-01-11 22:33:48 +08:00

欢迎加入 typescript ，😄😄

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

2016-01-11 22:36:50 +08:00

@canesten 语法糖。。。何必写的复杂，，就好比列表推导，复杂起来， debug 也很蛋疼。

但是我觉得吧，语法糖放在一杯子水里面它是甜的，放到水瓶里，它就没味道，反而累赘

canesten

2016-01-11 22:41:35 +08:00 via Android

@SimplyY
这种影响阅读的根本就不算糖
ES6 就算没有这样的糖也完全不受影响
加了如果被滥用反而增加维护难度

yyfearth

2016-01-11 22:47:24 +08:00

@canesten 这个是没办法的事情任何好东西如果在极端情况下都是行不通的
这些很多情况下是为了简化函数传递参数时候大量的代码
一行解决一个赋值虽然清楚但是如果这个 object 非常复杂的话你会发现一个函数可能超过一半的代码是在一个个赋值我就遇到过无数次了

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

@SimplyY 我觉得这些语法糖应该是要有的毕竟可以提高写代码的效率
我可不希望写代码的时候大部分都是无关逻辑的废话（比如很多赋值和转换）
当然任何时候如果过于使用这些都会造成这些困难本来 JS 就已经是这样了
这个是看人而不是看工具

SimplyY

2016-01-11 22:51:30 +08:00

@yyfearth 非常赞同，“任何好东西如果在极端情况下都是行不通的 ” “语法糖可以提高写代码的效率 ”

canesten

2016-01-11 23:00:44 +08:00 via Android

@yyfearth
认同，所以我认为官方提供一个按模式解 JSON 的功能足矣，把其他找抽的途径关闭。
再不济大家在博客和论坛传播的时候也应该多指出找抽的点，并提倡规避他。

gouflv

2016-01-11 23:01:47 +08:00

太好了要的就是简明易查

canesten

2016-01-11 23:03:51 +08:00 via Android

@yyfearth
另外那个 as 语义的冒号真是非常低劣，之前冒号都是赋值的语义，从左往右读，在这里生生的变歧义了，从右往左读。

klmd99

2016-01-11 23:07:32 +08:00

多一种方法，在某些情况下适用，而不是适合所有情况。
怎么写还是需要发挥主观能动性。

canesten

2016-01-11 23:11:05 +08:00 via Android

@klmd99
这主观能动性失控以后 js 要走上 perl 的老路
作为一个工程化的语言
如何尽可能的减少初级程序员犯错的可能才是最重要的

bdbai

2016-01-11 23:17:03 +08:00 via iPhone

感谢楼主的整理。如果博客样式能照顾一下小屏就更好了。

http://ww1.sinaimg.cn/large/a04a339djw1ezvyn5ob4fj20k00zk0xk

bdbai

2016-01-11 23:17:50 +08:00 via iPhone

http://ww1.sinaimg.cn/large/a04a339djw1ezvyn5ob4fj20k00zk0xk

klmd99

2016-01-11 23:20:48 +08:00

然而并没有证据表明这会增加‘初级程序员犯错的可能’，不用也不会减少犯错的可能
如果事实证明这个特性鸡肋，那么下个 ES7 或者以后的版本应该会淘汰。
毕竟实践出真知。

bdbai

2016-01-11 23:22:48 +08:00 via iPhone

@bdbai t.cn/R4NkaqN

bdbai

2016-01-11 23:23:53 +08:00 via iPhone

对不起...老是写错链接
http://t.cn/R4NkaqN

SimplyY

2016-01-11 23:26:28 +08:00 via Android

@bdbai 你屏幕分辨率多少来着，，，我寒假准备重写，

bdbai

2016-01-12 00:26:47 +08:00 via iPhone

@SimplyY 1280x720 不知道是不是高 DPI 的坑。

lizhuoli

2016-01-12 03:32:08 +08:00 via iPhone

@canesten 你写一下 Haskell 就知道没模式匹配的语言有多恶心

Nixus

2016-01-12 06:24:42 +08:00

阮一峰老师： http://es6.ruanyifeng.com/
廖雪峰老师： http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
请问这两位大神的课程，应该选哪个？

loading

2016-01-12 07:02:29 +08:00 via Android

es5 还没学会呢~

SimplyY

2016-01-12 07:15:31 +08:00

@Nixus 俩不一样好吧，，一个 es6 ，一个 es5 吧

SimplyY

2016-01-12 08:11:54 +08:00 via Android

@bdbai 我 mac ， chrome 开发的， chrome 会把我俩电脑分辨率宽度应该和你都当做 1280 来着我觉得，，，你截图让我看看，你那长什么样，

SimplyY

2016-01-12 08:12:37 +08:00 via Android

@bdbai 你之前的图挂了，，

SimplyY

2016-01-12 08:14:53 +08:00 via Android

@bdbai 我知道原因了，你应该用电脑看。我没对手机适配来着，，而且手机的分辨率是宽，浏览器会当做 400 到 500 之间，所以，，，，总之我寒假重写，肯定会去适配手机的

66beta

2016-01-12 08:52:11 +08:00

楼主也用 cmder

SimplyY

2016-01-12 09:12:27 +08:00 via Android

@66beta 那是啥，，命令行嘛

Nixus

2016-01-12 09:37:01 +08:00

@SimplyY 请问可以跳过 5 直接学 6 吗？

SimplyY

2016-01-12 09:39:15 +08:00 via Android

@Nixus 不能， es6 教程内容不包括 5 ，而是默认你会 5

geek123

2016-01-12 09:47:45 +08:00

@SimplyY 我也写过一个 es6 入门，用空帮忙瞅瞅？
http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/

SimplyY

2016-01-12 14:49:15 +08:00

@geek123 要登录啊，，没有开源精神，，有点麻烦。。我这个是简版的，适合用户是擅长 js 的学习者，想在 5 小时内，学好 es6 的人

horizon

2016-01-12 14:49:58 +08:00

@canesten 很赞的语法啊。。。

66beta

2016-01-12 17:02:49 +08:00

@SimplyY 我去难道不是。。。

kisnows

2016-01-12 20:09:01 +08:00

解构赋值和箭头函数如果被**滥用**，那么代码可读性将大大下降，不敢想象。

SimplyY

2016-01-13 00:02:19 +08:00 via Android

@kisnows 我觉得还是好处大于坏处的。

geek123

2016-01-14 08:45:24 +08:00

@SimplyY 第三方登录都麻烦吗，还有什么其他选择？⊙﹏⊙b 汗

wangws

2016-12-12 17:00:44 +08:00

刚开始看，写的挺好