ES6简介.

Slides:



Advertisements
Similar presentations
教师成绩录入步骤 1. 登录教务系统 2. 进入教师成绩管理界面 3. 选择相应的教学班,点击 “ 课程成绩录 入 ” 进入成绩录入界面 4. 点击 “ 设置 ” 按钮设置 “ 成绩分项 ” 5. 录入成绩, “ 保存成绩 ” 按钮可以保存成 绩但不提交(提交后不能再修改成绩) 6. “ 提交成绩 ”
Advertisements

7.2 图示化记忆 记忆的概述 图示化记忆 联想记忆法 奇特联想记忆法 用手记忆.
我的未来不是梦 攀枝花市经贸旅游学校. 1. 文中案例王萍苦恼的原因是 什么? 2. 你有哪些办法可以帮助王萍? 导入 思考  谁来帮帮她?
生涯不卡關 ~生涯卡之簡介與實務應用 吳慧美.
性教育教學模組設計 主題:身體自主權 台中市忠明國小 巫偉鈴.
整体销售方案 中山市美好物业代理有限公司
研商「99年宜蘭縣相關單位同步滅鼠工作」執行事宜
“三生教育”专题 生命·生存·生活.
臺中市頭家國小 生理衛生講座 青春期的奧秘 ‧說到青春期,你會想到? ‧班級表現最好的,有獎徵答有優先權。 葉孟娟老師、黃文玲老師.
朝陽國小學校課程發表簡報 活力四年級 導師:蔡于晨.
鹰目万屏活动—— 华东经济区城市汽车站LED11屏联播套餐 鹰目户外网.
第12讲 Javascript 复习 信息学院 孙辉.
第一組成員 蕭毓文(1號) :內壢高中 范美珍(4號) :平鎮高中 林宏茂(6號) :中壢高中 林桂鳳(18號) :竹北高中
寻觅节日诗情.
面向对象的程序设计(一).
项目进度管理.
台灣廢物物處理機構 邱騰煥 8 號.
1. 民主社會裡,公民的參與有其重要性,而透過政治參與無法達成下列哪一項目的?
经典阅读:圣经导读 第十三章 以色列覆亡.
102學年度預算編製說明會 主辦單位:會計室 102/02/22.
第一部 认识篇 知己知彼 百战不殆.
第一讲 JavaScript编程基础 信息学院 周宝刚.
第3章 JavaScript语言基础.
设计模式可以帮助我们改善系统的设计,增强 系统的健壮性、可扩展性,为以后铺平道路。
我国经济发展的 新环境和新战略.
手外伤与断指再植 上海第二医科大学 附属第九人民医院骨科.
网络协会2017培训 Node.js专题 (1) 2017/3/12 – Payne.
Design Pattern (2) 设计模式(2) Institute of Computer Software 2018/9/21
第9课 北美大陆上的新体制 导入新课 新课教学 课堂小结 知识结构 巩固练习
Ch08 巢狀類別 物件導向程式設計(II).
2.1 基本資料型別 2.2 變數 2.3 運算式與運算子 2.4 輸出與輸入資料 2.5 資料型別轉換 2.6 實例
网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne.
第5章 面向对象程序设计 本章要点 5.1 面向对象程序设计概述 5.2 Java语言的面向对象程序设计 5.3 方法的使用和对象数组
CHAPTER 9 建構方法 ROBERT.
Ch13 集合與泛型 物件導向程式設計(2).
·线性表的定义及ADT ·线性表的顺序存储结构 ·线性表的链接存储结构 · 单向循环链表 · 双链表、双向循环链表 · 一元多项式的加法
本單元介紹何謂變數,及說明變數的宣告方式。
類別樣板 Class Template 類似函式樣板 由類別樣板產生的類別稱為類別樣版的實體(instance)
王豐緒 銘傳大學資訊工程學系 問題:JAVA 物件檔輸出入.
第十章 C高级程序应用—链表* 10.1链表的基本概念 10.2单向链表 10.3双向链表 10.4应用举例.
C#面向对象程序设计 $7 继承和多态性.
DWR WEB开发交流 1、自我介绍 2、DWR概述 3、DWR DEMO介绍 4、DWR实现机制 5、DWR配置说明 6、JS开发注意事项.
复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne
五、链 表 1、单链表 2、双向链表 3、链表应用.
2019/1/16 Java语言程序设计-类与对象 教师:段鹏飞.
Lecture: Alex Wang QQ: QQ Group:
集合框架和泛型(一).
Java程序设计 第2章 基本数据类型及操作.
Introduction to lisp lisp.
JavaScript Sunxiaoshen.
北投溫泉博物館 建築特色 ★小組成員:高103林孟璇、林念儀、施妤柔★.
第二章 Java基本语法 讲师:复凡.
Action Script 使用介紹 第六組 張瀚之.
第二章 Java语法基础.
第三章 世界文明的蛻變與互動 第一節 歐洲社會的蛻變 第二節 世界文明的交匯 第三節 亞洲大帝國的發展 1.
第 9 章 建構函式與解構函式.
第2章 JavaScript语言基础 2.1 数据类型、常量及变量.
授课老师:龚涛 信息科学与技术学院 2016年3月 教材:《Visual C++程序员成长攻略》 《C++ Builder程序员成长攻略》
辅导课程十一.
第二章 Java基本语法 讲师:复凡.
群聚分析操作介紹 -以SOM和K-means為例
所得稅法第14條、第126條修正條文 薪資所得計算方式二擇一 定額減除 特定費用減除 維持現行薪資所得特別扣除額20萬元減除方式
厉害了,我的国! 15会计2班团支部 2018年4月20日.
第2章 Java语言基础.
台北海洋技術學院 航運企業管理系 二管四甲 陳奕伶
第四章 利率的結構與資訊內涵 授課老師:_____.
第二章 Java基础语法 北京传智播客教育
第 20 章 ActionScript 指令與語法.
第6章 继承和多态 伍孝金
學生宿舍網路連線設定說明 問題檢測DIY 106/08/28 學校宿舍網路設定說明.
Presentation transcript:

ES6简介

主要内容 Javascript、ES5、ES6的关系 let和const关键字 解构赋值 模板字符串 函数的扩展 对象和类的扩展 新增数据结构Set,Map,WeakMap 遍历器Iterator和for…of循环 Generator函数 Promise对象和async函数 模块化Module ES6的部署和转换实现

Javascript、ES5、ES6的关系

let和const关键字

let和const关键字——let *let跟var类似,但let关键字使变量只在块级作用域内有。 *函数本身的作用域在其所在的块级作用域内。

let和const关键字——const 定义常量 重新赋值不会报错,只会默默失败。 作用域跟let相同。

解构赋值 数组的解构赋值 对象的解构赋值 解构赋值的用途

解构赋值——数组的解构赋值 *定义变量形式的改变。 解构赋值就是模式匹配。 *一些嵌套数组的例子。 *解构不成功时,值为undefinded 对undefined、null解构会报错,因为undefined和null不能转换成对象。 *解构允许指定默认值。

解构赋值——对象的解构赋值 *定义变量形式的改变。 也能嵌套。 *也能默认。 *对声明的变量赋值要非常小心。

解构赋值——实际应用 *函数可返回多个值。 *函数参数定义及默认参数。

模板字符串 使用`(左撇号)声明。 可当做普通字符串使用。 也可来定义多长字符串。 在字符串中可嵌入变量。

函数的扩展 函数参数的默认值 rest参数 扩展运算符 箭头函数

函数的扩展——函数参数的默认值

函数的扩展——rest参数 rest参数用于数组的解构赋值和函数的参数中,指代一个数组,多余的值都将存放于这个数组中。 注意点: *在解构赋值中的应用 *在函数参数中的应用 注意点: 它是一个数组 rest参数之后不能再有其他参数,否则会报错。

函数的扩展——扩展操作符 rest操作符的反运算符,将一个数组转换为用逗号分隔的参数序列。

函数的扩展——箭头函数 *使用箭头(=>)来定义函数。 如果不需要参数或多个参数,使用圆括号()代表参数部分。 如果代码部分多余一条,使用大括号括起来,并用return语句返回。 *若返回的值为一个对象该怎么办? 注意点: 函数体内的this对象,绑定的是定义时所在的对象,而非运行时所在的对象。 因为this被强制绑定为定义时所在的对象,因此无法使用call(), apply(), bind()来改变this的指向。 不可作为构造函数,跟new一起会报错。 函数体内没有arguments对象。

对象的扩展 增强对象的写法。 Symbol数据类型。 Proxy方法。 新增class关键字。

对象的扩展——增强对象的写法 *允许直接写入变量和方法,作为对象的属性和方法。 *常用于函数的返回值,非常方便。 *属性名表达式写法。

对象的扩展——Symbol *新的原始数据类型。 *最大的特点,每个Symbol都不相等。 *适用于作为标识符,用于对象属性,保证属性名之间不会发生冲突。 通过symbol函数生成,结构一个字符串作为指定生成symbol的名称,该名称可通过name属性获取。 Typeof的结果表明,symbol是一种新的原始类型。 Symbol初始化不使用new命令。 防止属性被覆写。

对象的扩展——Proxy 对象的属性代理 使用proxy作为构造函数,接受两参数,一为目标对象,二为代理的属性get/set方法。

对象的扩展——class关键字 *传统使用构造函数来定义生成新的对象。 *ES6引入class关键字,可定义类。 *类的继承——extends关键字。 跟传统的面向对象语言差异很大,不容易理解,容易对新学习这门语言的程序造成困惑。 并无新的功能,只不过语法更清晰,它是一个语法糖。 Constructor即为构造方法,类在实例化的时候会自动调用此方法。 this代表实例化的对象。 属性、方法的声明不需要使用逗号分隔。 Class之间通过extends关键字实现继承。 super指向父类。 必须在constructor方法中调用一次super()方法,否则会报错。

新增数据结构 Set Map WeakMap

新增数据结构——Set *新增数组结构Set,它类似于数组,但成员都是唯一的,不重复的。 *Set的属性和方法。 Set.prototype.constructor Set.prototype.size add() delete() has() clear()

新增数据结构——Map *新增数组结构Map Map的属性和方法。 Map.prototype.constructor Map.prototype.size add() delete() has() clear() 对象本身是键值对集合的,但只能用字符串作为键名。 Map结构允许非字符串也能作为键值。

新增数据结构——WeakMap 与Map类似,但只接受对象作为键名。(null除外)

遍历器和for…of循环

遍历器和for…of循环——Iterator Iterator(遍历器)是一种协议,对象只要部署了这个协议,就可以完成遍历操作,es6中,遍历操作特指for…of循环。 协议规定,部署了next方法的对象,就具备了遍历器的功能。 next方法须返回一个包含value和done两个属性的对象。value是当前遍历位置的值,done属性表示遍历是否结束,是一个布尔值。

遍历器和for…of循环——for…of循环 一个对象部署了next方法,就被视为具备了Iterator接口,就可用for…of循环遍历其值。 在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

ES6中很多数据结构都支持遍历:数组、set、map、对象,那么函数呢?

Generator函数 Generator函数具有遍历器的特征,即具有next()方法,返回具有value和done属性的对象。 *next方法参数:yield语句本身返回undefined,next方法可带一个参数,作为上一条yeild语句返回的值。 如果yield语句返回的是一个遍历器,则yeild关键字后面要加一个星号(*)。 *在for…of中的应用。 具有两个特点: function关键字后跟一个星号(*) 函数体内通过yeild关键字定义遍历的值。 每次调用比那里器next()方法时,就从函数头部或上一次停下来的地方开始执行,直到下一条yeild语句位置。 当遍历结束时返回undefined yeild语句跟return有点像,都是返回紧跟后面表达式的值。区别在于,yield使函数暂停执行,下次再从改位置继续执行,而return不具备这些能力。

js中要如何才能使异步操作变成同步操作?

Promise对象和async函数

Promise对象和async函数——Promise Promise是一个构造函数,生成promise实例,该实例具备上述规范。 Promise构造函数接受一个函数作为参数,该函数有resolve方法和reject方法两个参数,这两个方法都是js内核生成的。 如果异步操作成功,则运行resolve函数,promise对象状态由pending变为resolved。 如果异步操作失败,则运行reject函数,promise对象由pending变为rejected。 Promise对象生成后,可以使用then方法分别指定resolve方法和reject回调。 Promise规范了异步操作的状态和方法。 状态:pending(进行中),resolved(已完成),rejected(已失败)。 方法:resolve(成功),reject(失败) *如何实现这个接口。 *链式操作。如果then返回的是一个新的promise对象,可采用链式写法。 *cathch方法捕获错误。 promise的错误具有“冒泡”性质,错误会一致传下去,知道捕获为止。 若最终都没有捕获错误,则在实例结束抛出错误。实例化过程中遇到的错误则不进行抛出。

Promise对象和async函数——Promise *Promise.all()方法 将多个异步包装成一个新的Promise对象 当这些对象都操作成功后,状态才变成resolved,只要其中一个失败,状态就变成rejected。 Promise.race()方法 只要其中一个完成就完成。 *Promise.resolve() 将对象转换成Promise对象。 如果对象不具备then方法,则返回一个新的Promise对象,其状态为resolved。 Promise.reject() 返回一个新的promise对象,该实例状态为rejected。

Promise对象和async函数——async函数 有了统一的接口,那么就能使原本异步的操作变成同步操作。 async关键字表明函数内部有异步操作。 该异步操作应为promise对象,并用await关键字注明。

模块化Module

模块化Module 用户在import模块的时候,必须精确的知道模块中属性和方法的名称,使用default关键字,用户无需查询手册,可给属性、方法任意指定名称。 类的解构赋值。 如果想为输入的属性方法更改一个名字,可使用as关键字。 ES6实现了模块功能,试图解决js在代码依赖和部署上的问题,取代现有的AMD和CommonJs规范,成为浏览器和服务器端通过的模块化解决方案。 模块功能有两个关键词:export和import。 export用于定义模块的对外接口。 Import用于引入其他模块的功能。 ES6规定一个独立的js文件即为一个模块。 各个模块间作用域屏蔽。 允许一个文件调用另一个文件。 *一个简单的模块就是一个js文件,里面用export输出接口。 *使用export定义模块后,其他js文件可使用import关键字加载文件。 *通过export default指定默认方法。 *模块的继承。 另一种写法:

ES6的部署和转换实现