Symbol类型的使用
-
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还新增了 Symbol
-
Symbol类型的特性:
-
基本使用:
let symbol = Symbol()
-
由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。
let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
let a = {
[mySymbol]: 'Hello!'
};
// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"
let obj = {
name:'jack',
age:18
}
obj[Symbol.iterator] = function(){
}
Iterator(遍历器)
-
概念:遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。
-
iterator主要作用
-
Iterator 的遍历过程是这样的。
-
遍历结束时,value的值为undefined,done的值为true,是否执行的依据为done的值为false时。
-
原生具备iterator接口数据(可使用for of 遍历)
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList (DOM)对象
-
for of方法的使用
Symbol.iterator基本实现原理
function iterator(arr) {
// 相当于内置的指针对象
let index = 0
return {
next() {
// 判断使用三元运算符判断当前指针下标是否超过数组的长度
return index < arr.length ?
{ value: arr[index++], done: false } :
{ value: arr[index++], done: true };
}
}
}
let arr = [5, 4, 3, 2, 1]
//调用一次这个方法,就取出对应下标的值
let iter = iterator(arr)
console.log(iter.next())
Symbol.iterator底层实现原理
数组遍历实现
Array.prototype[Symbol.iterator] = iteratorTool
- 修改原型对象方法后,自定义的iteratorTool()方法,不在接收参数,此时函数中的数组长度调用会发生错误。
- 在iteratorTool()方法中,this指向的是遍历的数组,是因为当调用for…of方法时,会触发arr数组中的Symbol.iterator属性中的方法。
对象遍历和数组遍历共同实现
-
函数需要同时实现两种遍历形式,需要进行判断,当前this是数组还是对象,
- 使用 instanceof 关键字用于判断
_this instanceof Array
- 使用 instanceof 关键字用于判断
-
在对象中不存在下标概念,所以使用取下标的形式,不能将对象中的属性值拿出来
Generator 函数(过渡异步处理-不常用)
function* demo(){
let result = yield 1;
yield 2;
}
- 调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象
- 调用next()方法函数内部的逻辑开始执行[ 至少调用一次,函数体才会执行 ],遇到yield或return语句时停止。yield后面的那个表达式的值,作为返回的对象的value属性值
- 在次调用next()方法会从上一次的yield出开始执行,直到最后
- yield在未设定返回值是默认为undefined
3. Generator 函数的基本使用
- next()方法需要在得到调用函数的返回对象下使用
```
function* generatorTool(){
console.log('我要开始啦~')
yield 1
console.log('我在中间')
yield 2
console.log('我已经结束了~')
}
let Gt = generatorTool()
Gt.next()
```
- Generator 函数处理异步操作
####async 函数的使用
-
概念:真正意义上解决了异步回调的问题,同步流程表达异步操作
-
本质:Generator的语法糖
-
async 函数的基本语法:
async function demo(){ await 异步操作; await 异步操作; }
4.async 函数的特性:
- 不需要像Generator去调用next()方法,遇到await关键字时等待,当前的异步操作完成后继续往下执行
- 返回的是一个Promise对象,可以使用then()方法进行操作
- async关键字取代了Generator函数的*号,await取代了yield
- 相对其他异步操作解决方案更简洁
5.async搭配Promise进行异步操作
- await关键字会自动识别Promise对象的state状态值,用于判断是否继续执行
function promisetool(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('我执行了')
resolve(res)
},2000)
})
}
async function asyncTool(){
console.log('我开始了~')
let res = await promisetool()
console.log('我继续')
await promisetool(res)
console.log('我完事了')
}
asyncTool()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。