Skip to content

Commit 5e62f88

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
update es6
1 parent 113ba99 commit 5e62f88

File tree

5 files changed

+271
-2
lines changed

5 files changed

+271
-2
lines changed

‎02-ES新特性/ES6/13-ES6模块.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>es6</title>
8+
</head>
9+
<body>
10+
<script>
11+
// ES6前，实现模块化使用的是 RequireJS（基于AMD规范的模块化库）或者 seaJS（基于CMD规范的模块化库）
12+
// ES6模块自动开启严格模式
13+
// 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等
14+
// 每个模块只加载一次。重复加载同一个文件直接从内存中读取
15+
/**
16+
* 【 export & import 】
17+
*/
18+
/*-----export [test.js]-----*/
19+
let myName = "Tom";
20+
let myAge = 20;
21+
let myfn = function(){
22+
return "My name is" + myName + "! I'm '" + myAge + "years old."
23+
}
24+
let myClass = class myClass {
25+
static a = "yeah!";
26+
}
27+
export { myName, myAge, myfn, myClass }
28+
/*-----import [xxx.js]-----*/
29+
import { myName, myAge, myfn, myClass } from "./test.js";
30+
// import * from "./test.js";
31+
console.log(myfn());// My name is Tom! I'm 20 years old.
32+
console.log(myAge);// 20
33+
console.log(myName);// Tom
34+
console.log(myClass.a);// yeah!
35+
36+
/**
37+
* 【 as 】
38+
*/
39+
// 使用 as 定义导入导出的接口变量名称，隐藏模块内部的变量
40+
/*-----export [test.js]-----*/
41+
let myName = "Tom";
42+
export { myName as exportName }
43+
/*-----import [xxx.js]-----*/
44+
import { exportName as newName } from "./test.js";
45+
console.log(newName)
46+
47+
/**
48+
* 【 export default 】
49+
* 在一个文件或模块中，export / import 可以有多个，export default 仅有一个
50+
* export 方式导出，在导入时要加 { }，export default 则不需要
51+
* export default 向外暴露的成员，可以使用任意变量来接收
52+
*/
53+
var a = "My name is Tom!";
54+
export default a; // 仅有一个
55+
import b from "./xxx.js"; // 不需要加{}，使用任意变量接收
56+
57+
/**
58+
* 【 复合使用 】
59+
* 提案阶段，相当于 import from & export
60+
*/
61+
export { foo as bar } from "methods";
62+
export { foo as default } from "methods";
63+
export { default as foo } from "methods";
64+
export * from "methods";
65+
</script>
66+
</body>
67+
</html>

‎02-ES新特性/ES6/14-ES6-Promise对象.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>es6</title>
8+
</head>
9+
<body>
10+
<script>
11+
// Promise对象异步操作三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）
12+
// then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值
13+
const p = new Promise(function(resolve,reject){
14+
resolve(1);
15+
}).then(function(value){ // 第一个then，resolve/reject传值 // 1
16+
console.log(value);
17+
return value * 2;
18+
}).then(function(value){ // 第二个then，then-return传值 // 2
19+
console.log(value);
20+
}).then(function(value){ // 第三个then，没有return，没有传值 // undefined
21+
console.log(value);
22+
return Promise.resolve('resolve');
23+
}).then(function(value){ // 第四个then，Promise.resolve传值 // resolve
24+
console.log(value);
25+
return Promise.reject('reject');
26+
}).then(function(value){ // 第五个then，Promise.reject传值 // reject:reject
27+
console.log('resolve:' + value);
28+
}, function(err) {
29+
console.log('reject:' + err);
30+
});
31+
32+
</script>
33+
</body>
34+
</html>

‎02-ES新特性/ES6/15-ES6-Generator函数.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>es6</title>
8+
</head>
9+
<body>
10+
<script>
11+
// Generator 函数，可以通过 yield 关键字，把函数的执行流挂起实现异步处理
12+
// 组成
13+
// 1. function*，表示函数为 Generator 函数
14+
// 2. yield表达式，定义函数内部状态
15+
// 执行机制
16+
// funcName()，返回指向内部状态对象的指针，调用Iterator对象的 next / return 方法控制执行
17+
18+
/**
19+
* f.next
20+
*/
21+
function* func(){
22+
// 第一次调用 next 方法
23+
console.log("one");
24+
var x = yield '1'; // 第二次调用 next 方法
25+
console.log("two", x);
26+
yield '2'; // 第三次调用 next 方法
27+
console.log("three");
28+
return '3';
29+
// 第四次调用 next 方法
30+
}
31+
var f = func()
32+
// 第一次调用 next 方法，从 Generator 函数的头部开始执行到 yield 停止，并将yield后表达式的值'1'作为返回对象的 value 属性值，done为false
33+
f.next(); // one {value: "1", done: false}
34+
// 第二次调用 next 方法，同上步，传入参数
35+
f.next(2); // two 2 {value: "2", done: false}
36+
// 第三次调用 next 方法，执行函数返回操作，并将 return 后表达式的值作为返回对象的 value 属性值，done为true
37+
f.next(); // three {value: "3", done: true}
38+
// 第四次调用 next 方法
39+
f.next(); // {value: undefined, done: true}
40+
41+
/**
42+
* f.return
43+
*/
44+
// return 方法返回给定值(不给定返回undefined)，并结束遍历 Generator 函数。
45+
function* foo(){
46+
yield 1;
47+
yield 2;
48+
yield 3;
49+
}
50+
var f = foo();
51+
console.log(f.next()); // {value: 1, done: false}
52+
console.log(f.return("foo")); // {value: "foo", done: true}
53+
console.log(f.next()); // {value: undefined, done: true}
54+
55+
/**
56+
* f.throw
57+
*/
58+
// throw 方法可以在 Generator 函数体外面抛出异常，在函数体内部捕获
59+
var g = function* () {
60+
try {
61+
yield;
62+
} catch (e) {
63+
console.log('catch inner', e);
64+
}
65+
};
66+
var i = g();
67+
i.next();
68+
try {
69+
i.throw('a');
70+
i.throw('b');
71+
} catch (e) {
72+
console.log('catch outside', e);
73+
}
74+
// catch inner a 第一个错误被 Generator 函数内部捕获
75+
// catch outside b 第二个错误因函数体内catch已执行过，不再捕获这个错误，所以错误抛出 Generator 函数体，被函数体外 catch 捕获
76+
77+
/**
78+
* yield* 表达式
79+
*/
80+
// yield* 表达式表示 yield 返回一个遍历器对象，用于在 Generator 函数内部，调用另一个 Generator 函数
81+
function* callee() {
82+
console.log('callee: ' + (yield));
83+
}
84+
function* caller() {
85+
while (true) {
86+
yield* callee();
87+
}
88+
}
89+
const callerObj = caller();
90+
callerObj.next(); // {value: undefined, done: false}
91+
callerObj.next("a"); // callee: a {value: undefined, done: false}
92+
callerObj.next("b"); // callee: b {value: undefined, done: false}
93+
// 等同于
94+
/*
95+
function* caller() {
96+
while (true) {
97+
// 除了使用 next，还可以使用 for... of 循环遍历 Generator 函数生产的 Iterator 对象
98+
for (var value of callee) {
99+
yield value;
100+
}
101+
}
102+
}
103+
*/
104+
105+
/**
106+
* 使用场景
107+
*/
108+
// 实现 Iterator
109+
// 为不具备 Iterator 接口的对象提供遍历方法。
110+
function* objectEntries(obj) {
111+
const propKeys = Reflect.ownKeys(obj); // 返回对象所有的属性，不管属性是否可枚举，包括 Symbol
112+
for (const propKey of propKeys) {
113+
yield [propKey, obj[propKey]];
114+
}
115+
}
116+
const name = { first: 'cs', last: 'xiaoyao' };
117+
for (const [key,value] of objectEntries(name)) {
118+
console.log(`${key}: ${value}`);
119+
}
120+
// first: cs
121+
// last: xiaoyao
122+
// name 原生是不具备 Iterator 接口无法通过 for... of遍历，使用 Generator 函数加上 Iterator 接口就可以遍历 name 对象了
123+
124+
</script>
125+
</body>
126+
</html>

‎02-ES新特性/ES6/16-ES6-async函数.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>es6</title>
8+
</head>
9+
<body>
10+
<script>
11+
/**
12+
* async: es7异步操作关键字
13+
*/
14+
// async function name([param[, param[, ... param]]]) { statements }
15+
// async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数
16+
async function helloAsync(){
17+
return "helloAsync";
18+
}
19+
console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}
20+
helloAsync().then(v=>{
21+
console.log(v); // helloAsync
22+
})
23+
/**
24+
* await 表达式
25+
*/
26+
// await 关键字仅在 async function 中有效，用于等待一个 Promise 对象
27+
// await 命令后面一般是一个 Promise 对象，也可以是其他值，如字符串，布尔值，数值以及普通函数
28+
// 如果跟Promise，等待Promise对象执行完返回，跟非Promise对象，直接返回对应的值
29+
// [return_value] = await expression;
30+
function testAwait (x) {
31+
return new Promise(resolve => {
32+
setTimeout(() => {
33+
resolve(x);
34+
}, 1000);
35+
});
36+
}
37+
async function helloAsync2() {
38+
var x = await testAwait ("hello world");
39+
console.log(x);
40+
}
41+
helloAsync2 (); // hello world
42+
</script>
43+
</body>
44+
</html>

‎02-ES新特性/ES6/99-待处理事项

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)