复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne

Presentation on theme: "复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne"— Presentation transcript:

1 复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne
网络协会2017培训 复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne

2 JavaScript 是什么 JavaScript ( JS ) 是一种轻量级解释型的，或是JIT编译型 的程序设计语言，有着 函数优先 (First-class Function) 的 编程语言。 虽然它是作为开发web页面的脚本语言而出名的，但是在 很多非浏览器环境中也使用JavaScript，例如 node.js。 JS是一种基于原型、多范式的动态脚本语言，并且支持面 向对象、命令式和声明式（如：函数式编程）编程风格。

3 JavaScript 的标准 ECMAScript（ES） 是 JavaScript 的标准。
截至 2012 年，所有的现代浏览器都完整了支持 ECMAScript 5.1 （所谓的ES5），旧式的浏览器至少支持 ECMAScript 3 标准。 在2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版 该版本正式名称为ECMAScript 2015，但通常被称为 ECMAScript 6 或者ES6。 自此，ECMAScript每年发布一次新标准。

4 JavaScript 文件 JavaScript 文件后缀是 .js。
由 JavaScript 发展过来的还有 CoffeeScript (.coffee)、 TypeScript (.ts) 等等语言。 一般为了区分不同类型的 JS文件，请根据不同的方言设置 不同的文件后缀。

5 练习 JavaScript 的地方 1. 自己浏览器的开发者工具的 Console
2. 一个编辑器编辑代码 -> Node.js 运行 3. 类似 Codepen 的在线编程网站

6 复习JavaScript 1.语法与数据类型 2.控制流与错误处理 3.循环与迭代 4.函数 5.表达式和运算符
更多内容请看MDN的 JavaScript 指南

7 语法 JavaScript 从 Java 中借用其大部分语法，但也受 Awk，Perl 和 Python的影响。 JavaScript是区分大小写的，并使用 Unicode字符集。 语句指令可以采用换行（类似Python）或者尾部加半角分号（类似 C/C++）分隔。 建议随时添加分号来结束你的语句，以避免可能的副作用（尤其是 自动化打包时候必须严格遵循这个规则）。

8 注释 注释的语法与 C ++和许多其他语言中的语法相同。 // 单行注释 /* 这是一个更长的, 多行注释 */
/* 然而, 你不能, /* 嵌套注释 */ 语法错误 */

9 数据类型 六种 原型 数据类型： Boolean. 布尔值，true 和 false.
null. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或其他变量完全不同。 undefined. 变量未定义时的属性。 Number. 表示数字，例如： 42 或者 。 String. 表示字符串，例如："Howdy" Symbol ( 在 ECMAScript 6 中新添加的类型).。一种数据类型，它的实例是唯 一且不可改变的。 以及 Object 对象 (数组 Array 也是 Object 的一部分)

10 数字 Number 可以是整数、可以是浮点数（实际是64位浮点数）。
可以以十进制 (123) 的形式赋值，也可以是十六进制 (0x666)。 所有的数字运算（含位运算）与 C/C++ 基本一致。 更多特殊的操作请查工具书。

11 字符串 String JavaScript 中的字符串可以用 半角双引号（类似 C++的 string） 或者 单引号 “圈住”。 操作类似于 C++/Java 的字符串类型。 更多操作请查工具书。

12 对象 Object JavaScript 里面最经常用，最富有生命力的就是对象。 对象字面值是封闭在花括号对({})中的一个对象的零个或多 个"属性名-值"对的元素列表。 你可以使用数字或字符串字面值作为属性的名字。当属性名 字为数字时，则构成了数组。

13 对象 Object let person = { name: 'John', job: 'Teacher', gender: 'male',
birthYear: 1978, isMarried: false, company: { name: 'South Tester Normal University' } }; console.log(person);

14 数组 Array 使用方式与其它编程语言的数组一样。 但不同于 C/C++，JavaScript的数组不需要指定数组大小。
let a = [1 ,2, 4, 8, 16, 32]; console.log(a[2]); // 输出数组 a 的属性名 2 的成员值-> 4 a[666] = 888; // 设置数组属性名为 666 的成员值为 888 console.log(a[666]); // 输出数组 a 的属性名666的成员值-> 888

15 声明 var let (ES6) const (ES6) 声明一个变量，可选择将其初始化为一个值。（不需要交代数据类型）
声明一个块作用域的局部变量(block scope local variable)，可选择将其初始 化为一个值。 const (ES6) 声明一个只读的常量。

16 声明标识符 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开 头。后续的字符也可以是数字（0-9）。
因为 JavaScript 语言是区分大小写的，这里所指的字母可以是“A” 到“Z”（大写的）和“a”到“z”（小写的）。 建议变量使用小驼峰命名法，常量全部大写。 数值名字前缀为名词，函数前缀为动词，类前缀使用大驼峰命名法。 具体规则参阅。

17 声明标识符 变量名：number, studentName 常量名：MAX_COUNT, DEFAULT_URL
函数名：getStudentName, setScore, isChinese, loadPage, hasJoker 类名：Person, SuperMan, TeacherManager 不要给我用拼音命名！

18 声明变量 var a = 1; 声明局部变量和全局变量 a，初始值为 1。 let b = true;
c = {} 【非常不建议使用】 声明了一个全局变量 c 并会在严格模式下产生一个 ReferenceError。 var haha; 声明局部变量和全局变量 haha，无初始值 (undefined)。

19 声明常量 和C/C++一样，就很舒服。 const MAX_COUNT = 99;

20 获取/设置变量值 let a = 123; // 声明一个块级作用域变量 a，初始值是123
console.log(a); // 输出变量 a 的值到控制台 -> 123 a = 666; // 设置变量a的值为 666 console.log(a); // 输出变量 a 的值到控制台 -> 666 a += 222; // 变量 a 自增 222 console.log(a); // 输出变量 a 的值到控制台 -> 888

21 变量的函数作用域 在 ES6 之前，JavaScript 采用函数作用域。
在所有函数之外声明的变量，叫做全局变量，因为它可被 当前文档中的任何其他代码所访问。 在函数内部声明的变量，叫做局部变量，因为它只能在该 函数内部访问。

22 变量的函数作用域 var a = 123; // 全局变量 a (function () { var a = 666; // 局部变量 a
console.log(a); // 输出局部变量 a -> 666 })(); console.log(a); // 输出全局变量 a -> 123

23 变量的块级作用域 ECMAScript 6 后支持语句块作用域（类似C/C++/Java）。 需要使用 let 声明变量。
let a = 123; { let a = 666; console.log(a); // 输出语句块变量 a -> 666 } console.log(a); // 输出 全局变量 a -> 123

24 变量的声明提升 采用 var 声明变量时会发生声明提升的情况。
你可以引用稍后声明的变量而不会引发异常（唯一的功用， 有效避免因为异常导致JS无法继续执行）。 但是，在 ECMAScript 6 中，let（const）将不会提升变 量到代码块的顶部。所以一定要在声明之后采用这些变量 或常量。

25 语句块（Block Statement） 大多数程序都使用语句块来给语句分组，这样可以使语句的结构清 晰明了。我们使用一对花括号（ {} ）来分组语句块，如下所示： var x = 1; { var x = 2; } alert(x); // 输出的结果为 2

26 流程控制 if...else 语句 与 C/C++用法一致。
switch 语句 与 C/C++用法一致，注意 case 可以 使用字符串并且严格按照类型匹配。 for、do...while、while、break、continue 语句 与 C/C++用法兼容。

27 遍历新玩法 —— for-in 语句 for...in 语句迭代一个指定的变量（指代对象属性名）去遍历这个对 象 (或数组) 的属性，每个属性，javascript 执行指定的语句。一个 for...in 语句示例如下： let a = [1 ,2, 4, 8, 16, 32]; for (let i in a) { console.log(a[i]); // 遍历输出数组每个成员 }

28 遍历新玩法 —— for-of 语句 与 for-in 语句不同的是，for-of 语句直接返回的是对象的属性值， 而非属性名。
【 ECMAScript 6 规范】 let a = [1 ,2, 4, 8, 16, 32]; for (let value of a) { console.log(value); // 遍历输出数组每个成员 }

29 错误抛出 与 C++/Java 基本一致，语法使用 try… catch … finally 语句。
特殊点是：Catch 的形参不需要指定类型，也就是可以 throw 任意值（比Java的舒服多了）。 支持嵌套多层 try…catch 语句。

30 Promise 从 ECMAScript 6 开始，JavaScript 增加了对 Promise 对象的支 持，它允许你对延时和异步操作流进行控制，让异步操作更加优雅。 知识点涉及高级JS编程，因此这次培训不讲这个知识点。

31 函数 函数是搭建JavaScript的基本构件之一。

32 定义函数 一个函数定义（也称为函数声明）由一系列的函数关键字组成, 依 次为： 函数的名称。
函数参数列表，包围在括号( )中并由逗号( , )区隔。 函数功能，包围在花括号{ }中，用于定义函数功能的一些 JavaScript语句。 基本上和C/C++一致，但不需要设定形参类型、返回类型（就很舒 服！）。

33 定义函数 function plus(a, b) { return a + b; // return 不是必要的 }

34 函数嵌套 和C/C++/Java什么的类似： function addSquares(a,b) { function square(x) {
return x * x; } return square(a) + square(b); a = addSquares(2,3); // 返回 13

35 类 面向对象的编程语言不可能没有类。但是， JavaScript 的类与其他语言表现形式有很大的差别
在 ES6 之前，JavaScript 的类都需要采用 function 构成。 ES6后才出现类似于 C++/Java 的 class。

36 < ES6 的 类 function Person(name) { // 定义一个 Person 类，构造函数只有参数 name
this.name = name; } Person.prototype.setName = function (name) { // Person 类的方法原型 var John = new Person("John"); // new 一个 Person 类 console.log(John.name); // 输出 实例John 的名字 -> John John.setName("Bob"); // John 改名了 console.log(John.name); // 输出 实例John 的名字 -> Bob

37 ES6 的类 class Person { // 定义Person类
constructor(name) { // 构造函数 只有形参name this.name = name; } setName(name) { //setName 方法

38 用 ES5 做一个Person对象 要求： 记录Person的姓名，性别，出生年份，国家 允许Person改名，变性，移民
制作一个人类资产排行榜！(sort)

39 用 ES6 改写 把刚刚的函数构成的类改成 ES6 的类 (class)。

40 箭头函数 函数的快捷写法，不需要通过 function 关键字创建函数，并且还 可以省略 return 关键字，类似于 Python 的 lambda 表达式。 [1, 2, 3].sort((a, b) => a < b); // 数字递减排序 (DESC) [1, 2, 3].map(a => a + 1); // 数组的所有数字加一

41 模板字符串 类似于 C语言的 printf 的模板输出。
JavaScript 的模板字符串使用 `` “圈住”字符串，并且支持多行输出，支持嵌 套变量/函数/JS语句。 let age = 18; let gender = "male"; console.info(`${(gender == "male") ? "he" : "she"} is ${age} years old!`);

42 默认参数 ES6 支持默认参数。 function setName(name = "Unknown") { // ES6 写法有效判定未传值
this.name = name; } function setName(name) { // ES5写法 有风险 this.name = name || "Unknown";

43 作业 希望大家有空可以模仿刚才的例子“做一个Person对象” 写一遍。 有问题欢迎在微信群问各位dalao。 培训录播：
px?id=379f8bf7-a58d d51-6a7480dc6c79