试读《ECMAScript6入门》

gleams

浏览: 122820 次
性别:
来自: 成都

最近访客更多访客>>

ptkr

zll_wu

raoliv

wang19841229

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
我的前端之路

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的“快车”。

学无止境，加油!

1
顶

4
踩

分享到：

阻止事件追加 | Markdown 语法说明

2014-09-20 00:01
浏览 1325
评论(0)
分类:非技术
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论