试读《ECMAScript6入门》

       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);

    这些特性让编程变得更轻松

  1. 交换变量的值
  2. 从函数返回多个值
  3. 函数参数的定义
  4. ......

    ES6这些新特性值得期待,希望各浏览器尽快支持ES6,让我们踏上ES6的“快车”。

    学无止境,加油!

 

你可能感兴趣的:(ECMAScript)