angular2编程-ES6

最新推荐文章于 2022-07-20 17:51:17 发布

jiayq_jiars_changcy

最新推荐文章于 2022-07-20 17:51:17 发布

阅读量1.1k

点赞数

分类专栏： js angular 文章标签： angular

本文链接：https://blog.csdn.net/changcongying/article/details/53924811

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

angular

4 篇文章 0 订阅

订阅专栏

ES6知识汇总

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

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

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

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

let和const

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

const定义一个常量，声明后必须初始化。
变量的解析赋值

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

用途:

1.交换变量的值；

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

3.函数参数的定义

4.提取JSON数据(常用)

5.函数参数的默认值

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

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

对象的扩展

属性的简洁写法:

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方法可以为对象添加属性(包括变量和函数)

Promise对象

掌握Promise的含义和几个关键函数:then,resolve,reject的用法
Class ,constructor ,extends,set,get这些概念对于做java或者C#的开发人员来说都是比较容易理解的，在此不再详细记录。
模块(Module),ES6中的模块化比较简单，导出使用export关键字，导入使用import关键字。较早提出模块化解决方案的是在node平台上(CMD规范),使用require和exports导入和导出，后来在浏览器平台上又提出了AMD规范，仍然使用require和exports导入和导出，ES6提出模块化解决方案后，统一了JS的模块化方案，当前node平台暂时不支持ES6的模块化方案，但是在将来的版本中随着V8引擎的升级肯定会支持的。
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"