angular2编程-ES6

ES6知识汇总

最近在用angular2把公司之前的一个微信公众号应用重构下，目前重构工作已经基本告一段落，在此把学习和应用angualr2过程中的一点心得记录下，希望对后来者有所帮助，对自己也算是一个总结备忘。

angualr2相比于angular1概念上比较大的变化有几点：

1. 概念上，移除angular1的controller概念，angular1是以controller为核心的，angular2则以component为核心。其它的概念比如服务，路由，指令，过滤器/管道则相差不大。
2. 语法上以TypeScript为基础，采用模块化开发方式。TypeScript又是在ES6基础之上构建，所以要掌握angular2必须掌握TypeScript和ES6.

下面介绍下在使用angular2的过程中需要使用到的知识点:

1. let和const

   let取代var，let不存在变量提升现象，所以可以放心使用 ，不像使用var的时候需要时刻提防变量的作用域是否影响 其它的代码块。

   const定义一个常量，声明后必须初始化。

2. 变量的解析赋值

   “=”左边的变量和右边的值按照顺序可以依次赋值。右边的值可以是对象(左边的变量对应其属性);右边的值也可以是字符串(左边的变量对应字符串的各个字符);

   用途:

   1.交换变量的值；

   2.从函数返回多个值(常用)

   3.函数参数的定义

   4.提取JSON数据(常用)

   5.函数参数的默认值

3. 函数的扩展:函数的默认值

   function Point(x=1,y=2){
       this.x = x; //this.x = 1
       this.y = y; //this.x = 2
   }
   

4. 对象的扩展

   属性的简洁写法:

   let a = "hello";
   let b = {a};
   b // {a:"hello"}
   //上面的代码等同于
   let b = {a:a}
   

   方法的简洁写法:

   let o = {
       method(){
           //do something
       }
   }
   等同于
   let o = {
       method:function(){
           //do something
       }
   }
   

   Object.assign方法可以为对象添加属性(包括变量和函数)

5. Promise对象

   掌握Promise的含义和几个关键函数:then,resolve,reject的用法

6. Class ,constructor ,extends,set,get这些概念对于做java或者C#的开发人员来说都是比较容易理解的，在此不再详细记录。

7. 模块(Module),ES6中的模块化比较简单，导出使用export关键字，导入使用import关键字。较早提出模块化解决方案的是在node平台上(CMD规范),使用require和exports导入和导出，后来在浏览器平台上又提出了AMD规范，仍然使用require和exports导入和导出，ES6提出模块化解决方案后，统一了JS的模块化方案，当前node平台暂时不支持ES6的模块化方案，但是在将来的版本中随着V8引擎的升级肯定会支持的。

8. es6的模块化。

//使用export导出函数，变量
export var a = 1;
export function f(){
    ...
}
//批量导出多个变量
export {a,b,c};
//变量重命名
export {a as aa,b as bb,c as cc}
//默认导出模块，一个模块只能有默认导出
export default {};//匿名变量
export default function(){}//匿名函数

/***************************************************/

//使用import导入变量
import a as vara from "./a.js";
import {aa,bb,cc} from "./ma.js";//只有批量导出变量情况下可以用此形式批量导入
//变量重命名
import {aa as a,bb as b,cc as c} from "./ma.js";
//整体导入
import {a} from "./a.js"
import {b} from "./a.js";
//可以被以下一条语句代替
import * from "./a.js";
//导入匿名变量，可以任意命名，对应export default xxx
import xx from "xx.js"

参考链接:
http://es6.ruanyifeng.com/?search=declare&x=8&y=11#README

ES6中常用到的知识点就这些，其他的比如Proxy,Generator等不经常用，就不再详细描述了，但是这些常用的知识点一定要深入理解，在编码的时候尽量使用ES6提供的方案的来解决问题，你会发现ES6的实现更简洁和优雅，可以极大的提高编程效率。