es6

Posted 2020-10-12 怀瑾握瑜

//lterator和for...of循环
//不同的数据结构通过for...of来实现不同的目标
//遍历数据结构
{
let arr=[‘hello‘,‘world‘];
//数组调用了Symbol.iterator接口 调用方式()
let map=arr[Symbol.iterator]();
//map的方法map.next 执行三次
console.log(map.next());
console.log(map.next());
console.log(map.next());
//done如果是false就表示循环并没有结束，如果是true就表示循环已经结束了
}

//自定义lterator接口
{
let obj={
start:[1,3,2],
end:[7,9,8],
//声明一个iterator接口方法
[Symbol.iterator](){
let self=this;
let index=0;
//合并成一个数组，保证132798数组一起输出
let arr=self.start.concat(self.end);
//记住数组的长度
let len=arr.length;
return {
//返回的时候一定要有next方法
//包含value和done
next(){
if(index<len){
return {
//保证下一步不是重复的
value:arr[index++],
done:false
}
}else{
return {
value:arr[index++],
//遍历结束
done:true
}
}
}
}
}
}
for(let key of obj){
console.log(key);
}
}

//for...of
{
let arr=[‘hello‘,‘world‘];
for(let value of arr){
console.log(‘value‘,value);
}
}

 

//Generator也是解决异步编程的方法
//比Promise更高级
//next函数的用法 调用next进行下一步
//怎么说呢 核心就是调用一次next()就会找到一次yield然后以此类推直到return
//以上来实现异步编程
//yield*的语法 遇到yield return就停止了

{
// genertaor基本定义
let tell=function* (){
yield ‘a‘;
yield ‘b‘;
return ‘c‘
};

let k=tell();

console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
}

//使用genertaor遍历器的返回值
{
let obj={};
obj[Symbol.iterator]=function* (){
yield 1;
yield 2;
yield 3;
}

for(let value of obj){
console.log(‘value‘,value);
}
}

//genertaor状态机

{
let state=function* (){
//while(1)不断循环
while(1){
yield ‘A‘;
yield ‘B‘;
yield ‘C‘;
}
}
let status=state();
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
}
//genertaor实例场景应用——抽奖
{
let draw=function(count){
//具体抽奖逻辑
console.info(`剩余${count}次`)
}
let residue=function*(count){
while(count>0){
count--;
//执行抽奖的具体逻辑
yield draw(count);
}
}
//将genertaor实例化
//执行抽奖环节
let star=residue(5);
let btn=document.createElement("button");
btn.id="start";
btn.textContent="抽奖";
document.body.appendChild(btn);
document.getElementById("start").addEventListener("click", function(){
star.next();
//next就是抽奖
},false)
}

 

 

//修饰器
//修饰器是一个函数
//修改行为
//修改类的行为
//Decorator

{
let readonly=function(target,name,descriptor){
descriptor.writable=false;
return descriptor
};

class Test{
//名称要一致
@readonly
time(){
return ‘2017-03-11‘
}
}

let test=new Test();

//修改对象的time属性 不能修改 因为是只读属性
// test.time=function(){
// console.log(‘reset time‘);
// };

console.log(test.time());
}

{
let typename=function(target,name,descriptor){
target.myname=‘qwq‘;
}
//typename在花括号外面
@typename
class Test{

}

console.log(‘类修饰符‘,Test.myname);
// 第三方库修饰器的js库：core-decorators; npm install core-decorators
}

 

 

//模块化

//导出
// export let A=123;
// //导出一个函数
// export function test(){
// console.log(‘test‘);
// }
// //导出一个类
// export class Hello{
// test(){
// console.log(‘class‘);
// }
// }

let A=123;
let test=function(){
console.log(‘test‘);
}
class Hello{
test(){
console.log(‘class‘);
}
}

//default把取名字的权利交给引入方
//方便第三方引用
export default {
A,
test,
Hello
}