├── 9. FetchApi ├── 9-4. Response对象 │ ├── 笔记.md │ └── test.html ├── 9-3. Request对象 │ ├── 笔记.md │ └── test.html ├── 9-5. Headers对象 │ ├── 笔记.md │ └── test.html ├── 9-1. Fetch Api 概述 │ └── 笔记.md ├── 9-6. 文件上传 │ ├── 笔记.md │ └── test.html └── 9-2. 基本使用 │ ├── test.html │ └── 笔记.md ├── .vscode └── settings.json ├── 7. 符号 ├── 7-1. 普通符号 │ ├── index.js │ ├── index copy.js │ ├── index copy 4.js │ ├── index copy 5.js │ ├── index copy 3.js │ ├── index.html │ ├── index copy 7.js │ ├── 笔记.md │ ├── index copy 8.js │ ├── index copy 2.js │ └── index copy 6.js ├── 7-2. 共享符号 │ ├── 笔记.md │ ├── index copy 2.js │ ├── index copy.js │ ├── index.html │ └── index.js └── 7-3. 知名符号 │ ├── index copy 3.js │ ├── index copy 2.js │ ├── index.js │ ├── index copy.js │ ├── index.html │ ├── index copy 4.js │ └── 笔记.md ├── 4. 函数 ├── 4-6. 箭头函数 │ ├── index copy 6.js │ ├── index copy 2.js │ ├── index copy 4.js │ ├── index.js │ ├── index copy 3.js │ ├── index copy 5.js │ ├── index.html │ ├── index copy.js │ └── 笔记.md ├── 4-2. 剩余参数 │ ├── index.js │ ├── index copy 2.js │ ├── 笔记.md │ ├── index copy.js │ └── index.html ├── 4-1. 参数默认值 │ ├── index.js │ ├── index copy.js │ ├── index copy 3.js │ ├── 笔记.md │ ├── index.html │ └── index copy 2.js ├── 4-3. 展开运算符 │ ├── 笔记.md │ ├── index copy 2.js │ ├── index.html │ ├── index copy 3.js │ ├── index.js │ └── index copy.js ├── 4-4. 剩余参数和展开运算符练习 │ ├── test.js │ ├── test.html │ ├── maxmin.js │ ├── maxmin.html │ └── curry.html └── 4-5. 明确函数的双重用途 │ ├── 笔记.md │ ├── index.html │ └── index.js ├── 6. 解构 ├── 6-2. 数组解构 │ ├── index.js │ ├── index copy 2.js │ ├── index copy 5.js │ ├── index copy.js │ ├── index.html │ ├── index copy 4.js │ ├── index copy 3.js │ └── 作业题.html ├── 6-1. 对象解构 │ ├── 笔记.md │ ├── index.js │ ├── index.html │ ├── index copy 2.js │ └── index copy.js └── 6-3. 参数解构 │ ├── index.html │ ├── index.js │ └── index copy.js ├── 12. 代理与反射 ├── 12-4. 应用-观察者模式 │ ├── 笔记.md │ ├── test2.html │ └── test1.html ├── 12-3. Proxy │ ├── 笔记.md │ └── test1.html ├── 12-2. Reflect │ ├── test1.html │ ├── 笔记.md │ └── test2.html ├── 12-1. [回顾]属性描述符 │ ├── 笔记.md │ ├── test3.html │ ├── test2.html │ ├── test1.html │ └── test4.html ├── 12-6. 应用-可验证的函数参数 │ ├── test2.html │ └── test1.html └── 12-5. 应用-偷懒的构造函数 │ └── test.html ├── 3. 字符串和正则表达式 ├── 3-5. [扩展]模板字符串标记 │ ├── index copy 2.js │ ├── 笔记.md │ ├── index.html │ ├── index copy.js │ └── index.js ├── 3-3. [扩展]正则中的粘连标记 │ ├── 笔记.md │ ├── index.js │ └── index.html ├── 3-4. 模板字符串 │ ├── 笔记.md │ ├── index.js │ └── index.html ├── 3-2. 更多的字符串API │ ├── index.js │ ├── 笔记.md │ └── index.html └── 3-1. 更好的Unicode支持 │ ├── 笔记.md │ ├── index.html │ └── index.js ├── 8. 异步处理 ├── 8-4. Promise的串联 │ ├── 图例.png │ ├── data │ │ ├── teachers.json │ │ ├── classes.json │ │ └── students.json │ ├── 笔记.md │ ├── test2.html │ └── test3.html ├── 8-3. Promise的基本使用 │ ├── 图例.png │ ├── test6.html │ ├── test7.html │ ├── test5.html │ ├── test4.html │ ├── 笔记.md │ ├── test1.html │ ├── test3.html │ └── test2.html ├── 8-6. [扩展]手写Promise │ ├── 图例.png │ ├── test2.html │ ├── test1.html │ └── test3.html ├── 8-2. 异步处理的通用模型 │ ├── assets │ │ ├── 2019-10-18-17-28-30.png │ │ ├── 2019-10-18-18-10-18.png │ │ ├── 2019-10-18-18-10-38.png │ │ └── 2019-10-18-18-15-52.png │ └── 笔记.md ├── 8-1. 事件和回调函数的缺陷 │ ├── data │ │ ├── teachers.json │ │ ├── classes.json │ │ └── students.json │ ├── 笔记.md │ ├── 回调地狱1.html │ ├── ajax.js │ ├── 异步之间的联系.html │ ├── 回调地狱2.html │ └── 回调地狱3.html ├── 8-7. async和await │ ├── data │ │ ├── teachers.json │ │ ├── classes.json │ │ └── students.json │ ├── async.html │ ├── test3.html │ ├── await.html │ ├── 改造计时器函数.html │ ├── test4.html │ ├── 笔记.md │ └── test2.html ├── 8-0. [回顾]事件循环 │ ├── test.js │ ├── test3.html │ ├── test4.html │ ├── test2.html │ ├── test1.html │ ├── 笔记.md │ └── test5.html └── 8-5. Promise的其他api │ ├── test1.html │ ├── 笔记.md │ ├── test2.html │ ├── test3.html │ ├── test4.html │ └── 异步之间的联系.html ├── 5. 对象 ├── 5-7. [demo]像素鸟 │ ├── img │ │ ├── sky.png │ │ ├── bird.png │ │ ├── land.png │ │ ├── pipeUp.png │ │ └── pipeDown.png │ ├── scripts │ │ ├── Sky.js │ │ ├── Land.js │ │ ├── Rectangle.js │ │ ├── Bird.js │ │ ├── Pipe.js │ │ └── Game.js │ ├── index.html │ └── index.css ├── 5-5. 类的其他书写方式 │ ├── index copy 7.js │ ├── index copy 5.js │ ├── index copy 6.js │ ├── index copy 4.js │ ├── index.html │ ├── 笔记.md │ ├── index copy 3.js │ ├── index.js │ ├── index copy.js │ └── index copy 2.js ├── 5-3. 面向对象简介 │ ├── 笔记.md │ ├── index copy.js │ ├── index.html │ └── index.js ├── 5-2. Object的新增API │ ├── index copy.js │ ├── index.js │ ├── index copy 3.js │ ├── index.html │ ├── index copy 2.js │ └── 笔记.md ├── 5-1. 新增的对象字面量语法 │ ├── index copy 2.js │ ├── 笔记.md │ ├── index.js │ ├── index.html │ └── index copy.js ├── 5-4. 类：构造函数的语法糖 │ ├── 笔记.md │ ├── index.html │ ├── index.js │ └── oldconstructor.js └── 5-6. 类的继承 │ ├── index.html │ ├── 笔记.md │ ├── index copy.js │ ├── index copy 2.js │ └── index.js ├── 13. 增强的数组功能 ├── 13-4. [扩展]制作黑白图片 │ ├── img │ │ └── liao.jpg │ ├── test1.html │ ├── 效果.html │ └── test.html ├── 13-1. 新增的数组API │ ├── 笔记.md │ ├── test3.html │ ├── test5.html │ ├── test4.html │ ├── test1.html │ └── test2.html ├── 13-3. [扩展]ArrayBuffer │ ├── 笔记.md │ ├── test1.html │ ├── test4.html │ ├── test2.html │ └── test3.html └── 13-2. [扩展]类型化数组 │ ├── test2.html │ ├── test1.html │ ├── test3.html │ └── 笔记.md ├── 2. 块级绑定 ├── 2-1. 声明变量的问题 │ ├── 笔记.md │ ├── index.html │ └── index.js ├── 2-3. 使用const声明常量 │ ├── index.html │ ├── 笔记.md │ └── index.js └── 2-2. 使用let声明变量 │ ├── index.html │ ├── 笔记.md │ └── index.js ├── 11. 更多的集合类型 ├── 11-6. [扩展]WeakSet和WeakMap │ ├── 笔记.md │ ├── test.html │ └── test copy.html ├── 11-1. set集合 │ ├── test1.html │ ├── test3.html │ ├── test2.html │ └── 笔记.md ├── 11-3. [扩展]手写set │ ├── test.html │ └── mySet.js ├── 11-4. map集合 │ ├── test.html │ ├── test copy.html │ └── 笔记.md ├── 11-5. [扩展]手写map │ ├── test.html │ └── myMap.js └── 11-2. set应用 │ └── test1.html ├── 10. 迭代器和生成器 ├── 10-2. 可迭代协议与for-of循环 │ ├── 笔记.md │ ├── test2.html │ ├── test3.html │ ├── test1.html │ └── test4.html ├── 10-1. 迭代器 │ ├── 笔记.md │ ├── test2.html │ ├── test1.html │ └── test3.html ├── 10-3. 生成器 │ ├── test1.html │ ├── test5.html │ ├── test4.html │ ├── test6.html │ ├── test2.html │ ├── 笔记.md │ └── test3.html └── 10-4. 生成器应用-异步任务控制 │ └── test.html └── 1. 概述 └── 1-1. 概述 └── 笔记.md /9. FetchApi/9-4. Response对象/笔记.md: -------------------------------------------------------------------------------- 1 | # Response 对象 -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index.js: -------------------------------------------------------------------------------- 1 | const syb = Symbol(); 2 | 3 | console.log(syb); -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy 6.js: -------------------------------------------------------------------------------- 1 | const func = () => { 2 | console.log(this) 3 | } 4 | -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index.js: -------------------------------------------------------------------------------- 1 | let a = 1, b = 2; 2 | 3 | [b, a] = [a, b] 4 | 5 | console.log(a, b) -------------------------------------------------------------------------------- /12. 代理与反射/12-4. 应用-观察者模式/笔记.md: -------------------------------------------------------------------------------- 1 | # 观察者模式 2 | 3 | 有一个对象，是观察者，它用于观察另外一个对象的属性值变化，当属性值变化后会收到一个通知，可能会做一些事。 -------------------------------------------------------------------------------- /4. 函数/4-2. 剩余参数/index.js: -------------------------------------------------------------------------------- 1 | function test(a, b, ...args) { 2 | 3 | } 4 | 5 | test(1, 32, 46, 7, 34); -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-5. [扩展]模板字符串标记/index copy 2.js: -------------------------------------------------------------------------------- 1 | var text = String.raw`abc\t\nbcd`; 2 | 3 | console.log(text); -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/index.js: -------------------------------------------------------------------------------- 1 | function test(a = b, b) { 2 | console.log(a, b); 3 | } 4 | 5 | test(undefined, 2); -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/笔记.md: -------------------------------------------------------------------------------- 1 | # 4-3. 展开运算符 2 | 3 | 使用方式：``` ...要展开的东西 ``` 4 | 5 | ## 对数组展开 ES6 6 | 7 | ## 对对象展开 ES7 -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/图例.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-4. Promise的串联/图例.png -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy 2.js: -------------------------------------------------------------------------------- 1 | const print = num => { 2 | console.log("给我的数字是：", num) 3 | } 4 | 5 | print(2); -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/img/sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/5. 对象/5-7. [demo]像素鸟/img/sky.png -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/图例.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-3. Promise的基本使用/图例.png -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/img/bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/5. 对象/5-7. [demo]像素鸟/img/bird.png -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/img/land.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/5. 对象/5-7. [demo]像素鸟/img/land.png -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/img/pipeUp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/5. 对象/5-7. [demo]像素鸟/img/pipeUp.png -------------------------------------------------------------------------------- /8. 异步处理/8-6. [扩展]手写Promise/图例.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-6. [扩展]手写Promise/图例.png -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/img/pipeDown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/5. 对象/5-7. [demo]像素鸟/img/pipeDown.png -------------------------------------------------------------------------------- /7. 符号/7-2. 共享符号/笔记.md: -------------------------------------------------------------------------------- 1 | # 7-2. 共享符号 2 | 3 | 根据某个符号名称（符号描述）能够得到同一个符号 4 | 5 | ```js 6 | Symbol.for("符号名/符号描述") //获取共享符号 7 | ``` -------------------------------------------------------------------------------- /13. 增强的数组功能/13-4. [扩展]制作黑白图片/img/liao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/13. 增强的数组功能/13-4. [扩展]制作黑白图片/img/liao.jpg -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-3. [扩展]正则中的粘连标记/笔记.md: -------------------------------------------------------------------------------- 1 | # 3-3. [扩展]正则中的粘连标记 2 | 3 | 标记名：y 4 | 5 | 含义：匹配时，完全按照正则对象中的lastIndex位置开始匹配，并且匹配的位置必须在lastIndex位置。 -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy.js: -------------------------------------------------------------------------------- 1 | //创建一个符号 2 | 3 | const syb1 = Symbol(); 4 | const syb2 = Symbol("abc"); 5 | 6 | console.log(syb1, syb2); -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy 4.js: -------------------------------------------------------------------------------- 1 | const sum = (a, b) => ({ 2 | a: a, 3 | b: b, 4 | sum: a + b 5 | }); 6 | 7 | console.log(sum(3, 5)) -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 7.js: -------------------------------------------------------------------------------- 1 | const A = class { //匿名类，类表达式 2 | a = 1; 3 | b = 2; 4 | } 5 | 6 | const a = new A(); 7 | console.log(a) -------------------------------------------------------------------------------- /2. 块级绑定/2-1. 声明变量的问题/笔记.md: -------------------------------------------------------------------------------- 1 | # 声明变量的问题 2 | 3 | 使用var声明变量 4 | 5 | 1. 允许重复的变量声明：导致数据被覆盖 6 | 7 | 2. 变量提升：怪异的数据访问、闭包问题 8 | 9 | 3. 全局变量挂载到全局对象：全局对象成员污染问题 -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index copy 2.js: -------------------------------------------------------------------------------- 1 | const numbers = ["a", "b", "c", "d"]; 2 | 3 | 4 | const [n1, , , n4, n5 = 123] = numbers; 5 | 6 | console.log(n1, n4, n5) -------------------------------------------------------------------------------- /7. 符号/7-2. 共享符号/index copy 2.js: -------------------------------------------------------------------------------- 1 | 2 | const obj = { 3 | a: 1, 4 | b: 2, 5 | [Symbol.for("c")]: 3 6 | } 7 | 8 | console.log(obj[Symbol.for("c")]); -------------------------------------------------------------------------------- /4. 函数/4-2. 剩余参数/index copy 2.js: -------------------------------------------------------------------------------- 1 | function test(...args1, ...args2) { 2 | console.log(args1) 3 | console.log(args2) 4 | } 5 | 6 | test(1, 32, 46, 7, 34); -------------------------------------------------------------------------------- /8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-17-28-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-17-28-30.png -------------------------------------------------------------------------------- /8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-10-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-10-18.png -------------------------------------------------------------------------------- /8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-10-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-10-38.png -------------------------------------------------------------------------------- /8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-15-52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ES6/HEAD/8. 异步处理/8-2. 异步处理的通用模型/assets/2019-10-18-18-15-52.png -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/index copy 2.js: -------------------------------------------------------------------------------- 1 | const arr1 = [3, 67, 8, 5]; 2 | 3 | //克隆arr1数组到arr2 4 | 5 | const arr2 = [0, ...arr1, 1]; 6 | 7 | console.log(arr2, arr1 === arr2) -------------------------------------------------------------------------------- /5. 对象/5-3. 面向对象简介/笔记.md: -------------------------------------------------------------------------------- 1 | # 面向对象简介 2 | 3 | 面向对象：一种编程思想，跟具体的语言 4 | 5 | 6 | 对比面向过程： 7 | 8 | - 面向过程：思考的切入点是功能的步骤 9 | - 面向对象：思考的切入点是对象的划分 10 | 11 | 【大象装冰箱】 12 | 13 | -------------------------------------------------------------------------------- /4. 函数/4-4. 剩余参数和展开运算符练习/test.js: -------------------------------------------------------------------------------- 1 | function test(a, b, c) { 2 | console.log(a, b, c); 3 | } 4 | 5 | test(2, 6, 7); 6 | 7 | const arr = ["asf", "Gfh", "111"]; 8 | 9 | test(...arr); -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/index copy.js: -------------------------------------------------------------------------------- 1 | console.log(NaN === NaN); // false 2 | console.log(+0 === -0); // true 3 | 4 | console.log(Object.is(NaN, NaN)) 5 | console.log(Object.is(+0, -0)) -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 4.js: -------------------------------------------------------------------------------- 1 | //创建一个符号 2 | 3 | const syb1 = Symbol("这是随便写的一个符号"); 4 | const syb2 = Symbol("这是随便写的一个符号"); 5 | 6 | console.log(syb1, syb2); 7 | console.log(syb1 === syb2) -------------------------------------------------------------------------------- /5. 对象/5-1. 新增的对象字面量语法/index copy 2.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "姬成", 3 | age: 100, 4 | sayHello(){ 5 | console.log(this.name, this.age) 6 | } 7 | } 8 | 9 | user.sayHello(); -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-3. [扩展]正则中的粘连标记/index.js: -------------------------------------------------------------------------------- 1 | const text = "Hello World!!!"; 2 | 3 | const reg = /W\w+/y; 4 | reg.lastIndex = 3; 5 | console.log("reg.lastIndex:", reg.lastIndex) 6 | console.log(reg.test(text)) -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-5. [扩展]模板字符串标记/笔记.md: -------------------------------------------------------------------------------- 1 | # 3-5. [扩展]模板字符串标记 2 | 3 | 在模板字符串书写之前，可以加上标记: 4 | 5 | ```js 6 | 标记名`模板字符串` 7 | ``` 8 | 9 | 标记是一个函数，函数参数如下： 10 | 11 | 1. 参数1：被插值分割的字符串数组 12 | 2. 后续参数：所有的插值 -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/index copy.js: -------------------------------------------------------------------------------- 1 | function sum(a, b = 1, c = 2) { 2 | return a + b + c; 3 | } 4 | 5 | console.log(sum(10, undefined, undefined)) 6 | console.log(sum(11)) 7 | console.log(sum(1, undefined, 5)) -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index.js: -------------------------------------------------------------------------------- 1 | const numbers = [3, 7, 78, 3, 5, 345]; 2 | 3 | const result = numbers.filter(num => num % 2 !== 0) 4 | .map(num => num * 2).reduce((a, b) => a + b) 5 | 6 | console.log(result); -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 5.js: -------------------------------------------------------------------------------- 1 | //创建一个符号 2 | 3 | const syb1 = Symbol("这是用于对象的一个属性"); 4 | 5 | const obj = { 6 | a: 1, 7 | b: 2, 8 | [syb1]: 3 //符号属性 9 | } 10 | 11 | console.log(obj); -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 3.js: -------------------------------------------------------------------------------- 1 | //创建一个符号 2 | 3 | const syb1 = Symbol(); 4 | const syb2 = Symbol("abc"); 5 | 6 | console.log(syb1, syb2); 7 | 8 | console.log(typeof syb1 === "symbol", typeof syb2 === "symbol") -------------------------------------------------------------------------------- /4. 函数/4-5. 明确函数的双重用途/笔记.md: -------------------------------------------------------------------------------- 1 | # 4-5. 明确函数的双重用途 2 | 3 | ES6提供了一个特殊的API，可以使用该API在函数内部，判断该函数是否使用了new来调用 4 | 5 | ```js 6 | new.target 7 | //该表达式，得到的是：如果没有使用new来调用函数，则返回undefined 8 | //如果使用new调用函数，则得到的是new关键字后面的函数本身 9 | ``` -------------------------------------------------------------------------------- /12. 代理与反射/12-3. Proxy/笔记.md: -------------------------------------------------------------------------------- 1 | # Proxy 代理 2 | 3 | 代理：提供了修改底层实现的方式 4 | 5 | ```js 6 | 7 | //代理一个目标对象 8 | //target：目标对象 9 | //handler：是一个普通对象，其中可以重写底层实现 10 | //返回一个代理对象 11 | new Proxy(target, handler) 12 | ``` 13 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-4. 模板字符串/笔记.md: -------------------------------------------------------------------------------- 1 | # 模板字符串 2 | 3 | ES6之前处理字符串繁琐的两个方面： 4 | 5 | 1. 多行字符串 6 | 2. 字符串拼接 7 | 8 | 9 | 在ES6中，提供了模板字符串的书写，可以非常方便的换行和拼接，要做的，仅仅是将字符串的开始或结尾改为 ` 符号 10 | 11 | 如果要在字符串中拼接js表达式，只需要在模板字符串中使用```${JS表达式}``` -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/index.js: -------------------------------------------------------------------------------- 1 | const obj1 = { 2 | a: 1 3 | } 4 | 5 | const obj2 = { 6 | b: 2 7 | } 8 | 9 | // obj1.__proto__ = obj2 10 | 11 | Object.setPrototypeOf(obj1, obj2) 12 | 13 | console.log(obj1) -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/index copy 3.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | d: 1, 3 | b: 2, 4 | a: 3, 5 | 0: 6, 6 | 5: 2, 7 | 4: 1 8 | } 9 | const props = Object.getOwnPropertyNames(obj) 10 | console.log(props) 11 | -------------------------------------------------------------------------------- /9. FetchApi/9-3. Request对象/笔记.md: -------------------------------------------------------------------------------- 1 | # Request 对象 2 | 3 | 除了使用基本的fetch方法，还可以通过创建一个Request对象来完成请求（实际上，fetch的内部会帮你创建一个Request对象） 4 | 5 | ```js 6 | new Request(url地址, 配置) 7 | ``` 8 | 9 | 注意点： 10 | 11 | 尽量保证每次请求都是一个新的Request对象 -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index copy 3.js: -------------------------------------------------------------------------------- 1 | const arr = [1]; 2 | const obj = { 3 | 0: 3, 4 | 1: 4, 5 | length: 2, 6 | [Symbol.isConcatSpreadable]: true 7 | } 8 | 9 | const result = arr.concat(2, obj) 10 | 11 | console.log(result) -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 5.js: -------------------------------------------------------------------------------- 1 | class Test { 2 | static a = 1; 3 | b = 2; 4 | c = 3; 5 | 6 | constructor() { 7 | this.d = this.b + this.c; 8 | } 9 | } 10 | 11 | const t = new Test(); 12 | console.log(t) 13 | 14 | 15 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-2. 更多的字符串API/index.js: -------------------------------------------------------------------------------- 1 | const text = "成哥是狠人"; 2 | 3 | 4 | console.log("是否包含“狠”：", text.includes("狠")); 5 | console.log("是否以“成哥”开头：", text.startsWith("成哥")); 6 | console.log("是否以“狠人”结尾：", text.endsWith("狠人")); 7 | console.log("重复4次：", text.repeat(4)); -------------------------------------------------------------------------------- /5. 对象/5-1. 新增的对象字面量语法/笔记.md: -------------------------------------------------------------------------------- 1 | # 5-1. 新增的对象字面量语法 2 | 3 | 1. 成员速写 4 | 5 | 如果对象字面量初始化时，成员的名称来自于一个变量，并且和变量的名称相同，则可以进行简写 6 | 7 | 2. 方法速写 8 | 9 | 对象字面初始化时，方法可以省略冒号和function关键字 10 | 11 | 3. 计算属性名 12 | 13 | 有的时候，初始化对象时，某些属性名可能来自于某个表达式的值，在ES6，可以使用中括号来表示该属性名是通过计算得到的。 -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index copy 5.js: -------------------------------------------------------------------------------- 1 | const numbers = [324, 7, 23, 5, 3243]; 2 | 3 | // 得到数组前两项，分别放到变量a和b中，然后剩余的所有数据放到数组nums 4 | 5 | // const [a, b, ...nums] = numbers; 6 | 7 | const a = numbers[0], b = numbers[1], nums = numbers.slice(2); 8 | 9 | console.log(a, b, nums); -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index copy.js: -------------------------------------------------------------------------------- 1 | const numbers = ["a", "b", "c", "d"]; 2 | 3 | // const { 4 | // 0: n1, 5 | // 1: n2 6 | // } = numbers; 7 | 8 | // let n1, n2; 9 | // ([n1, n2] = numbers); 10 | 11 | const [n1, n2] = numbers; 12 | 13 | console.log(n1, n2) -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index copy 2.js: -------------------------------------------------------------------------------- 1 | const arr = [3]; 2 | const arr2 = [5, 6, 7, 8]; 3 | 4 | arr2[Symbol.isConcatSpreadable] = false; 5 | 6 | const result = arr.concat(56, arr2) 7 | 8 | // [3, 56, [5,6,7,8]] 9 | // [3, 56, 5, 6, 7, 8] 10 | 11 | console.log(result) -------------------------------------------------------------------------------- /5. 对象/5-3. 面向对象简介/index copy.js: -------------------------------------------------------------------------------- 1 | //1. 冰箱门打开 2 | function openFrige(){ 3 | 4 | } 5 | openFrige(); 6 | 7 | //2. 大象装进去 8 | function elephantIn(){ 9 | 10 | } 11 | 12 | elephantIn(); 13 | 14 | //3. 冰箱门关上 15 | function closeFrige(){ 16 | 17 | } 18 | 19 | closeFrige(); -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-2. 更多的字符串API/笔记.md: -------------------------------------------------------------------------------- 1 | # 更多的字符串API 2 | 3 | 以下均为字符串的实例（原型）方法 4 | 5 | - includes 6 | 7 | 判断字符串中是否包含指定的子字符串 8 | 9 | - startsWith 10 | 11 | 判断字符串中是否以指定的字符串开始 12 | 13 | - endsWith 14 | 15 | 判断字符串中是否以指定的字符串结尾 16 | 17 | - repeat 18 | 19 | 将字符串重复指定的次数，然后返回一个新字符串。 -------------------------------------------------------------------------------- /6. 解构/6-1. 对象解构/笔记.md: -------------------------------------------------------------------------------- 1 | # 6-1. 对象解构 2 | 3 | ## 什么是解构 4 | 5 | 使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中 6 | 7 | **解构不会对被解构的目标造成任何影响** 8 | 9 | ## 在解构中使用默认值 10 | 11 | ```js 12 | 13 | {同名变量 = 默认值} 14 | 15 | ``` 16 | 17 | ## 非同名属性解构 18 | 19 | ```js 20 | 21 | {属性名:变量名} 22 | 23 | ``` -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index.js: -------------------------------------------------------------------------------- 1 | class Person { 2 | 3 | [Symbol.toStringTag] = "Person" 4 | } 5 | 6 | const p = new Person(); 7 | 8 | const arr = [32424, 45654, 32] 9 | 10 | console.log(Object.prototype.toString.apply(p)); 11 | console.log(Object.prototype.toString.apply(arr)) -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/index copy 3.js: -------------------------------------------------------------------------------- 1 | function test(a, b = 1) { 2 | console.log("arugments", arguments[0], arguments[1]); 3 | console.log("a:", a, "b:", b); 4 | a = 3; 5 | console.log("arugments", arguments[0], arguments[1]); 6 | console.log("a:", a, "b:", b); 7 | } 8 | 9 | test(1, 2); -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-4. 模板字符串/index.js: -------------------------------------------------------------------------------- 1 | var love1 = "秋葵"; 2 | var love2 = "香菜"; 3 | 4 | var text = `邓哥喜欢${love1} 5 | 邓哥也喜欢${love2} 6 | 表达式可以是任何有意义的数据${1 + 3 * 2 / 0.5} 7 | 表达式是可以嵌套的：${`表达式中的模板字符串${love1 + love2}`} 8 | \n\n 9 | 奥布瓦的发顺丰 10 | 在模板字符串中使用\${JS表达式}可以进行插值 11 | `; 12 | 13 | console.log(text); -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy 3.js: -------------------------------------------------------------------------------- 1 | //判断一个数是不是奇数 2 | // const isOdd = function (num) { 3 | // return num % 2 !== 0; 4 | // } 5 | 6 | // const isOdd = (num) => { 7 | // return num % 2 !== 0; 8 | // } 9 | 10 | const isOdd = num => num % 2 !== 0; 11 | 12 | console.log(isOdd(3)) 13 | console.log(isOdd(4)) -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index copy.js: -------------------------------------------------------------------------------- 1 | function A() { 2 | 3 | } 4 | 5 | Object.defineProperty(A, Symbol.hasInstance, { 6 | value: function (obj) { 7 | return false; 8 | } 9 | }) 10 | 11 | const obj = new A(); 12 | 13 | console.log(obj instanceof A); 14 | // console.log(A[Symbol.hasInstance](obj)); -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/笔记.md: -------------------------------------------------------------------------------- 1 | # 4-1. 参数默认值 2 | 3 | ## 使用 4 | 5 | 在书写形参时，直接给形参赋值，附的值即为默认值 6 | 7 | 这样一来，当调用函数时，如果没有给对应的参数赋值（给它的值是undefined），则会自动使用默认值。 8 | 9 | ## [扩展]对arguments的影响 10 | 11 | 只要给函数加上参数默认值，该函数会自动变量严格模式下的规则：arguments和形参脱离 12 | 13 | ## [扩展]留意暂时性死区 14 | 15 | 形参和ES6中的let或const声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。 -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy 5.js: -------------------------------------------------------------------------------- 1 | const func = () => { 2 | console.log(this) 3 | } 4 | 5 | const obj = { 6 | method: function(){ 7 | const func = () => { 8 | console.log(this) 9 | console.log(arguments) 10 | } 11 | func() 12 | } 13 | } 14 | obj.method(234); -------------------------------------------------------------------------------- /5. 对象/5-4. 类：构造函数的语法糖/笔记.md: -------------------------------------------------------------------------------- 1 | # 类：构造函数的语法糖 2 | 3 | ## 传统的构造函数的问题 4 | 5 | 1. 属性和原型方法定义分离，降低了可读性 6 | 2. 原型成员可以被枚举 7 | 3. 默认情况下，构造函数仍然可以被当作普通函数使用 8 | 9 | ## 类的特点 10 | 11 | 1. 类声明不会被提升，与 let 和 const 一样，存在暂时性死区 12 | 2. 类中的所有代码均在严格模式下执行 13 | 3. 类的所有方法都是不可枚举的 14 | 4. 类的所有方法都无法被当作构造函数使用 15 | 5. 类的构造器必须使用 new 来调用 16 | 17 | -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 6.js: -------------------------------------------------------------------------------- 1 | class Test { 2 | 3 | constructor() { 4 | this.a = 123; 5 | } 6 | 7 | print = () => { 8 | console.log(this.a) 9 | } 10 | } 11 | 12 | const t1 = new Test(); 13 | const t2 = new Test(); 14 | console.log(t1.print === t2.print) 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-1. 更好的Unicode支持/笔记.md: -------------------------------------------------------------------------------- 1 | # 更好的Unicode支持 2 | 3 | 早期，由于存储空间宝贵，Unicode使用16位二进制来存储文字。我们将一个16位的二进制编码叫做一个码元（Code Unit）。 4 | 5 | 后来，由于技术的发展，Unicode对文字编码进行了扩展，将某些文字扩展到了32位（占用两个码元），并且，将某个文字对应的二进制数字叫做码点（Code Point）。 6 | 7 | ES6为了解决这个困扰，为字符串提供了方法：codePointAt，根据字符串码元的位置得到其码点。 8 | 9 | 同时，ES6为正则表达式添加了一个flag: u，如果添加了该配置，则匹配时，使用码点匹配 -------------------------------------------------------------------------------- /5. 对象/5-1. 新增的对象字面量语法/index.js: -------------------------------------------------------------------------------- 1 | const prop1 = "name2"; 2 | const prop2 = "age2"; 3 | const prop3 = "sayHello2"; 4 | 5 | const user = { 6 | [prop1]: "姬成", 7 | [prop2]: 100, 8 | [prop3](){ 9 | console.log(this[prop1], this[prop2]) 10 | } 11 | } 12 | 13 | user[prop3](); 14 | 15 | console.log(user) -------------------------------------------------------------------------------- /7. 符号/7-2. 共享符号/index copy.js: -------------------------------------------------------------------------------- 1 | const syb1 = Symbol.for("abc"); 2 | const syb2 = Symbol.for("abc"); 3 | console.log(syb1 === syb2) 4 | const obj1 = { 5 | a: 1, 6 | b: 2, 7 | [syb1]: 3 8 | } 9 | 10 | const obj2 = { 11 | a: "a", 12 | b: "b", 13 | [syb2]: "c" 14 | } 15 | 16 | console.log(obj1, obj2); 17 | -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/data/teachers.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "刘", 4 | "gender": "女" 5 | }, 6 | { 7 | "id": 2, 8 | "name": "张", 9 | "gender": "女" 10 | }, 11 | { 12 | "id": 3, 13 | "name": "李", 14 | "gender": "男" 15 | } 16 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/data/teachers.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "刘", 4 | "gender": "女" 5 | }, 6 | { 7 | "id": 2, 8 | "name": "张", 9 | "gender": "女" 10 | }, 11 | { 12 | "id": 3, 13 | "name": "李", 14 | "gender": "男" 15 | } 16 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/data/teachers.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "刘", 4 | "gender": "女" 5 | }, 6 | { 7 | "id": 2, 8 | "name": "张", 9 | "gender": "女" 10 | }, 11 | { 12 | "id": 3, 13 | "name": "李", 14 | "gender": "男" 15 | } 16 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/data/classes.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 50, 3 | "name": "F50", 4 | "teacherId": 1 5 | }, 6 | { 7 | "id": 51, 8 | "name": "F51", 9 | "teacherId": 2 10 | }, 11 | { 12 | "id": 52, 13 | "name": "F52", 14 | "teacherId": 3 15 | } 16 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/data/classes.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 50, 3 | "name": "F50", 4 | "teacherId": 1 5 | }, 6 | { 7 | "id": 51, 8 | "name": "F51", 9 | "teacherId": 2 10 | }, 11 | { 12 | "id": 52, 13 | "name": "F52", 14 | "teacherId": 3 15 | } 16 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/data/classes.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 50, 3 | "name": "F50", 4 | "teacherId": 1 5 | }, 6 | { 7 | "id": 51, 8 | "name": "F51", 9 | "teacherId": 2 10 | }, 11 | { 12 | "id": 52, 13 | "name": "F52", 14 | "teacherId": 3 15 | } 16 | ] -------------------------------------------------------------------------------- /4. 函数/4-2. 剩余参数/笔记.md: -------------------------------------------------------------------------------- 1 | # 4-2. 剩余参数 2 | 3 | arguments的缺陷： 4 | 5 | 1. 如果和形参配合使用，容易导致混乱 6 | 2. 从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图 7 | 8 | 9 | ES6的剩余参数专门用于手机末尾的所有参数，将其放置到一个形参数组中。 10 | 11 | 语法: 12 | 13 | ```js 14 | function (...形参名){ 15 | 16 | } 17 | ``` 18 | 19 | **细节：** 20 | 21 | 1. 一个函数，仅能出现一个剩余参数 22 | 2. 一个函数，如果有剩余参数，剩余参数必须是最后一个参数 -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 4.js: -------------------------------------------------------------------------------- 1 | class Chess { 2 | constructor(name) { 3 | this.name = name; 4 | } 5 | 6 | static width = 50; 7 | 8 | static height = 50; 9 | 10 | static method() { 11 | 12 | } 13 | } 14 | 15 | console.log(Chess.width) 16 | console.log(Chess.height) 17 | 18 | Chess.method(); 19 | 20 | 21 | -------------------------------------------------------------------------------- /6. 解构/6-1. 对象解构/index.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "kevin", 3 | age: 11, 4 | sex: "男", 5 | address: { 6 | province: "四川", 7 | city: "成都" 8 | } 9 | } 10 | //解构出user中的name、province 11 | //定义两个变量name、province 12 | //再解构 13 | const { name, address: { province } } = user; 14 | 15 | console.log(name, address, province) -------------------------------------------------------------------------------- /9. FetchApi/9-5. Headers对象/笔记.md: -------------------------------------------------------------------------------- 1 | # Headers 对象 2 | 3 | 在Request和Response对象内部，会将传递的请求头对象，转换为Headers 4 | 5 | Headers对象中的方法： 6 | 7 | - has(key)：检查请求头中是否存在指定的key值 8 | - get(key): 得到请求头中对应的key值 9 | - set(key, value)：修改对应的键值对 10 | - append(key, value)：添加对应的键值对 11 | - keys(): 得到所有的请求头键的集合 12 | - values(): 得到所有的请求头中的值的集合 13 | - entries(): 得到所有请求头中的键值对的集合 -------------------------------------------------------------------------------- /11. 更多的集合类型/11-6. [扩展]WeakSet和WeakMap/笔记.md: -------------------------------------------------------------------------------- 1 | # WeakSet 和 WeakMap 2 | 3 | ## WeakSet 4 | 5 | 使用该集合，可以实现和set一样的功能，不同的是： 6 | 7 | 1. **它内部存储的对象地址不会影响垃圾回收** 8 | 2. 只能添加对象 9 | 3. 不能遍历（不是可迭代的对象）、没有size属性、没有forEach方法 10 | 11 | ## WeakMap 12 | 13 | 类似于map的集合，不同的是： 14 | 15 | 1. **它的键存储的地址不会影响垃圾回收** 16 | 2. 它的键只能是对象 17 | 3. 不能遍历（不是可迭代的对象）、没有size属性、没有forEach方法 -------------------------------------------------------------------------------- /4. 函数/4-2. 剩余参数/index copy.js: -------------------------------------------------------------------------------- 1 | function sum(...args) { 2 | //args收集了所有的参数，形成的一个数组 3 | let sum = 0; 4 | for (let i = 0; i < args.length; i++) { 5 | sum += args[i]; 6 | } 7 | return sum; 8 | } 9 | 10 | console.log(sum()) 11 | console.log(sum(1)) 12 | console.log(sum(1, 2)) 13 | console.log(sum(1, 2, 3)) 14 | console.log(sum(1, 2, 3, 4)) -------------------------------------------------------------------------------- /6. 解构/6-1. 对象解构/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /6. 解构/6-3. 参数解构/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /7. 符号/7-2. 共享符号/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. 函数/4-2. 剩余参数/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-3. 面向对象简介/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-6. 类的继承/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2. 块级绑定/2-3. 使用const声明常量/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-4. 模板字符串/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. 函数/4-4. 剩余参数和展开运算符练习/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. 函数/4-5. 明确函数的双重用途/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-1. 新增的对象字面量语法/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. 对象/5-4. 类：构造函数的语法糖/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-2. 更多的字符串API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /6. 解构/6-1. 对象解构/index copy 2.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "kevin", 3 | age: 11, 4 | sex: "男", 5 | address: { 6 | province: "四川", 7 | city: "成都" 8 | } 9 | } 10 | // 先定义4个变量：name、age、gender、address 11 | // 再从对象user中读取同名属性赋值（其中gender读取的是sex属性） 12 | let { name, age, sex: gender = 123, address } = user 13 | 14 | console.log(name, age, gender, address) -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index copy 4.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "kevin", 3 | age: 11, 4 | sex: "男", 5 | address: { 6 | province: "四川", 7 | city: "成都" 8 | } 9 | } 10 | 11 | //解构出name，然后，剩余的所有属性，放到一个新的对象中，变量名为obj 12 | // name: kevin 13 | // obj : {age:11, sex:"男", address:{...}} 14 | 15 | const { name, ...obj } = user; 16 | 17 | console.log(name, obj) -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-1. 更好的Unicode支持/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-3. [扩展]正则中的粘连标记/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test.js: -------------------------------------------------------------------------------- 1 | // console.log("a") 2 | 3 | // setTimeout(() => { 4 | // console.log("b") 5 | // }, 0); 6 | 7 | // console.log("c"); 8 | 9 | // a c b 10 | 11 | console.log("a") 12 | 13 | setTimeout(() => { 14 | console.log("b") 15 | }, 0); 16 | 17 | for (let i = 0; i < 1000; i++) { 18 | console.log("c") 19 | } 20 | 21 | // a 22 | // 1000个c 23 | // b 24 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/笔记.md: -------------------------------------------------------------------------------- 1 | # 新增的数组API 2 | 3 | ## 静态方法 4 | 5 | - Array.of(...args): 使用指定的数组项创建一个新数组 6 | - Array.from(arg): 通过给定的类数组 或 可迭代对象 创建一个新的数组。 7 | 8 | ## 实例方法 9 | 10 | - find(callback): 用于查找满足条件的第一个元素 11 | - findIndex(callback)：用于查找满足条件的第一个元素的下标 12 | - fill(data)：用指定的数据填充满数组所有的内容 13 | - copyWithin(target, start?, end?): 在数组内部完成复制 14 | - includes(data)：判断数组中是否包含某个值，使用Object.is匹配 -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/index copy 3.js: -------------------------------------------------------------------------------- 1 | const obj1 = { 2 | name: "成哥", 3 | age: 18, 4 | love: "邓嫂", 5 | address: { 6 | country: "中国", 7 | province: "黑龙江", 8 | city: "哈尔滨" 9 | } 10 | } 11 | 12 | // 浅克隆到obj2 13 | 14 | const obj2 = { 15 | ...obj1, 16 | name: "邓哥" 17 | }; 18 | 19 | console.log(obj2) 20 | 21 | console.log(obj1.address === obj2.address) -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 7.js: -------------------------------------------------------------------------------- 1 | const syb = Symbol(); 2 | 3 | const obj = { 4 | [syb]: 1, 5 | a: 2, 6 | b: 3 7 | } 8 | 9 | for (const prop in obj) { 10 | console.log(prop) 11 | } 12 | 13 | console.log(Object.keys(obj)) 14 | console.log(Object.getOwnPropertyNames(obj)) 15 | //得到的是一个符号属性的数组 16 | const sybs = Object.getOwnPropertySymbols(obj); 17 | console.log(sybs, sybs[0] === syb) -------------------------------------------------------------------------------- /9. FetchApi/9-1. Fetch Api 概述/笔记.md: -------------------------------------------------------------------------------- 1 | # 9-1. Fetch Api 概述 2 | 3 | **XMLHttpRequest的问题** 4 | 5 | 1. 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码 6 | 2. 采用传统的事件驱动模式，无法适配新的 Promise Api 7 | 8 | **Fetch Api 的特点** 9 | 10 | 1. 并非取代 AJAX，而是对 AJAX 传统 API 的改进 11 | 2. 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景 12 | 3. 使用 Promise Api，更利于异步代码的书写 13 | 4. Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api 14 | 5. 需要掌握网络通信的知识 -------------------------------------------------------------------------------- /9. FetchApi/9-6. 文件上传/笔记.md: -------------------------------------------------------------------------------- 1 | # 文件上传 2 | 3 | 流程： 4 | 5 | 1. 客户端将文件数据发送给服务器 6 | 2. 服务器保存上传的文件数据到服务器端 7 | 3. 服务器响应给客户端一个文件访问地址 8 | 9 | > 测试地址：http://101.132.72.36:5100/api/upload 10 | > 键的名称（表单域名称）：imagefile 11 | 12 | 请求方法：POST 13 | 请求的表单格式：multipart/form-data 14 | 请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据 15 | 16 | > HTML5中，JS仍然无法随意的获取文件数据，但是可以获取到input元素中，被用户选中的文件数据 17 | > 可以利用HTML5提供的FormData构造函数来创建请求体 -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-3. [扩展]ArrayBuffer/笔记.md: -------------------------------------------------------------------------------- 1 | # ArrayBuffer 2 | 3 | ArrayBuffer：一个对象，用于存储一块固定内存大小的数据。 4 | 5 | ```js 6 | 7 | new ArrayBuffer(字节数) 8 | 9 | ``` 10 | 11 | 可以通过属性```byteLength```得到字节数，可以通过方法```slice```得到新的ArrayBuffer 12 | 13 | ## 读写ArrayBuffer 14 | 15 | 1. 使用DataView 16 | 17 | 通常会在需要混用多种存储格式时使用DataView 18 | 19 | 2. 使用类型化数组 20 | 21 | 实际上，每一个类型化数组都对应一个ArrayBuffer，如果没有手动指定ArrayBuffer，类型化数组创建时，会新建一个ArrayBuffer -------------------------------------------------------------------------------- /2. 块级绑定/2-2. 使用let声明变量/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /5. 对象/5-1. 新增的对象字面量语法/index copy.js: -------------------------------------------------------------------------------- 1 | function createUser(loginId, loginPwd, nickName) { 2 | const sayHello = function () { 3 | console.log("loginId", this.loginId, "nickname", this.nickName) 4 | } 5 | return { 6 | loginId, 7 | loginPwd, 8 | nickName, 9 | sayHello, 10 | id: Math.random() 11 | } 12 | } 13 | const u = createUser("abc", "123", "aaa"); 14 | u.sayHello(); -------------------------------------------------------------------------------- /2. 块级绑定/2-1. 声明变量的问题/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/index copy 3.js: -------------------------------------------------------------------------------- 1 | // const numbers = ["a", "b", "c", "d", [1, 2, 3, 4]]; 2 | 3 | // // 得到numbers下标为4的数组中的下标为2的数据，放到变量n中 4 | // const [, , , , [, , n]] = numbers; 5 | 6 | // console.log(n) 7 | 8 | const numbers = ["a", "b", "c", "d", { 9 | a: 1, 10 | b: 2 11 | }]; 12 | 13 | //得到numbers下标为4的数组的属性a，赋值给变量A 14 | // const [, , , , { a: A }] = numbers; 15 | 16 | const { a: A } = numbers[4]; 17 | 18 | console.log(A) -------------------------------------------------------------------------------- /6. 解构/6-3. 参数解构/index.js: -------------------------------------------------------------------------------- 1 | // function ajax(options) { 2 | // const defaultOptions = { 3 | // method: "get", 4 | // url: "/" 5 | // } 6 | // const opt = { 7 | // ...defaultOptions, 8 | // ...options 9 | // } 10 | // console.log(opt) 11 | // } 12 | 13 | function ajax({ 14 | method = "get", 15 | url = "/" 16 | } = {}) { 17 | console.log(method, url) 18 | } 19 | 20 | ajax() -------------------------------------------------------------------------------- /7. 符号/7-2. 共享符号/index.js: -------------------------------------------------------------------------------- 1 | const SymbolFor = (() => { 2 | const global = {};//用于记录有哪些共享符号 3 | return function (name) { 4 | console.log(global) 5 | if (!global[name]) { 6 | global[name] = Symbol(name); 7 | } 8 | console.log(global); 9 | return global[name]; 10 | } 11 | })(); 12 | 13 | const syb1 = SymbolFor("abc"); 14 | 15 | const syb2 = SymbolFor("abc"); 16 | 17 | console.log(syb1 === syb2); -------------------------------------------------------------------------------- /2. 块级绑定/2-3. 使用const声明常量/笔记.md: -------------------------------------------------------------------------------- 1 | # 使用const声明常量 2 | 3 | const和let完全相同，仅在于用const声明的变量，必须在声明时赋值，而且不可以重新赋值。 4 | 5 | 实际上，在开发中，应该尽量使用const来声明变量，以保证变量的值不会随意篡改，原因如下： 6 | 7 | 1. 根据经验，开发中的很多变量，都是不会更改，也不应该更改的。 8 | 2. 后续的很多框架或者是第三方JS库，都要求数据不可变，使用常量可以一定程度上保证这一点。 9 | 10 | 注意的细节： 11 | 12 | 1. 常量不可变，是指声明的常量的内存空间不可变，并不保证内存空间中的地址指向的其他空间不可变。 13 | 2. 常量的命名 14 | 1. 特殊的常量：该常量从字面意义上，一定是不可变的，比如圆周率、月地距地或其他一些绝不可能变化的配置。通常，**该常量的名称全部使用大写，多个单词之间用下划线分割** 15 | 2. 普通的常量：使用和之前一样的命名即可 16 | 3. 在for循环中，循环变量不可以使用常量 -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/笔记.md: -------------------------------------------------------------------------------- 1 | # 5-5. 类的其他书写方式 2 | 3 | 1. 可计算的成员名 4 | 5 | 2. getter和setter 6 | 7 | Object.defineProperty 可定义某个对象成员属性的读取和设置 8 | 9 | 使用getter和setter控制的属性，不在原型上 10 | 11 | 3. 静态成员 12 | 13 | 构造函数本身的成员 14 | 15 | 使用static关键字定义的成员即静态成员 16 | 17 | 4. 字段初始化器（ES7） 18 | 19 | 注意： 20 | 21 | 1). 使用static的字段初始化器，添加的是静态成员 22 | 2). 没有使用static的字段初始化器，添加的成员位于对象上 23 | 3). 箭头函数在字段初始化器位置上，指向当前对象 24 | 25 | 5. 类表达式 26 | 27 | 6. [扩展]装饰器（ES7）(Decorator) 28 | 29 | 横切关注点 30 | 31 | 装饰器的本质是一个函数 -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/index.js: -------------------------------------------------------------------------------- 1 | const obj1 = { 2 | name: "成哥", 3 | age: 18, 4 | loves: ["邓嫂", "成嫂1", "成嫂2"], 5 | address: { 6 | country: "中国", 7 | province: "黑龙江", 8 | city: "哈尔滨" 9 | } 10 | } 11 | 12 | // 浅克隆到obj2 13 | const obj2 = { 14 | ...obj1, 15 | name: "邓哥", 16 | address: { 17 | ...obj1.address 18 | }, 19 | loves: [...obj1.loves, "成嫂3"] 20 | }; 21 | 22 | console.log(obj2) 23 | 24 | console.log(obj1.loves === obj2.loves) -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/笔记.md: -------------------------------------------------------------------------------- 1 | # 8-5. Promise的串联 2 | 3 | 当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联 4 | 5 | Promise对象中，无论是then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象，它的状态满足下面的规则： 6 | 7 | 1. 如果当前的Promise是未决的，得到的新的Promise是挂起状态 8 | 2. 如果当前的Promise是已决的，会运行响应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved状态数据，应用到新的Promise中；如果后续处理函数发生错误，则把返回值作为rejected状态数据，应用到新的Promise中。 9 | 10 | **后续的Promise一定会等到前面的Promise有了后续处理结果后，才会变成已决状态** 11 | 12 | 如果前面的Promise的后续处理，返回的是一个Promise，则返回的新的Promise状态和后续处理返回的Promise状态保持一致。 -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 3.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(type, name, age, sex) { 3 | this.type = type; 4 | this.name = name; 5 | this.age = age; 6 | this.sex = sex; 7 | } 8 | 9 | print() { 10 | console.log(`【种类】：${this.type}`); 11 | console.log(`【名字】：${this.name}`); 12 | console.log(`【年龄】：${this.age}`); 13 | console.log(`【性别】：${this.sex}`); 14 | } 15 | } 16 | 17 | var a = new Animal("狗", "旺财", 3, "男"); 18 | -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Sky.js: -------------------------------------------------------------------------------- 1 | const skyDom = document.querySelector(".sky"); 2 | const skyStyles = getComputedStyle(skyDom); 3 | const skyWidth = parseFloat(skyStyles.width); 4 | const skyHeight = parseFloat(skyStyles.height); 5 | 6 | class Sky extends Rectangle { 7 | constructor() { 8 | super(skyWidth, skyHeight, 0, 0, -50, 0, skyDom); 9 | } 10 | 11 | onMove() { 12 | if (this.left <= -skyWidth / 2) { 13 | this.left = 0; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /4. 函数/4-4. 剩余参数和展开运算符练习/maxmin.js: -------------------------------------------------------------------------------- 1 | function getValues() { 2 | const numbers = []; 3 | const inps = document.querySelectorAll("input") 4 | for (let i = 0; i < inps.length; i++) { 5 | numbers.push(+inps[i].value) 6 | } 7 | return numbers; 8 | } 9 | 10 | const btn = document.querySelector("button") 11 | 12 | btn.onclick = function () { 13 | const numbers = getValues(); //得到文本框中的所有数字形成的数组 14 | spanmax.innerText = Math.max(...numbers) 15 | spanmin.innerText = Math.min(...numbers) 16 | } -------------------------------------------------------------------------------- /2. 块级绑定/2-3. 使用const声明常量/index.js: -------------------------------------------------------------------------------- 1 | // const a = 1; 2 | // a = 1; 3 | // console.log(a) 4 | 5 | 6 | // const div = document.getElementById("game"); 7 | // //一般来说，div变量是不会更改的 8 | 9 | 10 | // const a = { 11 | // name: "kevin", 12 | // age: 123 13 | // }; 14 | // a.name = "abc"; 15 | // console.log(a) 16 | 17 | // const PI = 3.14; 18 | // const MOON_EARTH_DISTANCE = 3245563424; //月地距离 19 | 20 | var obj = { 21 | name:"kevin", 22 | age:1 23 | } 24 | 25 | for (const prop in obj) { 26 | console.log(prop) 27 | } -------------------------------------------------------------------------------- /11. 更多的集合类型/11-1. set集合/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-5. [扩展]模板字符串标记/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

11 | 12 | 13 |

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/index copy.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | count: 0, 3 | start: function () { 4 | setInterval(() => { 5 | this.count++; 6 | console.log(this.count); 7 | }, 1000) 8 | }, 9 | regEvent: function () { 10 | window.onclick = () => { 11 | console.log(this.count); 12 | } 13 | }, 14 | print: function () { 15 | console.log(this) 16 | console.log(this.count) 17 | } 18 | } 19 | 20 | // obj.start(); 21 | // obj.regEvent(); 22 | obj.print(); -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index.js: -------------------------------------------------------------------------------- 1 | class Test { 2 | 3 | @Obsolete 4 | print() { 5 | console.log("print方法") 6 | } 7 | } 8 | 9 | function Obsolete(target, methodName, descriptor) { 10 | // function Test 11 | // print 12 | // { value: function print(){}, ... } 13 | // console.log(target, methodName, descriptor); 14 | const oldFunc = descriptor.value 15 | descriptor.value = function (...args) { 16 | console.warn(`${methodName}方法已过时`); 17 | oldFunc.apply(this, args); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/index copy 2.js: -------------------------------------------------------------------------------- 1 | const obj1 = { 2 | a: 123, 3 | b: 456, 4 | c: "abc" 5 | } 6 | 7 | const obj2 = { 8 | a: 789, 9 | d: "kkk" 10 | } 11 | 12 | /* 13 | { 14 | a: 789, 15 | b: 456, 16 | c: "abc", 17 | d: "kkk" 18 | } 19 | */ 20 | 21 | //将obj2的数据，覆盖到obj1，并且会对obj1产生改动，然后返回obj1 22 | // const obj = Object.assign(obj1, obj2); 23 | 24 | 25 | const obj = Object.assign({}, obj1, obj2); 26 | 27 | console.log(obj) 28 | 29 | console.log(obj===obj1) 30 | 31 | console.log(obj1) 32 | 33 | console.log(obj2) -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy.js: -------------------------------------------------------------------------------- 1 | const printName = "print"; 2 | 3 | class Animal { 4 | constructor(type, name, age, sex) { 5 | this.type = type; 6 | this.name = name; 7 | this.age = age; 8 | this.sex = sex; 9 | } 10 | 11 | [printName]() { 12 | console.log(`【种类】：${this.type}`); 13 | console.log(`【名字】：${this.name}`); 14 | console.log(`【年龄】：${this.age}`); 15 | console.log(`【性别】：${this.sex}`); 16 | } 17 | } 18 | 19 | const a = new Animal("狗", "旺财", 3, "男"); 20 | a[printName](); -------------------------------------------------------------------------------- /13. 增强的数组功能/13-3. [扩展]ArrayBuffer/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-3. [扩展]ArrayBuffer/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /5. 对象/5-6. 类的继承/笔记.md: -------------------------------------------------------------------------------- 1 | # 5-6. 类的继承 2 | 3 | 如果两个类A和B，如果可以描述为：B 是 A，则，A和B形成继承关系 4 | 5 | 如果B是A，则： 6 | 7 | 1. B继承自A 8 | 2. A派生B 9 | 3. B是A的子类 10 | 4. A是B的父类 11 | 12 | 如果A是B的父类，则B会自动拥有A中的所有实例成员。 13 | 14 | 15 | 新的关键字： 16 | 17 | - extends：继承，用于类的定义 18 | - super 19 | - 直接当作函数调用，表示父类构造函数 20 | - 如果当作对象使用，则表示父类的原型 21 | 22 | 23 | 注意：ES6要求，如果定义了constructor，并且该类是子类，则必须在constructor的第一行手动调用父类的构造函数 24 | 25 | 如果子类不写constructor，则会有默认的构造器，该构造器需要的参数和父类一致，并且自动调用父类构造器 26 | 27 | 【冷知识】 28 | 29 | - 用JS制作抽象类 30 | - 抽象类：一般是父类，不能通过该类创建对象 31 | - 正常情况下，this的指向，this始终指向具体的类的对象 -------------------------------------------------------------------------------- /5. 对象/5-2. Object的新增API/笔记.md: -------------------------------------------------------------------------------- 1 | # 5-2. Object的新增API 2 | 3 | 1. Object.is 4 | 5 | 用于判断两个数据是否相等，基本上跟严格相等（===）是一致的，除了以下两点： 6 | 7 | 1) NaN和NaN相等 8 | 2) +0和-0不相等 9 | 10 | 2. Object.assign 11 | 12 | 用于混合对象 13 | 14 | 3. Object.getOwnPropertyNames 的枚举顺序 15 | 16 | Object.getOwnPropertyNames方法之前就存在，只不过，官方没有明确要求，对属性的顺序如何排序，如何排序，完全由浏览器厂商决定。 17 | 18 | ES6规定了该方法返回的数组的排序方式如下： 19 | 20 | - 先排数字，并按照升序排序 21 | - 再排其他，按照书写顺序排序 22 | 23 | 4. Object.setPrototypeOf 24 | 25 | 该函数用于设置某个对象的隐式原型 26 | 27 | 比如： Object.setPrototypeOf(obj1, obj2)， 28 | 相当于： ``` obj1.__proto__ = obj2 ``` -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/笔记.md: -------------------------------------------------------------------------------- 1 | # 8-1. 事件和回调函数的缺陷 2 | 3 | 我们习惯于使用传统的回调或事件处理来解决异步问题 4 | 5 | 事件：某个对象的属性是一个函数，当发生某一件事时，运行该函数 6 | 7 | ```js 8 | dom.onclick = function(){ 9 | 10 | } 11 | ``` 12 | 13 | 回调：运行某个函数以实现某个功能的时候，传入一个函数作为参数，当发生某件事的时候，会运行该函数。 14 | 15 | ```js 16 | dom.addEventListener("click", function(){ 17 | 18 | }) 19 | ``` 20 | 21 | 本质上，事件和回调并没有本质的区别，只是把函数放置的位置不同而已。 22 | 23 | 一直以来，该模式都运作良好。 24 | 25 | 直到前端工程越来越复杂... 26 | 27 | 目前，该模式主要面临以下两个问题： 28 | 29 | 1. 回调地狱：某个异步操作需要等待之前的异步操作完成，无论用回调还是事件，都会陷入不断的嵌套 30 | 2. 异步之间的联系：某个异步操作要等待多个异步操作的结果，对这种联系的处理，会让代码的复杂度剧增 -------------------------------------------------------------------------------- /8. 异步处理/8-6. [扩展]手写Promise/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /5. 对象/5-4. 类：构造函数的语法糖/index.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(type, name, age, sex) { 3 | this.type = type; 4 | this.name = name; 5 | this.age = age; 6 | this.sex = sex; 7 | } 8 | 9 | print() { 10 | console.log(`【种类】：${this.type}`); 11 | console.log(`【名字】：${this.name}`); 12 | console.log(`【年龄】：${this.age}`); 13 | console.log(`【性别】：${this.sex}`); 14 | } 15 | } 16 | 17 | const a = new Animal("狗", "旺财", 3, "男"); 18 | a.print(); 19 | 20 | for (const prop in a) { 21 | console.log(prop) 22 | } -------------------------------------------------------------------------------- /6. 解构/6-1. 对象解构/index copy.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "kevin", 3 | age: 11, 4 | sex: "男", 5 | address: { 6 | province: "四川", 7 | city: "成都" 8 | } 9 | } 10 | 11 | // let name, age, sex, address; 12 | // name = user.name; 13 | // age = user.age; 14 | // sex = user.sex; 15 | // address = user.address; 16 | 17 | // let name, age, sex, address, abc; 18 | // ({ name, age, sex, address } = user); 19 | 20 | // 先定义5个变量，然后从对象中读取同名属性，放到变量中 21 | let { name, age, sex, address, abc = 123 } = user 22 | 23 | console.log(name, age, sex, address, abc) -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Land.js: -------------------------------------------------------------------------------- 1 | const landDom = document.querySelector(".land"); 2 | const landStyles = getComputedStyle(landDom); 3 | const landWidth = parseFloat(landStyles.width); 4 | const landHeight = parseFloat(landStyles.height); 5 | const landTop = parseFloat(landStyles.top); 6 | 7 | class Land extends Rectangle { 8 | constructor(speed) { 9 | super(landWidth, landHeight, 0, landTop, speed, 0, landDom); 10 | } 11 | 12 | onMove() { 13 | if (this.left <= -landWidth / 2) { 14 | this.left = 0; 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-2. [扩展]类型化数组/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-5. [扩展]模板字符串标记/index copy.js: -------------------------------------------------------------------------------- 1 | var love1 = "秋葵"; 2 | var love2 = "香菜"; 3 | 4 | var text = myTag`邓哥喜欢${love1}，邓哥也喜欢${love2}。`; 5 | 6 | //相当于： 7 | // text = myTag(["邓哥喜欢", "，邓哥也喜欢", "。"], "秋葵", "香菜") 8 | 9 | function myTag(parts) { 10 | const values = Array.prototype.slice.apply(arguments).slice(1); 11 | let str = ""; 12 | for (let i = 0; i < values.length; i++) { 13 | str += `${parts[i]}：${values[i]}`; 14 | if (i === values.length - 1) { 15 | str += parts[i + 1]; 16 | } 17 | } 18 | return str; 19 | } 20 | 21 | console.log(text); -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/index copy 4.js: -------------------------------------------------------------------------------- 1 | class Temperature { 2 | constructor(degree) { 3 | this.degree = degree; 4 | } 5 | 6 | [Symbol.toPrimitive](type) { 7 | if (type === "default") { 8 | return this.degree + "摄氏度"; 9 | } 10 | else if (type === "number") { 11 | return this.degree; 12 | } 13 | else if (type === "string") { 14 | return this.degree + "℃"; 15 | } 16 | } 17 | } 18 | 19 | const t = new Temperature(30); 20 | 21 | console.log(t + "!"); 22 | console.log(t / 2); 23 | console.log(String(t)); -------------------------------------------------------------------------------- /12. 代理与反射/12-2. Reflect/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-2. [扩展]类型化数组/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /5. 对象/5-4. 类：构造函数的语法糖/oldconstructor.js: -------------------------------------------------------------------------------- 1 | //面向对象中，将 下面对一个对象的所有成员的定义，统称为类 2 | 3 | //构造函数 构造器 4 | function Animal(type, name, age, sex) { 5 | this.type = type; 6 | this.name = name; 7 | this.age = age; 8 | this.sex = sex; 9 | } 10 | 11 | //定义实例方法（原型方法） 12 | Animal.prototype.print = function () { 13 | console.log(`【种类】：${this.type}`); 14 | console.log(`【名字】：${this.name}`); 15 | console.log(`【年龄】：${this.age}`); 16 | console.log(`【性别】：${this.sex}`); 17 | } 18 | 19 | const a = new Animal("狗", "旺财", 3, "男"); 20 | a.print(); 21 | 22 | for (const prop in a) { 23 | console.log(prop) 24 | } -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-2. 可迭代协议与for-of循环/笔记.md: -------------------------------------------------------------------------------- 1 | # 可迭代协议 与 for-of 循环 2 | 3 | ## 可迭代协议 4 | 5 | **概念回顾** 6 | 7 | - 迭代器(iterator)：一个具有next方法的对象，next方法返回下一个数据并且能指示是否迭代完成 8 | - 迭代器创建函数（iterator creator）：一个返回迭代器的函数 9 | 10 | **可迭代协议** 11 | 12 | ES6规定，如果一个对象具有知名符号属性```Symbol.iterator```，并且属性值是一个迭代器创建函数，则该对象是可迭代的（iterable） 13 | 14 | > 思考：如何知晓一个对象是否是可迭代的？ 15 | > 思考：如何遍历一个可迭代对象？ 16 | 17 | ## for-of 循环 18 | 19 | for-of 循环用于遍历可迭代对象，格式如下 20 | 21 | ```js 22 | //迭代完成后循环结束 23 | for(const item in iterable){ 24 | //iterable：可迭代对象 25 | //item：每次迭代得到的数据 26 | } 27 | ``` 28 | 29 | ## 展开运算符与可迭代对象 30 | 31 | 展开运算符可以作用于可迭代对象，这样，就可以轻松的将可迭代对象转换为数组。 -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-1. 迭代器/笔记.md: -------------------------------------------------------------------------------- 1 | # 迭代器 2 | 3 | ## 背景知识 4 | 5 | 1. 什么是迭代？ 6 | 7 | 从一个数据集合中按照一定的顺序，不断取出数据的过程 8 | 9 | 2. 迭代和遍历的区别？ 10 | 11 | 迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完 12 | 13 | 遍历强调的是要把整个数据依次全部取出 14 | 15 | 3. 迭代器 16 | 17 | 对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象 18 | 19 | 4. 迭代模式 20 | 21 | 一种设计模式，用于统一迭代过程，并规范了迭代器规格： 22 | 23 | - 迭代器应该具有得到下一个数据的能力 24 | - 迭代器应该具有判断是否还有后续数据的能力 25 | 26 | ## JS中的迭代器 27 | 28 | JS规定，如果一个对象具有next方法，并且该方法返回一个对象，该对象的格式如下： 29 | 30 | ```js 31 | {value: 值, done: 是否迭代完成} 32 | ``` 33 | 34 | 则认为该对象是一个迭代器 35 | 36 | 含义： 37 | 38 | - next方法：用于得到下一个数据 39 | - 返回的对象 40 | - value：下一个数据的值 41 | - done：boolean，是否迭代完成 -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/笔记.md: -------------------------------------------------------------------------------- 1 | # 7-1. 普通符号 2 | 3 | 符号是ES6新增的一个数据类型，它通过使用函数 ```Symbol(符号描述)``` 来创建 4 | 5 | 符号设计的初衷，是为了给对象设置私有属性 6 | 7 | 私有属性：只能在对象内部使用，外面无法使用 8 | 9 | 符号具有以下特点： 10 | 11 | - 没有字面量 12 | - 使用 typeof 得到的类型是 symbol 13 | - **每次调用 Symbol 函数得到的符号永远不相等，无论符号名是否相同** 14 | - 符号可以作为对象的属性名存在，这种属性称之为符号属性 15 | - 开发者可以通过精心的设计，让这些属性无法通过常规方式被外界访问 16 | - 符号属性是不能枚举的，因此在 for-in 循环中无法读取到符号属性，Object.keys 方法也无法读取到符号属性 17 | - Object.getOwnPropertyNames 尽管可以得到所有无法枚举的属性，但是仍然无法读取到符号属性 18 | - ES6 新增 Object.getOwnPropertySymbols 方法，可以读取符号 19 | - 符号无法被隐式转换，因此不能被用于数学运算、字符串拼接或其他隐式转换的场景，但符号可以显式的转换为字符串，通过 String 构造函数进行转换即可，console.log 之所以可以输出符号，是它在内部进行了显式转换 -------------------------------------------------------------------------------- /7. 符号/7-3. 知名符号/笔记.md: -------------------------------------------------------------------------------- 1 | # 7-3. 知名（公共、具名）符号 2 | 3 | 知名符号是一些具有特殊含义的共享符号，通过 Symbol 的静态属性得到 4 | 5 | ES6 延续了 ES5 的思想：减少魔法，暴露内部实现！ 6 | 7 | 因此，ES6 用知名符号暴露了某些场景的内部实现 8 | 9 | 1. Symbol.hasInstance 10 | 11 | 该符号用于定义构造函数的静态成员，它将影响 instanceof 的判定 12 | 13 | ```js 14 | 15 | obj instanceof A 16 | 17 | //等效于 18 | 19 | A[Symbol.hasInstance](obj) // Function.prototype[Symbol.hasInstance] 20 | 21 | ``` 22 | 23 | 2. [扩展] Symbol.isConcatSpreadable 24 | 25 | 该知名符号会影响数组的 concat 方法 26 | 27 | 3. [扩展] Symbol.toPrimitive 28 | 29 | 该知名符号会影响类型转换的结果 30 | 31 | 4. [扩展] Symbol.toStringTag 32 | 33 | 该知名符号会影响 Object.prototype.toString 的返回值 34 | 35 | 5. 其他知名符号 -------------------------------------------------------------------------------- /5. 对象/5-6. 类的继承/index copy.js: -------------------------------------------------------------------------------- 1 | function Animal(type, name, age, sex) { 2 | this.type = type; 3 | this.name = name; 4 | this.age = age; 5 | this.sex = sex; 6 | } 7 | Animal.prototype.print = function () { 8 | console.log(`【种类】：${this.type}`); 9 | console.log(`【名字】：${this.name}`); 10 | console.log(`【年龄】：${this.age}`); 11 | console.log(`【性别】：${this.sex}`); 12 | } 13 | 14 | function Dog(name, age, sex) { 15 | //借用父类的构造函数 16 | Animal.call(this, "犬类", name, age, sex); 17 | } 18 | 19 | Object.setPrototypeOf(Dog.prototype, Animal.prototype); 20 | 21 | const d = new Dog("旺财", 3, "公"); 22 | d.print(); 23 | console.log(d); -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /4. 函数/4-5. 明确函数的双重用途/index.js: -------------------------------------------------------------------------------- 1 | function Person(firstName, lastName) { 2 | //判断是否是使用new的方式来调用的函数 3 | 4 | // //过去的判断方式 5 | // if (!(this instanceof Person)) { 6 | // throw new Error("该函数没有使用new来调用") 7 | // } 8 | 9 | if (new.target === undefined) { 10 | throw new Error("该函数没有使用new来调用") 11 | } 12 | this.firstName = firstName; 13 | this.lastName = lastName; 14 | this.fullName = `${firstName} ${lastName}`; 15 | } 16 | 17 | const p1 = new Person("袁", "进"); 18 | console.log(p1) 19 | 20 | 21 | 22 | const p2 = Person("袁", "进"); 23 | console.log(p2); 24 | 25 | const p3 = Person.call(p1, "袁", "进") 26 | console.log(p3); -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-6. [扩展]WeakSet和WeakMap/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /2. 块级绑定/2-2. 使用let声明变量/笔记.md: -------------------------------------------------------------------------------- 1 | ## 使用let声明变量 2 | 3 | ES6不仅引入let关键字用于解决变量声明的问题，同时引入了块级作用域的概念 4 | 5 | 块级作用域：代码执行时遇到花括号，会创建一个块级作用域，花括号结束，销毁块级作用域 6 | 7 | 声明变量的问题 8 | 9 | 1. 全局变量挂载到全局对象：全局对象成员污染问题 10 | 11 | let声明的变量不会挂载到全局对象 12 | 13 | 2. 允许重复的变量声明：导致数据被覆盖 14 | 15 | let声明的变量，不允许当前作用域范围内重复声明 16 | 17 | 在块级作用域中用let定义的变量，在作用域外不能访问 18 | 19 | 3. 变量提升：怪异的数据访问、闭包问题 20 | 21 | 使用let不会有变量提升，因此，不能在定义let变量之前使用它 22 | 23 | 底层实现上，let声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区，则会报错：“Cannot access 'a' before initialization”。当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。 24 | 25 | 在循环中，用let声明的循环变量，会特殊处理，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域（每次循环，使用的是一个全新的循环变量） 26 | 27 | 在循环中使用let声明的循环变量，在循环结束后会销毁 28 | 29 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-1. set集合/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-3. [扩展]ArrayBuffer/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-4. [扩展]制作黑白图片/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /5. 对象/5-3. 面向对象简介/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 大象 3 | */ 4 | function Elephant() { 5 | 6 | } 7 | 8 | /** 9 | * 冰箱 10 | */ 11 | function Frige() { 12 | 13 | } 14 | 15 | Frige.prototype.openDoor = function () { 16 | 17 | } 18 | 19 | Frige.prototype.closeDoor = function () { 20 | 21 | } 22 | 23 | Frige.prototype.join = function(something){ 24 | this.openDoor(); 25 | //装东西 26 | 27 | this.closeDoor(); 28 | } 29 | 30 | //1. 冰箱门打开 31 | // var frig = new Frige(); 32 | // frig.openDoor(); 33 | 34 | // //2. 大象装进去 35 | // var ele = new Elephant(); 36 | // frig.join(ele); 37 | 38 | // //3. 冰箱门关上 39 | // frig.closeDoor(); 40 | 41 | var frig = new Frige(); 42 | 43 | frig.join(new Elephant()); -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /1. 概述/1-1. 概述/笔记.md: -------------------------------------------------------------------------------- 1 | # ES6 课程概述 2 | 3 | 1. ECMAScript、JavaScript、NodeJs，它们的区别是什么？ 4 | 5 | ECMAScript：简称ES，是一个语言标准（循环、判断、变量、数组等数据类型） 6 | 7 | JavaScript：运行在浏览器端的语言，该语言使用ES标准。 ES + web api = JavaScript 8 | 9 | NodeJs：运行在服务器端的语言，该语言使用ES标准。 ES + node api = JavaScript 10 | 11 | 12 | 无论JavaScript，还是NodeJs，它们都是ES的超集（super set） 13 | 14 | 2. ECMAScript有哪些关键的版本？ 15 | 16 | ES3.0： 1999 17 | 18 | ES5.0: 2009 19 | 20 | ES6.0: 2015, 从该版本开始，不再使用数字作为编号，而使用年份 21 | 22 | ES7.0: 2016 23 | 24 | 3. 为什么ES6如此重要？ 25 | 26 | ES6解决JS无法开发大型应用的语言层面的问题。 27 | 28 | 4. 如何应对兼容性问题？ 29 | 30 | 之后的课程会介绍如何解决 31 | 32 | 5. 学习本课程需要的前置知识有哪些？ 33 | 34 | HTML+CSS、JavaScript（ES 5） 35 | 36 | 6. 这套课程难不难？ 37 | 38 | 难度和《JavaScript基础》差不多 -------------------------------------------------------------------------------- /4. 函数/4-3. 展开运算符/index copy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 对所有数字求和 3 | * @param {...any} args 4 | */ 5 | function sum(...args) { 6 | let sum = 0; 7 | for (let i = 0; i < args.length; i++) { 8 | sum += args[i]; 9 | } 10 | return sum; 11 | } 12 | 13 | /** 14 | * 获取一个指定长度的随机数组成的数组 15 | * @param {*} length 16 | */ 17 | function getRandomNumbers(length) { 18 | const arr = []; 19 | for (let i = 0; i < length; i++) { 20 | arr.push(Math.random()); 21 | } 22 | return arr; 23 | } 24 | 25 | const numbers = getRandomNumbers(10); 26 | //将数组的每一项展开，依次作为参数传递，而不是把整个数组作为一个参数传递 27 | // sum(numbers) 28 | 29 | console.log(sum(...numbers))//相当于传递了10个参数 30 | console.log(sum(1, 3, ...numbers, 3, 5)) -------------------------------------------------------------------------------- /4. 函数/4-1. 参数默认值/index copy 2.js: -------------------------------------------------------------------------------- 1 | function getContainer() { 2 | console.log("abc"); 3 | return document.getElementById("container"); 4 | } 5 | 6 | /** 7 | * 创建一个元素 8 | * @param {*} name 元素的名称 9 | * @param {*} container 元素的父元素 10 | * @param {*} content 元素的内容 11 | */ 12 | function createElement(name = "div", container = getContainer(), content = "") { 13 | const ele = document.createElement(name) 14 | if (content) { 15 | ele.innerHTML = content; 16 | } 17 | container.appendChild(ele); 18 | } 19 | 20 | createElement(undefined, undefined, "手动阀手动阀十分") 21 | createElement(undefined, undefined, "234242342424") 22 | createElement(undefined, document.getElementById("container"), "234242342424") -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /12. 代理与反射/12-1. [回顾]属性描述符/笔记.md: -------------------------------------------------------------------------------- 1 | # 属性描述符 2 | 3 | Property Descriptor 属性描述符 是一个普通对象，用于描述一个属性的相关信息 4 | 5 | 通过```Object.getOwnPropertyDescriptor(对象, 属性名)```可以得到一个对象的某个属性的属性描述符 6 | 7 | - value：属性值 8 | - configurable：该属性的描述符是否可以修改 9 | - enumerable：该属性是否可以被枚举 10 | - writable：该属性是否可以被重新赋值 11 | 12 | > ```Object.getOwnPropertyDescriptors(对象)```可以得到某个对象的所有属性描述符 13 | 14 | 如果需要为某个对象添加属性时 或 修改属性时， 配置其属性描述符，可以使用下面的代码: 15 | 16 | ```js 17 | Object.defineProperty(对象, 属性名, 描述符); 18 | Object.defineProperties(对象, 多个属性的描述符) 19 | ``` 20 | 21 | ## 存取器属性 22 | 23 | 属性描述符中，如果配置了 get 和 set 中的任何一个，则该属性，不再是一个普通属性，而变成了存取器属性。 24 | 25 | get 和 set配置均为函数，如果一个属性是存取器属性，则读取该属性时，会运行get方法，将get方法得到的返回值作为属性值；如果给该属性赋值，则会运行set方法。 26 | 27 | 存取器属性最大的意义，在于可以控制属性的读取和赋值。 -------------------------------------------------------------------------------- /13. 增强的数组功能/13-3. [扩展]ArrayBuffer/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-3. [扩展]手写set/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /6. 解构/6-3. 参数解构/index copy.js: -------------------------------------------------------------------------------- 1 | // function print(user) { 2 | // console.log(`姓名：${user.name}`) 3 | // console.log(`年龄：${user.age}`) 4 | // console.log(`性别：${user.sex}`) 5 | // console.log(`身份：${user.address.province}`) 6 | // console.log(`城市：${user.address.city}`) 7 | // } 8 | 9 | function print({ name, age, sex, address: { 10 | province, 11 | city 12 | } }) { 13 | console.log(`姓名：${name}`) 14 | console.log(`年龄：${age}`) 15 | console.log(`性别：${sex}`) 16 | console.log(`身份：${province}`) 17 | console.log(`城市：${city}`) 18 | } 19 | 20 | const user = { 21 | name: "kevin", 22 | age: 11, 23 | sex: "男", 24 | address: { 25 | province: "四川", 26 | city: "成都" 27 | } 28 | } 29 | print(user) -------------------------------------------------------------------------------- /11. 更多的集合类型/11-4. map集合/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 8.js: -------------------------------------------------------------------------------- 1 | const Hero = (() => { 2 | const getRandom = Symbol(); 3 | 4 | return class { 5 | constructor(attack, hp, defence) { 6 | this.attack = attack; 7 | this.hp = hp; 8 | this.defence = defence; 9 | } 10 | 11 | gongji() { 12 | //伤害：攻击力*随机数（0.8~1.1) 13 | const dmg = this.attack * this[getRandom](0.8, 1.1); 14 | console.log(dmg); 15 | } 16 | 17 | [getRandom](min, max) { //根据最小值和最大值产生一个随机数 18 | return Math.random() * (max - min) + min; 19 | } 20 | } 21 | })(); 22 | 23 | const h = new Hero(3, 6, 3); 24 | const sybs = Object.getOwnPropertySymbols(Hero.prototype); 25 | const prop = sybs[0]; 26 | console.log(h[prop](3, 5)) -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-5. [扩展]模板字符串标记/index.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById("container"); 2 | const txt = document.getElementById("txt"); 3 | const btn = document.getElementById("btn"); 4 | 5 | btn.onclick = function(){ 6 | container.innerHTML = safe`

7 | ${txt.value} 8 |

9 |

10 | ${txt.value} 11 |

12 | `; 13 | } 14 | 15 | function safe(parts){ 16 | const values = Array.prototype.slice.apply(arguments).slice(1); 17 | let str = ""; 18 | for (let i = 0; i < values.length; i++) { 19 | const v = values[i].replace(//g, ">"); 20 | str += parts[i] + v; 21 | if (i === values.length - 1) { 22 | str += parts[i + 1]; 23 | } 24 | } 25 | return str; 26 | } -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/笔记.md: -------------------------------------------------------------------------------- 1 | # 生成器 (Generator) 2 | 3 | 1. 什么是生成器？ 4 | 5 | 生成器是一个通过构造函数Generator创建的对象，生成器既是一个迭代器，同时又是一个可迭代对象 6 | 7 | 2. 如何创建生成器？ 8 | 9 | 生成器的创建，必须使用生成器函数（Generator Function） 10 | 11 | 3. 如何书写一个生成器函数呢？ 12 | 13 | ```js 14 | //这是一个生成器函数，该函数一定返回一个生成器 15 | function* method(){ 16 | 17 | } 18 | ``` 19 | 20 | 4. 生成器函数内部是如何执行的？ 21 | 22 | 生成器函数内部是为了给生成器的每次迭代提供的数据 23 | 24 | 每次调用生成器的next方法，将导致生成器函数运行到下一个yield关键字位置 25 | 26 | yield是一个关键字，该关键字只能在生成器函数内部使用，表达“产生”一个迭代数据。 27 | 28 | 5. 有哪些需要注意的细节？ 29 | 30 | 1). 生成器函数可以有返回值，返回值出现在第一次done为true时的value属性中 31 | 2). 调用生成器的next方法时，可以传递参数，传递的参数会交给yield表达式的返回值 32 | 3). 第一次调用next方法时，传参没有任何意义 33 | 4). 在生成器函数内部，可以调用其他生成器函数，但是要注意加上*号 34 | 35 | 36 | 6. 生成器的其他API 37 | 38 | - return方法：调用该方法，可以提前结束生成器函数，从而提前让整个迭代过程结束 39 | - throw方法：调用该方法，可以在生成器中产生一个错误 -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /9. FetchApi/9-2. 基本使用/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/改造计时器函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-2. [扩展]类型化数组/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-4. map集合/test copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /4. 函数/4-6. 箭头函数/笔记.md: -------------------------------------------------------------------------------- 1 | # 4-6. 箭头函数 2 | 3 | 回顾：this指向 4 | 5 | 1. 通过对象调用函数，this指向对象 6 | 2. 直接调用函数，this指向全局对象 7 | 3. 如果通过new调用函数，this指向新创建的对象 8 | 4. 如果通过apply、call、bind调用函数，this指向指定的数据 9 | 5. 如果是DOM事件函数，this指向事件源 10 | 11 | ## 使用语法 12 | 13 | 箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数 14 | 15 | 完整语法： 16 | 17 | ```js 18 | (参数1, 参数2, ...)=>{ 19 | //函数体 20 | } 21 | ``` 22 | 23 | 如果参数只有一个，可以省略小括号 24 | 25 | ```js 26 | 参数 => { 27 | 28 | } 29 | ``` 30 | 31 | 如果箭头函数只有一条返回语句，可以省略大括号，和return关键字 32 | 33 | ```js 34 | 参数 => 返回值 35 | ``` 36 | 37 | ## 注意细节 38 | 39 | - 箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target 40 | - 箭头函数没有原型 41 | - 箭头函数不能作用构造函数使用 42 | 43 | ## 应用场景 44 | 45 | 1. 临时性使用的函数，并不会可以调用它，比如： 46 | 1. 事件处理函数 47 | 2. 异步处理函数 48 | 3. 其他临时性的函数 49 | 2. 为了绑定外层this的函数 50 | 3. 在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数 -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-2. 可迭代协议与for-of循环/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-4. map集合/笔记.md: -------------------------------------------------------------------------------- 1 | # map集合 2 | 3 | 键值对（key value pair）数据集合的特点：键不可重复 4 | 5 | map集合专门用于存储多个键值对数据。 6 | 7 | 在map出现之前，我们使用的是对象的方式来存储键值对，键是属性名，值是属性值。 8 | 9 | 使用对象存储有以下问题： 10 | 11 | 1. 键名只能是字符串 12 | 2. 获取数据的数量不方便 13 | 3. 键名容易跟原型上的名称冲突 14 | 15 | 16 | 1. 如何创建map 17 | 18 | ```js 19 | new Map(); //创建一个空的map 20 | new Map(iterable); //创建一个具有初始内容的map，初始内容来自于可迭代对象每一次迭代的结果，但是，它要求每一次迭代的结果必须是一个长度为2的数组，数组第一项表示键，数组的第二项表示值 21 | ``` 22 | 23 | 2. 如何进行后续操作 24 | 25 | - size：只读属性，获取当前map中键的数量 26 | - set(键, 值)：设置一个键值对，键和值可以是任何类型 27 | - 如果键不存在，则添加一项 28 | - 如果键已存在，则修改它的值 29 | - 比较键的方式和set相同 30 | - get(键): 根据一个键得到对应的值 31 | - has(键)：判断某个键是否存在 32 | - delete(键)：删除指定的键 33 | - clear(): 清空map 34 | 35 | 36 | 3. 和数组互相转换 37 | 38 | 和set一样 39 | 40 | 4. 遍历 41 | 42 | - for-of，每次迭代得到的是一个长度为2的数组 43 | - forEach，通过回调函数遍历 44 | - 参数1：每一项的值 45 | - 参数2：每一项的键 46 | - 参数3：map本身 -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/笔记.md: -------------------------------------------------------------------------------- 1 | # [回顾]事件循环 2 | 3 | JS运行的环境称之为宿主环境。 4 | 5 | 执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。 6 | 7 | JS引擎永远执行的是执行栈的最顶部。 8 | 9 | 异步函数：某些函数不会立即执行，需要等到某个时机到达后才会执行，这样的函数称之为异步函数。比如事件处理函数。异步函数的执行时机，会被宿主环境控制。 10 | 11 | 浏览器宿主环境中包含5个线程： 12 | 13 | 1. JS引擎：负责执行执行栈的最顶部代码 14 | 2. GUI线程：负责渲染页面 15 | 3. 事件监听线程：负责监听各种事件 16 | 4. 计时线程：负责计时 17 | 5. 网络线程：负责网络通信 18 | 19 | 当上面的线程发生了某些事请，如果该线程发现，这件事情有处理程序，它会将该处理程序加入一个叫做事件队列的内存。当JS引擎发现，执行栈中已经没有了任何内容后，会将事件队列中的第一个函数加入到执行栈中执行。 20 | 21 | JS引擎对事件队列的取出执行方式，以及与宿主环境的配合，称之为事件循环。 22 | 23 | 24 | 事件队列在不同的宿主环境中有所差异，大部分宿主环境会将事件队列进行细分。在浏览器中，事件队列分为两种： 25 | 26 | - 宏任务（队列）：macroTask，计时器结束的回调、事件回调、http回调等等绝大部分异步函数进入宏队列 27 | - 微任务（队列）：MutationObserver，Promise产生的回调进入微队列 28 | 29 | > MutationObserver用于监听某个DOM对象的变化 30 | 31 | 当执行栈清空时，JS引擎首先会将微任务中的所有任务依次执行结束，如果没有微任务，则执行宏任务。 -------------------------------------------------------------------------------- /11. 更多的集合类型/11-1. set集合/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-1. set集合/笔记.md: -------------------------------------------------------------------------------- 1 | # set 集合 2 | 3 | > 一直以来，JS只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。 4 | 5 | **set用于存放不重复的数据** 6 | 7 | 1. 如何创建set集合 8 | 9 | ```js 10 | new Set(); //创建一个没有任何内容的set集合 11 | 12 | new Set(iterable); //创建一个具有初始内容的set集合，内容来自于可迭代对象每一次迭代的结果 13 | 14 | ``` 15 | 16 | 2. 如何对set集合进行后续操作 17 | 18 | - add(数据): 添加一个数据到set集合末尾，如果数据已存在，则不进行任何操作 19 | - set使用Object.is的方式判断两个数据是否相同，但是，针对+0和-0，set认为是相等 20 | - has(数据): 判断set中是否存在对应的数据 21 | - delete(数据)：删除匹配的数据，返回是否删除成功 22 | - clear()：清空整个set集合 23 | - size: 获取set集合中的元素数量，只读属性，无法重新赋值 24 | 25 | 3. 如何与数组进行相互转换 26 | 27 | ```js 28 | const s = new Set([x,x,x,x,x]); 29 | // set本身也是一个可迭代对象，每次迭代的结果就是每一项的值 30 | const arr = [...s]; 31 | ``` 32 | 33 | 4. 如何遍历 34 | 35 | 1). 使用for-of循环 36 | 2). 使用set中的实例方法forEach 37 | 38 | 注意：set集合中不存在下标，因此forEach中的回调的第二个参数和第一个参数是一致的，均表示set中的每一项 -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/笔记.md: -------------------------------------------------------------------------------- 1 | # Promise的其他api 2 | 3 | ## 原型成员 (实例成员) 4 | 5 | - then：注册一个后续处理函数，当Promise为resolved状态时运行该函数 6 | - catch：注册一个后续处理函数，当Promise为rejected状态时运行该函数 7 | - finally：[ES2018]注册一个后续处理函数（无参），当Promise为已决时运行该函数 8 | 9 | ## 构造函数成员 （静态成员） 10 | 11 | - resolve(数据)：该方法返回一个resolved状态的Promise，传递的数据作为状态数据 12 | - 特殊情况：如果传递的数据是Promise，则直接返回传递的Promise对象 13 | 14 | - reject(数据)：该方法返回一个rejected状态的Promise，传递的数据作为状态数据 15 | 16 | - all(iterable)：这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。 17 | 18 | - race(iterable)：当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象 -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 2.js: -------------------------------------------------------------------------------- 1 | // const hero = { 2 | // attack: 30, 3 | // hp: 300, 4 | // defence: 10, 5 | // gongji() { //攻击 6 | // //伤害：攻击力*随机数（0.8~1.1) 7 | // const dmg = this.attack * this.getRandom(0.8, 1.1); 8 | // console.log(dmg); 9 | // }, 10 | // getRandom(min, max) { //根据最小值和最大值产生一个随机数 11 | // return Math.random() * (max - min) + min; 12 | // } 13 | // } 14 | 15 | class Hero { 16 | constructor(attack, hp, defence) { 17 | this.attack = attack; 18 | this.hp = hp; 19 | this.defence = defence; 20 | } 21 | 22 | gongji() { 23 | //伤害：攻击力*随机数（0.8~1.1) 24 | const dmg = this.attack * this.getRandom(0.8, 1.1); 25 | console.log(dmg); 26 | } 27 | 28 | getRandom(min, max) { //根据最小值和最大值产生一个随机数 29 | return Math.random() * (max - min) + min; 30 | } 31 | } -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/笔记.md: -------------------------------------------------------------------------------- 1 | # Promise的基本使用 2 | 3 | ```js 4 | const pro = new Promise((resolve, reject)=>{ 5 | // 未决阶段的处理 6 | // 通过调用resolve函数将Promise推向已决阶段的resolved状态 7 | // 通过调用reject函数将Promise推向已决阶段的rejected状态 8 | // resolve和reject均可以传递最多一个参数，表示推向状态的数据 9 | }) 10 | 11 | pro.then(data=>{ 12 | //这是thenable函数，如果当前的Promise已经是resolved状态，该函数会立即执行 13 | //如果当前是未决阶段，则会加入到作业队列，等待到达resolved状态后执行 14 | //data为状态数据 15 | }, err=>{ 16 | //这是catchable函数，如果当前的Promise已经是rejected状态，该函数会立即执行 17 | //如果当前是未决阶段，则会加入到作业队列，等待到达rejected状态后执行 18 | //err为状态数据 19 | }) 20 | ``` 21 | 22 | **细节** 23 | 24 | 1. 未决阶段的处理函数是同步的，会立即执行 25 | 2. thenable和catchable函数是异步的，就算是立即执行，也会加入到事件队列中等待执行，并且，加入的队列是微队列 26 | 3. pro.then可以只添加thenable函数，pro.catch可以单独添加catchable函数 27 | 4. 在未决阶段的处理函数中，如果发生未捕获的错误，会将状态推向rejected，并会被catchable捕获 28 | 5. 一旦状态推向了已决阶段，无法再对状态做任何更改 29 | 6. **Promise并没有消除回调，只是让回调变得可控** -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 像素鸟 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |

17 | 回车键开始/暂停，空格键跳跃 18 |

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/data/students.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "张三", 4 | "age": 20, 5 | "gender": "男", 6 | "classId": 50 7 | }, 8 | { 9 | "id": 2, 10 | "name": "李四", 11 | "age": 18, 12 | "gender": "女", 13 | "classId": 50 14 | }, 15 | { 16 | "id": 3, 17 | "name": "王五", 18 | "age": 20, 19 | "gender": "男", 20 | "classId": 51 21 | }, 22 | { 23 | "id": 4, 24 | "name": "李华", 25 | "age": 16, 26 | "gender": "男", 27 | "classId": 51 28 | }, 29 | { 30 | "id": 5, 31 | "name": "韩梅梅", 32 | "age": 19, 33 | "gender": "女", 34 | "classId": 52 35 | }, 36 | { 37 | "id": 6, 38 | "name": "马冬梅", 39 | "age": 23, 40 | "gender": "女", 41 | "classId": 52 42 | } 43 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/data/students.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "张三", 4 | "age": 20, 5 | "gender": "男", 6 | "classId": 50 7 | }, 8 | { 9 | "id": 2, 10 | "name": "李四", 11 | "age": 18, 12 | "gender": "女", 13 | "classId": 50 14 | }, 15 | { 16 | "id": 3, 17 | "name": "王五", 18 | "age": 20, 19 | "gender": "男", 20 | "classId": 51 21 | }, 22 | { 23 | "id": 4, 24 | "name": "李华", 25 | "age": 16, 26 | "gender": "男", 27 | "classId": 51 28 | }, 29 | { 30 | "id": 5, 31 | "name": "韩梅梅", 32 | "age": 19, 33 | "gender": "女", 34 | "classId": 52 35 | }, 36 | { 37 | "id": 6, 38 | "name": "马冬梅", 39 | "age": 23, 40 | "gender": "女", 41 | "classId": 52 42 | } 43 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/data/students.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "张三", 4 | "age": 20, 5 | "gender": "男", 6 | "classId": 50 7 | }, 8 | { 9 | "id": 2, 10 | "name": "李四", 11 | "age": 18, 12 | "gender": "女", 13 | "classId": 50 14 | }, 15 | { 16 | "id": 3, 17 | "name": "王五", 18 | "age": 20, 19 | "gender": "男", 20 | "classId": 51 21 | }, 22 | { 23 | "id": 4, 24 | "name": "李华", 25 | "age": 16, 26 | "gender": "男", 27 | "classId": 51 28 | }, 29 | { 30 | "id": 5, 31 | "name": "韩梅梅", 32 | "age": 19, 33 | "gender": "女", 34 | "classId": 52 35 | }, 36 | { 37 | "id": 6, 38 | "name": "马冬梅", 39 | "age": 23, 40 | "gender": "女", 41 | "classId": 52 42 | } 43 | ] -------------------------------------------------------------------------------- /8. 异步处理/8-4. Promise的串联/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-5. [扩展]手写map/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /8. 异步处理/8-6. [扩展]手写Promise/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-3. 生成器/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-6. [扩展]WeakSet和WeakMap/test copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 20 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /2. 块级绑定/2-1. 声明变量的问题/index.js: -------------------------------------------------------------------------------- 1 | // 1. 允许重复的变量声明：导致数据被覆盖 2 | 3 | // var a = 1; 4 | 5 | // function print(){ 6 | // console.log(a) 7 | // } 8 | 9 | // //假设这里有一千行代码 10 | 11 | // var a = 2; 12 | 13 | // print(); 14 | 15 | // 2. 变量提升：怪异的数据访问 16 | 17 | // if (Math.random() < 0.5) { 18 | // var a = "abc"; 19 | // console.log(a); 20 | // } 21 | // else { 22 | // console.log(a); 23 | // } 24 | 25 | // console.log(a); 26 | 27 | // 2. 变量提升：闭包问题 28 | // var div = document.getElementById("divButtons") 29 | 30 | // for (var i = 1; i <= 10; i++) { 31 | // var btn = document.createElement("button"); 32 | // btn.innerHTML = "按钮" + i; 33 | // div.appendChild(btn); 34 | // btn.onclick = function () { 35 | // console.log(i); //输出11 36 | // } 37 | // } 38 | 39 | // // 循环结束后，i：11 40 | 41 | // 3. 全局变量挂载到全局对象：全局对象成员污染问题 42 | 43 | var abc = "123"; 44 | console.log(window.abc); 45 | 46 | // var console = "abc"; 47 | 48 | // console.log(console) 49 | 50 | // var name = "abc"; 51 | 52 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-1. 迭代器/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /5. 对象/5-6. 类的继承/index copy 2.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(type, name, age, sex) { 3 | this.type = type; 4 | this.name = name; 5 | this.age = age; 6 | this.sex = sex; 7 | } 8 | 9 | print() { 10 | console.log(`【种类】：${this.type}`); 11 | console.log(`【名字】：${this.name}`); 12 | console.log(`【年龄】：${this.age}`); 13 | console.log(`【性别】：${this.sex}`); 14 | } 15 | 16 | jiao(){ 17 | throw new Error("动物怎么叫的？"); 18 | } 19 | } 20 | 21 | class Dog extends Animal { 22 | constructor(name, age, sex) { 23 | super("犬类", name, age, sex); 24 | // 子类特有的属性 25 | this.loves = "吃骨头"; 26 | } 27 | 28 | print(){ 29 | //调用父类的print 30 | super.print(); 31 | //自己特有的代码 32 | console.log(`【爱好】：${this.loves}`); 33 | } 34 | 35 | 36 | //同名方法，会覆盖父类 37 | jiao(){ 38 | console.log("旺旺！"); 39 | } 40 | } 41 | 42 | const d = new Dog("旺财", 3, "公"); 43 | d.print(); 44 | console.log(d) 45 | d.jiao(); -------------------------------------------------------------------------------- /13. 增强的数组功能/13-2. [扩展]类型化数组/笔记.md: -------------------------------------------------------------------------------- 1 | # [扩展]类型化数组 2 | 3 | ## 数字存储的前置知识 4 | 5 | 1. 计算机必须使用固定的位数来存储数字，无论存储的数字是大是小，在内存中占用的空间是固定的。 6 | 7 | 2. n位的无符号整数能表示的数字是2^n个，取值范围是：0 ~ 2^n - 1 8 | 9 | 3. n位的有符号整数能表示的数字是2^n个，取值范围是：-2^(n-1) ~ 2^(n-1) - 1 10 | 11 | 4. 浮点数表示法可以用于表示整数和小数，目前分为两种标准： 12 | 1. 32位浮点数：又称为单精度浮点数，它用1位表示符号，8位表示阶码，23位表示尾数 13 | 2. 64位浮点数：又称为双精度浮点数，它用1位表示符号，11位表示阶码，52位表示尾数 14 | 15 | 5. JS中的所有数字，均使用双精度浮点数保存 16 | 17 | ## 类型化数组 18 | 19 | 类型化数组：用于优化多个数字的存储 20 | 21 | 具体分为： 22 | 23 | - Int8Array： 8位有符号整数（-128 ~ 127） 24 | - Uint8Array： 8位无符号整数（0 ~ 255） 25 | - Int16Array: ... 26 | - Uint16Array: ... 27 | - Int32Array: ... 28 | - Uint32Array: ... 29 | - Float32Array: 30 | - Float64Array 31 | 32 | 1. 如何创建数组 33 | 34 | ```js 35 | 36 | new 数组构造函数(长度) 37 | 38 | 数组构造函数.of(元素...) 39 | 40 | 数组构造函数.from(可迭代对象) 41 | 42 | new 数组构造函数(其他类型化数组) 43 | 44 | ``` 45 | 46 | 47 | 2. 得到长度 48 | 49 | ```js 50 | 数组.length //得到元素数量 51 | 数组.byteLength //得到占用的字节数 52 | ``` 53 | 54 | 3. 其他的用法跟普通数组一致，但是： 55 | 56 | - 不能增加和删除数据，类型化数组的长度固定 57 | - 一些返回数组的方法，返回的数组是同类型化的新数组 -------------------------------------------------------------------------------- /5. 对象/5-5. 类的其他书写方式/index copy 2.js: -------------------------------------------------------------------------------- 1 | const printName = "print"; 2 | 3 | class Animal { 4 | constructor(type, name, age, sex) { 5 | this.type = type; 6 | this.name = name; 7 | this.age = age; 8 | this.sex = sex; 9 | } 10 | 11 | //创建一个age属性，并给它加上getter，读取该属性时，会运行该函数 12 | get age() { 13 | return this._age + "岁"; 14 | } 15 | 16 | //创建一个age属性，并给它加上setter，给该属性赋值时，会运行该函数 17 | set age(age) { 18 | if (typeof age !== "number") { 19 | throw new TypeError("age property must be a number"); 20 | } 21 | if (age < 0) { 22 | age = 0; 23 | } 24 | else if (age > 1000) { 25 | age = 1000; 26 | } 27 | this._age = age; 28 | } 29 | 30 | [printName]() { 31 | console.log(`【种类】：${this.type}`); 32 | console.log(`【名字】：${this.name}`); 33 | console.log(`【年龄】：${this.age}`); 34 | console.log(`【性别】：${this.sex}`); 35 | } 36 | } 37 | 38 | var a = new Animal("狗", "旺财", 3, "男"); 39 | -------------------------------------------------------------------------------- /12. 代理与反射/12-1. [回顾]属性描述符/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /3. 字符串和正则表达式/3-1. 更好的Unicode支持/index.js: -------------------------------------------------------------------------------- 1 | const text = "𠮷"; //占用了两个码元（32位） 2 | 3 | console.log("字符串长度：", text.length); 4 | console.log("使用正则测试：", /^.$/u.test(text)); 5 | console.log("得到第一个码元：", text.charCodeAt(0)); 6 | console.log("得到第二个码元：", text.charCodeAt(1)); 7 | 8 | //𠮷：\ud842\udfb7 9 | console.log("得到第一个码点：", text.codePointAt(0)); 10 | console.log("得到第二个码点：", text.codePointAt(1)); 11 | 12 | /** 13 | * 判断字符串char，是32位，还是16位 14 | * @param {*} char 15 | */ 16 | function is32bit(char, i) { 17 | //如果码点大于了16位二进制的最大值，则其是32位的 18 | return char.codePointAt(i) > 0xffff; 19 | } 20 | 21 | /** 22 | * 得到一个字符串码点的真实长度 23 | * @param {*} str 24 | */ 25 | function getLengthOfCodePoint(str) { 26 | var len = 0; 27 | for (let i = 0; i < str.length; i++) { 28 | //i在索引码元 29 | if (is32bit(str, i)) { 30 | //当前字符串，在i这个位置，占用了两个码元 31 | i++; 32 | } 33 | len++; 34 | } 35 | return len; 36 | } 37 | 38 | console.log("𠮷是否是32位的：", is32bit("𠮷", 0)) 39 | console.log("ab𠮷ab的码点长度：", getLengthOfCodePoint("ab𠮷ab")) -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/回调地狱1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 |

17 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-1. 迭代器/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /12. 代理与反射/12-1. [回顾]属性描述符/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-2. 可迭代协议与for-of循环/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
7
19 |
8
20 |
9
21 |
10
22 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /12. 代理与反射/12-6. 应用-可验证的函数参数/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /9. FetchApi/9-3. Request对象/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /2. 块级绑定/2-2. 使用let声明变量/index.js: -------------------------------------------------------------------------------- 1 | // let a = 123; 2 | 3 | // console.log(window.a) 4 | 5 | 6 | // let a = 123; 7 | 8 | // let a = 456; // 检查到，当前作用域（全局作用域）已声明了变量a 9 | 10 | 11 | // let a = 123; 12 | 13 | // function test(){ 14 | // let a = 456; 15 | // console.log(a) 16 | // } 17 | 18 | // test(); 19 | 20 | 21 | // let a = 123; //全局作用域定义a 22 | 23 | // { 24 | // let a = 456; //块级作用域定义a 25 | // console.log(a); //使用的是块级作用域中的a 26 | // } 27 | 28 | // console.log(a) 29 | 30 | // if (Math.random() < 0.5) { 31 | // let a = 123; //定义在当前块级作用域 32 | // console.log(a) //当前块级作用域中的a 33 | // } 34 | // else { 35 | // //这是另外一个块级作用域，该作用域中找不到a 36 | // console.log(a) 37 | // } 38 | 39 | // console.log(a); 40 | 41 | 42 | 43 | // console.log(a) 44 | // let a = 123; 45 | 46 | 47 | let div = document.getElementById("divButtons"); 48 | 49 | for (let i = 1; i <= 10; i++) { 50 | let button = document.createElement("button") 51 | button.innerHTML = "按钮" + i; 52 | button.onclick = function () { 53 | console.log(i) //使用的是当前作用域中的i 54 | } 55 | div.appendChild(button) 56 | } -------------------------------------------------------------------------------- /5. 对象/5-6. 类的继承/index.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(type, name, age, sex) { 3 | if (new.target === Animal) { 4 | throw new TypeError("你不能直接创建Animal的对象，应该通过子类创建") 5 | } 6 | this.type = type; 7 | this.name = name; 8 | this.age = age; 9 | this.sex = sex; 10 | } 11 | 12 | print() { 13 | console.log(`【种类】：${this.type}`); 14 | console.log(`【名字】：${this.name}`); 15 | console.log(`【年龄】：${this.age}`); 16 | console.log(`【性别】：${this.sex}`); 17 | } 18 | 19 | jiao() { 20 | throw new Error("动物怎么叫的？"); 21 | } 22 | } 23 | 24 | class Dog extends Animal { 25 | constructor(name, age, sex) { 26 | super("犬类", name, age, sex); 27 | // 子类特有的属性 28 | this.loves = "吃骨头"; 29 | } 30 | 31 | print() { 32 | //调用父类的print 33 | super.print(); 34 | //自己特有的代码 35 | console.log(`【爱好】：${this.loves}`); 36 | } 37 | 38 | 39 | //同名方法，会覆盖父类 40 | jiao() { 41 | console.log("旺旺！"); 42 | } 43 | } 44 | 45 | //下面的代码逻辑有误 46 | const a = new Dog("旺财", 3, "公") 47 | a.print(); -------------------------------------------------------------------------------- /11. 更多的集合类型/11-2. set应用/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /12. 代理与反射/12-2. Reflect/笔记.md: -------------------------------------------------------------------------------- 1 | # Reflect 2 | 3 | 1. Reflect是什么？ 4 | 5 | Reflect是一个内置的JS对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些JS底层功能 6 | 7 | 由于它类似于其他语言的**反射**，因此取名为Reflect 8 | 9 | 2. 它可以做什么？ 10 | 11 | 使用Reflect可以实现诸如 属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中 等等功能 12 | 13 | 3. 这些功能不是已经存在了吗？为什么还需要用Reflect实现一次？ 14 | 15 | 有一个重要的理念，在ES5就被提出：减少魔法、让代码更加纯粹 16 | 17 | 这种理念很大程度上是受到函数式编程的影响 18 | 19 | ES6进一步贯彻了这种理念，它认为，对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种魔法，因此，需要将它们提取出来，形成一个正常的API，并高度聚合到某个对象中，于是，就造就了Reflect对象 20 | 21 | 因此，你可以看到Reflect对象中有很多的API都可以使用过去的某种语法或其他API实现。 22 | 23 | 4. 它里面到底提供了哪些API呢？ 24 | 25 | - Reflect.set(target, propertyKey, value): 设置对象target的属性propertyKey的值为value，等同于给对象的属性赋值 26 | - Reflect.get(target, propertyKey): 读取对象target的属性propertyKey，等同于读取对象的属性值 27 | - Reflect.apply(target, thisArgument, argumentsList)：调用一个指定的函数，并绑定this和参数列表。等同于函数调用 28 | - Reflect.deleteProperty(target, propertyKey)：删除一个对象的属性 29 | - Reflect.defineProperty(target, propertyKey, attributes)：类似于Object.defineProperty，不同的是如果配置出现问题，返回false而不是报错 30 | - Reflect.construct(target, argumentsList)：用构造函数的方式创建一个对象 31 | - Reflect.has(target, propertyKey): 判断一个对象是否拥有一个属性 32 | - 其他API：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /12. 代理与反射/12-6. 应用-可验证的函数参数/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /4. 函数/4-4. 剩余参数和展开运算符练习/maxmin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |
22 |

23 | 24 |

25 |

26 |

最大值：

27 |

最小值：

28 |

29 | 30 | 31 | -------------------------------------------------------------------------------- /12. 代理与反射/12-2. Reflect/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /7. 符号/7-1. 普通符号/index copy 6.js: -------------------------------------------------------------------------------- 1 | // const hero = (function () { 2 | // const getRandom = Symbol(); 3 | 4 | // return { 5 | // attack: 30, 6 | // hp: 300, 7 | // defence: 10, 8 | // gongji() { //攻击 9 | // //伤害：攻击力*随机数（0.8~1.1) 10 | // const dmg = this.attack * this[getRandom](0.8, 1.1); 11 | // console.log(dmg); 12 | // }, 13 | // [getRandom](min, max) { //根据最小值和最大值产生一个随机数 14 | // return Math.random() * (max - min) + min; 15 | // } 16 | // } 17 | // })() 18 | 19 | // console.log(hero); 20 | 21 | const Hero = (() => { 22 | const getRandom = Symbol(); 23 | 24 | return class { 25 | constructor(attack, hp, defence) { 26 | this.attack = attack; 27 | this.hp = hp; 28 | this.defence = defence; 29 | } 30 | 31 | gongji() { 32 | //伤害：攻击力*随机数（0.8~1.1) 33 | const dmg = this.attack * this[getRandom](0.8, 1.1); 34 | console.log(dmg); 35 | } 36 | 37 | [getRandom](min, max) { //根据最小值和最大值产生一个随机数 38 | return Math.random() * (max - min) + min; 39 | } 40 | } 41 | })(); 42 | 43 | const h = new Hero(3, 6, 3); 44 | console.log(h); -------------------------------------------------------------------------------- /13. 增强的数组功能/13-1. 新增的数组API/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-4. [扩展]制作黑白图片/效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Rectangle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 矩形类，可以移动 3 | * 属性：宽度、高度、横坐标、纵坐标、横向速度、纵向速度、对应的dom对象 4 | * xSpeed：横向速度，单位（像素/秒），正数是向右，负数向左 5 | * ySpeed：纵向速度，单位（像素/秒），正数是向下，负数向上 6 | */ 7 | class Rectangle { 8 | constructor(width, height, left, top, xSpeed, ySpeed, dom) { 9 | this.width = width; 10 | this.height = height; 11 | this.left = left; 12 | this.top = top; 13 | this.xSpeed = xSpeed; 14 | this.ySpeed = ySpeed; 15 | this.dom = dom; 16 | this.render(); 17 | } 18 | 19 | render() { 20 | this.dom.style.width = this.width + "px"; 21 | this.dom.style.height = this.height + "px"; 22 | this.dom.style.left = this.left + "px"; 23 | this.dom.style.top = this.top + "px"; 24 | } 25 | 26 | /** 27 | * 按照矩形的速度，和指定的时间，移动矩形 28 | * @param {*} duration 单位：秒 29 | */ 30 | move(duration) { 31 | const xDis = this.xSpeed * duration; //横向的距离 32 | const yDis = this.ySpeed * duration; //纵向的距离 33 | this.left = this.left + xDis; 34 | this.top = this.top + yDis; 35 | 36 | //可能会发生一些事 37 | if (this.onMove) { 38 | //每次移动后，渲染前，均会调用该方法 39 | this.onMove(); //是否存在onMove方法，如果存在，则调用 40 | } 41 | 42 | this.render(); //重新渲染 43 | } 44 | } -------------------------------------------------------------------------------- /8. 异步处理/8-0. [回顾]事件循环/test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 15 | 16 | 17 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /12. 代理与反射/12-3. Proxy/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /12. 代理与反射/12-5. 应用-偷懒的构造函数/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-1. 迭代器/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /4. 函数/4-4. 剩余参数和展开运算符练习/curry.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-2. 可迭代协议与for-of循环/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /8. 异步处理/8-2. 异步处理的通用模型/笔记.md: -------------------------------------------------------------------------------- 1 | # 8-2. 异步处理的通用模型 2 | 3 | ES官方参考了大量的异步场景，总结出了一套异步的通用模型，该模型可以覆盖几乎所有的异步场景，甚至是同步场景。 4 | 5 | 值得注意的是，为了兼容旧系统，ES6 并不打算抛弃掉过去的做法，只是基于该模型推出一个全新的 API，使用该API，会让异步处理更加的简洁优雅。 6 | 7 | 理解该 API，最重要的，是理解它的异步模型 8 | 9 | 1. ES6 将某一件可能发生异步操作的事情，分为两个阶段：**unsettled** 和 **settled** 10 | 11 | ![](assets/2019-10-18-17-28-30.png) 12 | 13 | - unsettled： 未决阶段，表示事情还在进行前期的处理，并没有发生通向结果的那件事 14 | - settled：已决阶段，事情已经有了一个结果，不管这个结果是好是坏，整件事情无法逆转 15 | 16 | 事情总是从 未决阶段 逐步发展到 已决阶段的。并且，未决阶段拥有控制何时通向已决阶段的能力。 17 | 18 | 2. ES6将事情划分为三种状态： pending、resolved、rejected 19 | 20 | - pending: 挂起，处于未决阶段，则表示这件事情还在挂起（最终的结果还没出来） 21 | - resolved：已处理，已决阶段的一种状态，表示整件事情已经出现结果，并是一个可以按照正常逻辑进行下去的结果 22 | - rejected：已拒绝，已决阶段的一种状态，表示整件事情已经出现结果，并是一个无法按照正常逻辑进行下去的结果，通常用于表示有一个错误 23 | 24 | 既然未决阶段有权力决定事情的走向，因此，未决阶段可以决定事情最终的状态！ 25 | 26 | 我们将 把事情变为resolved状态的过程叫做：**resolve**，推向该状态时，可能会传递一些数据 27 | 28 | 我们将 把事情变为rejected状态的过程叫做：**reject**，推向该状态时，同样可能会传递一些数据，通常为错误信息 29 | 30 | **始终记住，无论是阶段，还是状态，是不可逆的！** 31 | 32 | ![](assets/2019-10-18-18-10-18.png) 33 | 34 | 3. 当事情达到已决阶段后，通常需要进行后续处理，不同的已决状态，决定了不同的后续处理。 35 | 36 | - resolved状态：这是一个正常的已决状态，后续处理表示为 thenable 37 | - rejected状态：这是一个非正常的已决状态，后续处理表示为 catchable 38 | 39 | 后续处理可能有多个，因此会形成作业队列，这些后续处理会按照顺序，当状态到达后依次执行 40 | 41 | ![](assets/2019-10-18-18-10-38.png) 42 | 43 | 4. 整件事称之为Promise 44 | 45 | ![](assets/2019-10-18-18-15-52.png) 46 | 47 | **理解上面的概念，对学习Promise至关重要！** -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/index.css: -------------------------------------------------------------------------------- 1 | .game { 2 | width: 800px; 3 | height: 600px; 4 | border: 2px solid; 5 | margin: 0 auto; 6 | position: relative; 7 | overflow: hidden; 8 | } 9 | 10 | .game .sky { 11 | background: url("./img/sky.png"); 12 | height: 100%; 13 | width: 200%; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | } 18 | 19 | .game .land { 20 | background: url("./img/land.png"); 21 | height: 112px; 22 | width: 200%; 23 | position: absolute; 24 | left: 0; 25 | bottom: 0; 26 | } 27 | 28 | .game .bird { 29 | background: url("./img/bird.png"); 30 | position: absolute; 31 | width: 33px; 32 | height: 26px; 33 | left: 150px; 34 | top: 150px; 35 | } 36 | 37 | .game .bird.swing1{ 38 | background-position: -8px -10px; 39 | } 40 | 41 | .game .bird.swing2{ 42 | background-position: -60px -10px; 43 | } 44 | 45 | .game .bird.swing3{ 46 | background-position: -113px -10px; 47 | } 48 | 49 | .pipe{ 50 | position: absolute; 51 | height: 100px; 52 | width: 52px; 53 | left: 500px; 54 | } 55 | 56 | .pipe.up{ 57 | background: url("./img/pipeDown.png"); 58 | top: 0; 59 | background-position: bottom; 60 | } 61 | 62 | .pipe.down{ 63 | background: url("./img/pipeUp.png"); 64 | bottom: 112px; 65 | } 66 | 67 | .info{ 68 | text-align: center; 69 | } -------------------------------------------------------------------------------- /9. FetchApi/9-6. 文件上传/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-2. 可迭代协议与for-of循环/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/笔记.md: -------------------------------------------------------------------------------- 1 | # async 和 await 2 | 3 | async 和 await 是 ES2016 新增两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise。 4 | 5 | ## async 6 | 7 | 目的是简化在函数的返回值中对Promise的创建 8 | 9 | async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。 10 | 11 | ```js 12 | 13 | async function test(){ 14 | console.log(1); 15 | return 2; 16 | } 17 | 18 | //等效于 19 | 20 | function test(){ 21 | return new Promise((resolve, reject)=>{ 22 | console.log(1); 23 | resolve(2); 24 | }) 25 | } 26 | 27 | ``` 28 | 29 | ## await 30 | 31 | **await关键字必须出现在async函数中！！！！** 32 | 33 | await用在某个表达式之前，如果表达式是一个Promise，则得到的是thenable中的状态数据。 34 | 35 | ```js 36 | 37 | async function test1(){ 38 | console.log(1); 39 | return 2; 40 | } 41 | 42 | async function test2(){ 43 | const result = await test1(); 44 | console.log(result); 45 | } 46 | 47 | test2(); 48 | ``` 49 | 50 | 等效于 51 | 52 | ```js 53 | 54 | function test1(){ 55 | return new Promise((resolve, reject)=>{ 56 | console.log(1); 57 | resolve(2); 58 | }) 59 | } 60 | 61 | function test2(){ 62 | return new Promise((resolve, reject)=>{ 63 | test1().then(data => { 64 | const result = data; 65 | console.log(result); 66 | resolve(); 67 | }) 68 | }) 69 | } 70 | 71 | test2(); 72 | 73 | ``` 74 | 75 | 如果await的表达式不是Promise，则会将其使用Promise.resolve包装后按照规则运行 -------------------------------------------------------------------------------- /12. 代理与反射/12-1. [回顾]属性描述符/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /8. 异步处理/8-6. [扩展]手写Promise/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /9. FetchApi/9-4. Response对象/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /12. 代理与反射/12-4. 应用-观察者模式/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /6. 解构/6-2. 数组解构/作业题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /8. 异步处理/8-7. async和await/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /12. 代理与反射/12-1. [回顾]属性描述符/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

13 | 姓名： 14 | 15 |

16 |

17 | 年龄： 18 | 19 |

20 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /12. 代理与反射/12-4. 应用-观察者模式/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /13. 增强的数组功能/13-4. [扩展]制作黑白图片/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /9. FetchApi/9-2. 基本使用/笔记.md: -------------------------------------------------------------------------------- 1 | # 基本使用 2 | 3 | > 请求测试地址：http://101.132.72.36:5100/api/local 4 | 5 | 使用 ```fetch``` 函数即可立即向服务器发送网络请求 6 | 7 | ## 参数 8 | 9 | 该函数有两个参数： 10 | 11 | 1. 必填，字符串，请求地址 12 | 2. 选填，对象，请求配置 13 | 14 | **请求配置对象** 15 | 16 | - method：字符串，请求方法，默认值GET 17 | - headers：对象，请求头信息 18 | - body: 请求体的内容，必须匹配请求头中的 Content-Type 19 | - mode：字符串，请求模式 20 | - cors：默认值，配置为该值，会在请求头中加入 origin 和 referer 21 | - no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题 22 | - same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错 23 | - credentials: 如何携带凭据（cookie） 24 | - omit：默认值，不携带cookie 25 | - same-origin：请求同源地址时携带cookie 26 | - include：请求任何地址都携带cookie 27 | - cache：配置缓存模式 28 | - default: 表示fetch请求之前将检查下http的缓存. 29 | - no-store: 表示fetch请求将完全忽略http缓存的存在. 这意味着请求之前将不再检查下http的缓存, 拿到响应后, 它也不会更新http缓存. 30 | - no-cache: 如果存在缓存, 那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后, 它会更新http缓存. 31 | - reload: 表示fetch请求之前将忽略http缓存的存在, 但是请求拿到响应后, 它将主动更新http缓存. 32 | - force-cache: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的request. 33 | - only-if-cached: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在mode为”same-origin”时有效). 34 | 35 | ## 返回值 36 | 37 | fetch 函数返回一个 Promise 对象 38 | 39 | - 当收到服务器的返回结果后，Promise 进入resolved状态，状态数据为 Response 对象 40 | - 当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息 41 | 42 | **Response对象** 43 | 44 | - ok：boolean，当响应消息码在200~299之间时为true，其他为false 45 | - status：number，响应的状态码 46 | - text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。 47 | - blob()：用于处理二进制文件格式（比如图片或者电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。 48 | - json()：用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的promise。 49 | - redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。 -------------------------------------------------------------------------------- /10. 迭代器和生成器/10-4. 生成器应用-异步任务控制/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/ajax.js: -------------------------------------------------------------------------------- 1 | // 辅助函数,把传进来的对象拼接成url的字符串 2 | function toData(obj) { 3 | if (obj === null) { 4 | return obj; 5 | } 6 | let arr = []; 7 | for (let i in obj) { 8 | let str = i + "=" + obj[i]; 9 | arr.push(str); 10 | } 11 | return arr.join("&"); 12 | } 13 | // 封装Ajax 14 | function ajax(obj) { 15 | //指定提交方式的默认值 16 | obj.type = obj.type || "get"; 17 | //设置是否异步，默认为true(异步) 18 | obj.async = obj.async || true; 19 | //设置数据的默认值 20 | obj.data = obj.data || null; 21 | // 根据不同的浏览器创建XHR对象 22 | let xhr = null; 23 | if (window.XMLHttpRequest) { 24 | // 非IE浏览器 25 | xhr = new XMLHttpRequest(); 26 | } else { 27 | // IE浏览器 28 | xhr = new ActiveXObject("Microsoft.XMLHTTP"); 29 | } 30 | // 区分get和post,发送HTTP请求 31 | if (obj.type === "post") { 32 | xhr.open(obj.type, obj.url, obj.async); 33 | xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 34 | let data = toData(obj.data); 35 | xhr.send(data); 36 | } else { 37 | let url = obj.url + "?" + toData(obj.data); 38 | xhr.open(obj.type, url, obj.async); 39 | xhr.send(); 40 | } 41 | // 接收返回过来的数据 42 | xhr.onreadystatechange = function () { 43 | if (xhr.readyState === 4) { 44 | if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { 45 | if (obj.success) { 46 | // resolve 47 | obj.success(JSON.parse(xhr.responseText)); 48 | } 49 | } else { 50 | if (obj.error) { 51 | // reject 52 | obj.error(xhr.status); 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /11. 更多的集合类型/11-3. [扩展]手写set/mySet.js: -------------------------------------------------------------------------------- 1 | class MySet { 2 | constructor(iterator = []) { 3 | //验证是否是可迭代的对象 4 | if (typeof iterator[Symbol.iterator] !== "function") { 5 | throw new TypeError(`你提供的${iterator}不是一个可迭代的对象`) 6 | } 7 | this._datas = []; 8 | for (const item of iterator) { 9 | this.add(item); 10 | } 11 | } 12 | 13 | get size() { 14 | return this._datas.length; 15 | } 16 | 17 | add(data) { 18 | if (!this.has(data)) { 19 | this._datas.push(data); 20 | } 21 | } 22 | 23 | has(data) { 24 | for (const item of this._datas) { 25 | if (this.isEqual(data, item)) { 26 | return true; 27 | } 28 | } 29 | return false; 30 | } 31 | 32 | delete(data) { 33 | for (let i = 0; i < this._datas.length; i++) { 34 | const element = this._datas[i]; 35 | if (this.isEqual(element, data)) { 36 | //删除 37 | this._datas.splice(i, 1); 38 | return true; 39 | } 40 | } 41 | return false; 42 | } 43 | 44 | clear() { 45 | this._datas.length = 0; 46 | } 47 | 48 | *[Symbol.iterator]() { 49 | for (const item of this._datas) { 50 | yield item; 51 | } 52 | } 53 | 54 | forEach(callback) { 55 | for (const item of this._datas) { 56 | callback(item, item, this); 57 | } 58 | } 59 | 60 | /** 61 | * 判断两个数据是否相等 62 | * @param {*} data1 63 | * @param {*} data2 64 | */ 65 | isEqual(data1, data2) { 66 | if (data1 === 0 && data2 === 0) { 67 | return true; 68 | } 69 | return Object.is(data1, data2); 70 | } 71 | } -------------------------------------------------------------------------------- /9. FetchApi/9-5. Headers对象/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/异步之间的联系.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/回调地狱2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /8. 异步处理/8-5. Promise的其他api/异步之间的联系.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Bird.js: -------------------------------------------------------------------------------- 1 | const birdDom = document.querySelector(".bird"); 2 | const birdStyles = getComputedStyle(birdDom); 3 | const birdWidth = parseFloat(birdStyles.width); 4 | const birdHeight = parseFloat(birdStyles.height); 5 | const birdTop = parseFloat(birdStyles.top); 6 | const birdLeft = parseFloat(birdStyles.left); 7 | const gameDom = document.querySelector(".game"); 8 | const gameHeight = gameDom.clientHeight; 9 | 10 | class Bird extends Rectangle { 11 | constructor() { 12 | super(birdWidth, birdHeight, birdLeft, birdTop, 0, 0, birdDom); 13 | this.g = 1500; //向下的加速度，单位：像素/秒² 14 | //最大的y坐标 15 | this.maxY = gameHeight - landHeight - this.height; 16 | this.swingStatus = 1; //小鸟的翅膀状态 17 | this.timer = null; //翅膀煽动的计时器 18 | this.render(); 19 | } 20 | 21 | //开始煽动翅膀 22 | startSwing() { 23 | if (this.timer) { 24 | return; 25 | } 26 | this.timer = setInterval(() => { 27 | this.swingStatus++; 28 | if (this.swingStatus === 4) { 29 | this.swingStatus = 1; 30 | } 31 | this.render(); 32 | }, 200) 33 | } 34 | 35 | render() { 36 | super.render(); //重用父类渲染逻辑 37 | this.dom.className = `bird swing${this.swingStatus}`; 38 | } 39 | 40 | //停止煽动翅膀 41 | stopSwing() { 42 | clearInterval(this.timer); 43 | this.timer = null; 44 | } 45 | 46 | move(duration) { 47 | super.move(duration); //调用父类方法 48 | //根据加速度改变速度 49 | this.ySpeed += this.g * duration; 50 | } 51 | 52 | onMove() { 53 | //控制坐标范围 54 | if (this.top < 0) { 55 | this.top = 0; 56 | } 57 | else if (this.top > this.maxY) { 58 | this.top = this.maxY; 59 | } 60 | } 61 | 62 | //向上跳，直接给一个向上的速度 63 | jump() { 64 | this.ySpeed = -450; 65 | } 66 | } -------------------------------------------------------------------------------- /8. 异步处理/8-1. 事件和回调函数的缺陷/回调地狱3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Pipe.js: -------------------------------------------------------------------------------- 1 | const gameWidth = gameDom.clientWidth; 2 | 3 | class Pipe extends Rectangle { 4 | constructor(height, top, speed, dom) { 5 | super(52, height, gameWidth, top, speed, 0, dom); 6 | } 7 | 8 | onMove() { 9 | if (this.left < -this.width) { 10 | //移除dom 11 | this.dom.remove(); 12 | } 13 | } 14 | } 15 | 16 | function getRandom(min, max) { 17 | return Math.floor(Math.random() * (max - min) + min); 18 | } 19 | 20 | class PipePare { 21 | constructor(speed) { 22 | this.spaceHeight = 150; //空隙位置的高度 23 | this.minHeight = 80; //水管最小高度 24 | this.maxHeight = landTop - this.minHeight - this.spaceHeight; 25 | const upHeight = getRandom(this.minHeight, this.maxHeight); 26 | 27 | const upDom = document.createElement("div"); 28 | upDom.className = "pipe up"; 29 | 30 | this.upPipe = new Pipe(upHeight, 0, speed, upDom); //上水管 31 | const downHeight = landTop - upHeight - this.spaceHeight; 32 | const downTop = landTop - downHeight; 33 | 34 | const downDom = document.createElement("div"); 35 | downDom.className = "pipe down"; 36 | this.downPipe = new Pipe(downHeight, downTop, speed, downDom)//下水管 37 | 38 | gameDom.appendChild(upDom) 39 | gameDom.appendChild(downDom) 40 | } 41 | 42 | /** 43 | * 该柱子对是否已经移出了视野 44 | */ 45 | get useLess() { 46 | return this.upPipe.left < -this.upPipe.width; 47 | } 48 | 49 | move(duration) { 50 | this.upPipe.move(duration); 51 | this.downPipe.move(duration); 52 | } 53 | } 54 | 55 | /** 56 | * 用于不断的产生柱子对 57 | */ 58 | class PipePareProducer { 59 | constructor(speed) { 60 | this.speed = speed; 61 | this.pairs = []; 62 | this.timer = null; 63 | this.tick = 1500; 64 | } 65 | 66 | startProduce() { 67 | if (this.timer) { 68 | return; 69 | } 70 | this.timer = setInterval(() => { 71 | this.pairs.push(new PipePare(this.speed)); 72 | //移除掉用不到的柱子 73 | for (let i = 0; i < this.pairs.length; i++) { 74 | var pair = this.pairs[i]; 75 | if (pair.useLess) { 76 | //没用的柱子对 77 | this.pairs.splice(i, 1); 78 | i--; 79 | } 80 | } 81 | }, this.tick) 82 | } 83 | 84 | stopProduce() { 85 | clearInterval(this.timer); 86 | this.timer = null; 87 | } 88 | } -------------------------------------------------------------------------------- /8. 异步处理/8-3. Promise的基本使用/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /11. 更多的集合类型/11-5. [扩展]手写map/myMap.js: -------------------------------------------------------------------------------- 1 | class MyMap { 2 | constructor(iterable = []) { 3 | //验证是否是可迭代的对象 4 | if (typeof iterable[Symbol.iterator] !== "function") { 5 | throw new TypeError(`你提供的${iterable}不是一个可迭代的对象`) 6 | } 7 | this._datas = []; 8 | for (const item of iterable) { 9 | // item 也得是一个可迭代对象 10 | if (typeof item[Symbol.iterator] !== "function") { 11 | throw new TypeError(`你提供的${item}不是一个可迭代的对象`); 12 | } 13 | const iterator = item[Symbol.iterator](); 14 | const key = iterator.next().value; 15 | const value = iterator.next().value; 16 | this.set(key, value); 17 | } 18 | 19 | } 20 | 21 | set(key, value) { 22 | const obj = this._getObj(key); 23 | if (obj) { 24 | //修改 25 | obj.value = value; 26 | } 27 | else { 28 | this._datas.push({ 29 | key, 30 | value 31 | }) 32 | } 33 | } 34 | 35 | get(key) { 36 | const item = this._getObj(key); 37 | if (item) { 38 | return item.value; 39 | } 40 | return undefined; 41 | } 42 | 43 | get size() { 44 | return this._datas.length; 45 | } 46 | 47 | delete(key) { 48 | for (let i = 0; i < this._datas.length; i++) { 49 | const element = this._datas[i]; 50 | if (this.isEqual(element.key, key)) { 51 | this._datas.splice(i, 1); 52 | return true; 53 | } 54 | } 55 | return false; 56 | } 57 | 58 | clear() { 59 | this._datas.length = 0; 60 | } 61 | 62 | /** 63 | * 根据key值从内部数组中，找到对应的数组项 64 | * @param {*} key 65 | */ 66 | _getObj(key) { 67 | for (const item of this._datas) { 68 | if (this.isEqual(item.key, key)) { 69 | return item; 70 | } 71 | } 72 | } 73 | 74 | has(key) { 75 | return this._getObj(key) !== undefined; 76 | } 77 | 78 | /** 79 | * 判断两个数据是否相等 80 | * @param {*} data1 81 | * @param {*} data2 82 | */ 83 | isEqual(data1, data2) { 84 | if (data1 === 0 && data2 === 0) { 85 | return true; 86 | } 87 | return Object.is(data1, data2); 88 | } 89 | 90 | *[Symbol.iterator]() { 91 | for (const item of this._datas) { 92 | yield [item.key, item.value]; 93 | } 94 | } 95 | 96 | forEach(callback) { 97 | for (const item of this._datas) { 98 | callback(item.value, item.key, this); 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /5. 对象/5-7. [demo]像素鸟/scripts/Game.js: -------------------------------------------------------------------------------- 1 | class Game { 2 | constructor() { 3 | this.sky = new Sky(); 4 | this.land = new Land(-100); 5 | this.bird = new Bird(); 6 | //柱子对生成器 7 | this.pipeProducer = new PipePareProducer(-100); 8 | this.timer = null; 9 | this.tick = 16; //移动时间间隔，毫秒 10 | this.gameOver = false; 11 | } 12 | 13 | start() { 14 | if (this.timer) { 15 | return; 16 | } 17 | if (this.gameOver) { 18 | //重新开始游戏 19 | window.location.reload(); 20 | } 21 | this.pipeProducer.startProduce(); //开始生成柱子 22 | this.bird.startSwing(); 23 | this.timer = setInterval(() => { 24 | const duration = this.tick / 1000; 25 | this.sky.move(duration) 26 | this.land.move(duration) 27 | this.bird.move(duration); 28 | this.pipeProducer.pairs.forEach(pair => { 29 | pair.move(duration); 30 | }) 31 | if (this.isGameOver()) { 32 | this.stop(); 33 | this.gameOver = true; 34 | } 35 | }, this.tick); 36 | } 37 | 38 | /** 39 | * 判断两个矩形是否碰撞 40 | * @param {*} rec1 41 | * @param {*} rec2 42 | */ 43 | isHit(rec1, rec2) { 44 | // 横向：两个矩形的中心点的横向距离，是否小于矩形宽度之和的一半 45 | // 纵向：两个矩形的中心点的纵向距离，是否小于矩形高度之和的一半 46 | var centerX1 = rec1.left + rec1.width / 2; 47 | var centerY1 = rec1.top + rec1.height / 2; 48 | var centerX2 = rec2.left + rec2.width / 2; 49 | var centerY2 = rec2.top + rec2.height / 2; 50 | var disX = Math.abs(centerX1 - centerX2); //中心点横向距离 51 | var disY = Math.abs(centerY1 - centerY2);//中心点总想距离 52 | if (disX < (rec1.width + rec2.width) / 2 && 53 | disY < (rec1.height + rec2.height) / 2 54 | ) { 55 | return true; 56 | } 57 | return false; 58 | } 59 | 60 | isGameOver() { 61 | if (this.bird.top === this.bird.maxY) { 62 | //鸟碰到了大地 63 | return true; 64 | } 65 | for (let i = 0; i < this.pipeProducer.pairs.length; i++) { 66 | const pair = this.pipeProducer.pairs[i]; 67 | //看柱子对pair是否跟bird进行了碰撞 68 | if (this.isHit(this.bird, pair.upPipe) || this.isHit(this.bird, pair.downPipe)) { 69 | return true; 70 | } 71 | } 72 | return false; 73 | } 74 | 75 | stop() { 76 | clearInterval(this.timer); 77 | this.timer = null; 78 | this.bird.stopSwing(); 79 | this.pipeProducer.stopProduce(); 80 | } 81 | 82 | /** 83 | * 关键键盘事件 84 | */ 85 | regEvent() { 86 | window.onkeydown = (e) => { 87 | if (e.key === "Enter") { 88 | if (this.timer) { 89 | this.stop(); 90 | } 91 | else { 92 | this.start(); 93 | } 94 | } 95 | else if (e.key === " ") { 96 | this.bird.jump(); 97 | } 98 | } 99 | } 100 | } 101 | 102 | var g = new Game(); 103 | g.regEvent(); --------------------------------------------------------------------------------