ES6+ 现在就用系列(一):为什么使用ES6+
2016-01-20 18:25
399 查看
系列目录
ES6+ 现在就用系列(一):为什么使用ES6+ES6+ 现在就用系列(二):let 命令
ES6+ 现在就用系列(三):const 命令
ES6+ 现在就用系列(四):箭头函数 =>
ES6+ 现在就用系列(五):模板字面量 (Template Literals)
ES6+ 现在就用系列(六):解构赋值 (Destructuring )
ES6+ 现在就用系列(七):Promise
ES6+ 现在就用系列(八):类 (Class),继承,对象的扩展
ES6+ 现在就用系列(九):模块
ES6+ 现在就用系列(十):Async 异步编程
ES6+ 现在就用系列(十一):ES7 Async in Browser Today
ES6+
现在主流的浏览器都是支持到ES5, 为了表述方便,我在此发明一个名词"ES6+" 就是ES5以后的版本,包括ES6, ES7. 为什么说现在就用,虽然主流的浏览器只支持到ES5, 但是现在有很多的转换器,可以把一些ES6和ES7的代码转换为ES5的代码。这就意味着我们现在就可以使用这些新特性,然后使用转码器让代码可以运行在主流的浏览器上。为什么立即开始使用ES6, ES7的新特性?
JavaScript语言的一些糟糕的实现
先不说JavaScript语言本身设计是否有问题,现有JavaScript语言的实现里有很多非常糟糕或者诡异的实现,就是你以为代码的结果是这样,但是他偏偏是那样,这给我们程序带了很多的意向不到的Bug和烦恼,如果你要是JavaScript大牛,你需要了解他内部的实现的Bug, 而且要知道哪些诡异的写法输出了什么诡异的结果,我个人对了解这种东西实在提不起太大的兴趣,因为我只想用“语言”来实现我的项目让人很好的使用我开发的软件,但是由于历史这样或那样的原因,导致JavaScript语言成为浏览器的霸主,我们不得不忍受这些糟糕的问题。下面我来展示一些让你觉得诡异的问题 (如果你不不觉得诡异,恭喜你,你已经是JavaScript的“高手”)示例1:
(function() { return NaN === NaN; })(); 输出: false
示例2:
(function() { return (0.1 + 0.2 === 0.3); })(); 输出: false
示例3:
[5, 12, 9, 2, 18, 1, 25].sort(); 输出: [1, 12, 18, 2, 25, 5, 9]
示例4:
var a = "1" var b = 2 var c = a + b 输出:c = "12" var a = "1" var b = 2 var c = +a + b 输出:c = 3
示例5:
(function() { return ['10','10','10','10'].map(parseInt); })(); 输出: [10, NaN, 2, 3]
示例6:
(function() { return 9999999999999999; })(); 输出: 10000000000000000
示例7:
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[1](); a[2](); a[3](); 输出: 10,10,10
我是觉得如果按正常人的理解,代码不能得到想要的结果,那就算是语言本身的问题。如果一个程序执行的和人期望的不一样,或者还需要一些Hack的方法,那么是很糟糕的。
ES5 一些语言特性的缺失
由于上面的很多问题,所以ES 需要不断的改进, 当然新的版本肯定不可能一下子解决之前所有的问题。已有JavaScript的问题这一块就不细说了,因为能来看这篇文章的人,应该对下面我列的几个突出的问题都有感受。
没有块级作用域,这个导致上面示例7的问题
全局变量的污染
类的写法比较怪异
没有模块管理
异步调用写法容易产生 “回调地狱”
为什么可以立即使用?
因为现在很多转换器已经可以把ES6所有的特性以及ES7的部分特性转换为ES5,Babel就是一个非常好的转换器,所以我这里建议凡是能被Babel转换的新特性都可以立即在项目里适用。ES6和ES7的一些新特性,可以大大提高项目的健壮性,同时让代码更易读,同时也可以避免很多ES5之前的很多诡异的东西。Gulp里可以很好的使用babel, 如果你对Gulp不熟悉,可以参考我博客里的Gulp系列。
这里简单说一Gulp和babel如何结合使用
$ npm install -g gulp-babel var gulp=require('gulp'), babel=require('gulp-babel'); gulp.task('build',function(){ return gulp.src('src/app.js') .pipe(babel()) .pipe(gulp.dest('build')) })
后面的系列,我将以此介绍ES6, ES7的一些可以现在就用的主要特性。
相关文章推荐
- Tomcat7.0.54 进行日志分割
- 【IT人生】个人大学的坎坷路
- 2015-2016总结与展望
- SVG操作
- http error 错误码大全
- SVN使用方法
- Java String.isEmpty()
- 织梦网站频道管理员不能添加栏目
- iOS 微信客服
- SpringMVC token 防止表单重复提交
- 微信 新浪
- 【转】性能调优攻略
- android 自定义提示框效果(2)
- dede织梦管理后台密码忘记了怎么办
- dede后台title怎么修改的?去掉XXXX-织梦内容管理系统V5.7
- DEDE怎么取消后台验证码
- Android系统进程间通信(IPC)机制Binder中的Server启动过程源代码分析
- 推荐书
- 自己动手做按钮
- MySQL更新的几个异常记录