ECMA 对于前端开发工作的我并不陌生,《JavaScript高级程序设计》中对ECMA5的特性有很多的介绍,让我正确认识了什么是JavaScript,明白JavaScript由ECMA,DOM,BOM三个部分组成。
ES5我都还没有完全掌握,ES6又来了(T_T),工作中写原生的js的情况很少,基本都使用js库比如jQuery,我记得网上很多人反对使用jQuery这样的库,觉得这样让jser们已经忘了js原生实现,如果脱离js库就变成“残疾jser”,很多功能浏览器兼容等问题无法解决......不过我还是觉得用js库方便很多,用jQuery操作DOM,用backbone开发单面应用,这会让工作变得简单,当然有空时也会去研究这些库的实现细节。
ES5中让我觉得很爽的就是JSON的支持,数组方法indexOf(),map(),filter()等。这让编写代码变得简单。
看了本书样章,ES6新增特性还真不少,class关键字、块作用域、新的数据结构等,让我突然觉得ES6会改变jser们对js理解了,特别是块作用域的引入,ES5中是没有块作用域,所以才出现立即执行函数,这些新的特性加入让js变得更加简洁,记得刚学js的时候理解立即执行函数、闭包想起就是痛呀。
看着书让我忍不住动手去试试ES6新的特性。
<html> <head> <meta charset="UTF-8"> <title>es6</title> </head> <body> <h1 id="message"></h1> <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script> <script> traceur.options.experimental = true; </script> <script type="module"> class Greeter { constructor(message) { this.message = message; } greet() { let element = document.querySelector('#message'); element.innerHTML = this.message; } }; let greeter = new Greeter('Hello, world!'); greeter.greet(); </script> </body> </html>
在github上有在线转换Try https://google.github.io/traceur-compiler/demo/repl.html 可以亲手体验ES6新特性。
nodejs现在还真是无处不在,记得前几天雅虎停止开发YUI,在不同程度上受到nodejs,backbone等的冲击,不得不调整方针重新开发全新的前端库。
let 命令是新的关键字,变量在块级作用域内有效。
这个块级使用域完全不用考虑什么是闭包了,
以前的方式:
var a=[]; for(var i=0;i<5;i++){ a[i] = function(){ return i; } } console.log(a[0]()); //输出5 console.log(a[1]()); //输出5 console.log(a[2]()); //输出5
要想得到预想的结果须要下面这样做,用一个立即执行函数,让j有自己的作用域来保存i。
var a=[]; for (var i = 0; i <5; i++) { a[i] = ( function (j){ return function(){ return j; }; })(i) }; console.log(a[0]()); //输出0 console.log(a[1]()); //输出1 console.log(a[2]()); //输出2 console.log(a[3]()); //输出3
现在ES6中变得简单
var a=[]; for(var i=0;i<5;i++){ let c=i; a[i] = function(){ return c; } } console.log(a[0]()) //输出0 console.log(a[1]()) //输出1 console.log(a[2]()) //输出2
const声明常量,在java 都会有声明常量的关键字,常量很容易理解。
“变量的解构赋值”会让人心动的,像下面这样声明一组变量是很轻松的事情。
var [a,b,c] = [1,2,3] console.log(a);
“对象的解构赋值”看看下面代码,一组变量。
var {aa,bb} = {aa:{cc:33},bb:'22'}; console.log(aa.cc);
这些特性让编程变得更轻松
- 交换变量的值
- 从函数返回多个值
- 函数参数的定义
- ......
ES6这些新特性值得期待,希望各浏览器尽快支持ES6,让我们踏上ES6的“快车”。
学无止境,加油!
相关推荐
ECMAScript 6 入门(第三版)
这个pdf文件完整的整理了 ECMAScript 6 入门-阮一峰这一书,并进行了格式优化,适合查看和打印。
ECMAScript 6入门手册,ECMAScript 6入门手册,ECMAScript 6入门手册
ECMAScript 6 入门 文字 高清 清晰版 阮一峰 ES6 入门
ECMAScript 6入门 第二版 全内容, 适用于任何阶段学习者
一本开源的JavaScript语言教程ECMAScript 6入门,本版本为第三版,格式为.epub,需要使用专用的阅读器来打开。本教程全面介绍了ECMAScript新加入的语法及特征。带有目录阅读起来更方便,由于阅读级别为中级,所以只...
ecmascript 6 入门.pdf 阮一峰著 在此分享 请不要用于商用 此pdf由于是生成的所以比较小,但是内容很全
ECMAScript 6入门 第二版 阮一峰 完整版
《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。 本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例...
阮一峰老师著作,最新版epub格式电子书,在线地址:http://es6.ruanyifeng.com/,请支持纸质正版
阮一峰ECMAScript6入门.pdf,本书力争覆盖ES6与ES5的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。 本书为中级难度,适合已有一定JavaScript语言基础的读者,用来了解这门语言的最新...
2018最新 高清 ECMAScript 6 入门 ES6 离线文档 官方 阮一峰
ECMAScript6 入门及环境搭建 node nvm 安装过程和图解示例
ES6是下一代JavaScript语言标准的统称,每年6月发布一次修订版,迄今为止已经发布了3个版本,分别是ES2015、ES2016、ES2017。《ES6标准入门(第3版)》根据ES2017标准,详尽介绍了所有新增的语法,对基本概念、设计...
个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除!
《ECMAScript 6入门》是一本开源的JavaScript语言教程,全面介绍ECMAScript 6新引入的语法特性。 本书力争覆盖ES6与ES5的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。 本书为中级...