ES6基础学习——第二天(Symbol 的基本使用、迭代器、生成器、Promise 基本语法)
程序员文章站
2023-12-21 13:23:28
...
目录
1. Symbol 的基本使用
2. 迭代器
3. 生成器
4. Promise 基本语法
知识一:Symbol 的基本使用
- ES6引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型。
- Symbol 特点:
- Symbol的值是唯一的,用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for …in循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名
<script>
//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2 === s3) //false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5) //true
//不能与其他数据进行运算,会直接报错
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
</script>
知识二:迭代器
- 工作原理:
- 创建一个指针对象,指向当前数据结构的起始位置。第一次调用对象的next方法,指针自动指向数据结构的第一个成员,接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员,每调用next方法返回一个包含value和 done属性的对象
<script>
//声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];
//使用 for...of 遍历数组 保存的是键值,for in 是键名
// for(let v of xiyou){
// console.log(v);
// }
//对象进行 for...of循环时,会调用Symbol.iterator方法,返回该对象的默认遍历器
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
</script>
知识三:生成器
- *的位置没有限制,生成器函数返回的结果是迭代器对象,调用迭代器对象的next方法可以得到yield语句后的值,yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次next方法,执行一段代码,next方法可以传递实参,作为yield 语句的返回值
<script>
//生成器其实就是一个特殊的函数
//异步编程 纯回调函数 node fs ajax mongodb
//函数代码的分隔符
function * gen(){
yield '一只没有耳朵';
yield '一只没有尾部';
yield '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
//遍历
for(let v of gen()){
console.log(v);
}
</script>
- next方法可以传递实参,作为yield 语句的返回值
<script>
function * gen(arg){
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
//执行获取迭代器对象
let iterator = gen('AAA');
console.log(iterator.next());
//next方法可以传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
</script>
生成器实例
<script>
// 异步编程 文件操作 网络操作(ajax, request) 数据库操作
// 1s 后控制台输出 111 2s后输出 222 3s后输出 333
// 回调地狱
// setTimeout(() => {
// console.log(111);
// setTimeout(() => {
// console.log(222);
// setTimeout(() => {
// console.log(333);
// }, 3000);
// }, 2000);
// }, 1000);
function one(){
setTimeout(()=>{
console.log(111);
iterator.next();
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next();
},2000)
}
function three(){
setTimeout(()=>{
console.log(333);
iterator.next();
},3000)
}
function * gen(){
yield one();
yield two();
yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next();
</script>
知识四:Promise 基本语法
<script>
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){
setTimeout(function(){
//
// let data = '数据库中的用户数据';
// resolve
// resolve(data);
let err = '数据读取失败';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
})
</script>
- 其实就是在
function(resolve, reject){}
这个函数内进行实现一些特殊功能(不只是定时器),若成功,就用 resolve 设置成功状态,否则就用 reject 设置失败状态,然后调用 then 方法提示
点击回到顶部