主要会贴上代码,这样容易理解些
持续更新中...
1.let const
/**let,const 块作用域内有效 {}内代表一块*/
/**ES6 use strict*/
function test() {
// for(let i=1;i<3;i++){
// console.log(i);
// }
// console.log(i);
/**let 申明变量是不能重复定义*/
// let a= 1;
// let a=2;
}
function last() {
/*const常量不能修改(数值) 对象可以,如const k={}
* 申明时必须赋值
* */
const PI=3.1415926;
const k={
a:1
}
k.b=3;
console.log(PI,k);
}
last();
2.解构赋值
主要讲解了数组解构赋值和对象解构赋值,其他的都可以在上面拓展
依然贴上代码:
/**
* 数组解构赋值
*/
{
let a,b,rest;
[a,b]=[1,2];
console.log(a,b);
}
{
let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6];
console.log(a,b,rest);
}
/******/
{
let a,b,c,rest;
[a,b,c=3]=[1,2];
console.log(a,b,c);
}
/*变量交换*/
{
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);
}
/***/
{
function f() {
return [11,22]
}
let a,b;
[a,b]=f();
console.log(a,b);
}
/*选择性接收变量*/
{
function f() {
return [1,2,3,4,5]
}
let a,b,c;
[a,,,b]=f();
console.log(a,b);
}
{
function f() {
return [1,2,3,4,5]
}
let a,b,c;
[a,,...b]=f();
console.log(a,b);
}
/*非常有用这种*/
{
function f() {
return [1,2,3,4,5]
}
let a,b,c;
[a,...b]=f();
console.log(a,b);
}
/*
* 对象解构赋值
* */
{
let a,b;
({a,b}={a:10,b:20})
console.log(a,b);
}
{
let o={p:42,q:true}
let {p,q}=o;
console.log(p,q);
}
{
let {a=10,b=5}={a:3};
console.log(a,b);
}
{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'des'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);
}
3.正则拓展
新增了2个修饰符 y和u,下面给出代码:
{
let regex=new RegExp('xyz','i');
let regex2=new RegExp(/xyz/i);
console.log(regex.test('xyz123'),regex2.test('xyz123'));
let regex3=new RegExp(/xyz/ig,'i');
console.log(regex3.flags);
}
{
let s='bbb_bb_b';
let al=/b+/g;
let a2=/b+/y;
console.log(al.exec(s),a2.exec(s));
console.log(al.exec(s),a2.exec(s));
/*sticky是check 正则中是否带有y修饰符*/
console.log(al.sticky,a2.sticky);
}
/*u修饰符
* 处理大于2个字节的 加u
* .并不是能匹配所有字符(必须是小于2个字节的字符)
* */
{
console.log('u-1',/^\uD83D/.test('\uD83D\uDc2A'));
console.log('u-2',/^\uD83D/u.test('\uD83D\uDc2A'));
console.log(/\u{61}/.test('a'));
console.log(/\u{61}/u.test('a'));
console.log(`\u{20BB7}`);
let s='';
console.log('u-1',/^.$/.test(s));
console.log('u-2',/^.$/u.test(s));
console.log('test',/{2}/.test(''));
console.log('test',/{2}/u.test(''));
}
4.字符串拓展(上)
Unicode编码的一些问题,贴上代码,应该去敲一遍就可以理解
这里提醒,需要npm install babel-polyfill;得安装这么个补丁包才行
{
console.log('a',`\u0061`);
console.log('s',`\u20BB7`);
console.log('s',`\u{20BB7}`);
}
{
let s='𠮷';
/*es5中*/
console.log('length',s.length);
console.log('0',s.charAt(0));
console.log('1',s.charAt(1));
console.log('at0',s.charCodeAt(0));
console.log('at1',s.charCodeAt(1));
/*es6*/
let s1='𠮷a';
console.log('length',s1.length);
console.log('code0',s1.codePointAt(0));
console.log('code0',s1.codePointAt(0).toString(16));
console.log('code1',s1.codePointAt(1));
console.log('code1',s1.codePointAt(2));
}
{
console.log(String.fromCharCode("0x20bb7"));
console.log(String.fromCodePoint("0x20bb7"));
}
{
let str='\u{20bb7}abc';
for(let i=0;i<str.length;i++){
console.log('es5',str[i]);
}
for(let code of str){
console.log('es6',code);
}
}
5.字符串拓展(下)
主要讲解了一些日常中实用方便的方法,老规矩贴上代码:
/**实用方法**/
/**
* 字符串中是不是包含某个字符
*/
{
let str="string";
console.log("includes",str.includes("a"));
console.log('start',str.startsWith('str'));
console.log('end',str.endsWith('g'));
}
/*字符串的复制*/
{
let str="abc";
console.log(str.repeat(4));
}
//模板字符串
{
let name="list";
let info="hello world";
let m=`i am ${name},${info}`;
console.log(m);
}
//es7草案 加了补丁包也可以在es6中使用
//补白的作用
{
//向前补
console.log('1'.padStart(4,'0'));
//向后补
console.log('1'.padEnd(4,'0'));
}
//标签模板
{
let user={
name:'list',
info:'hello world'
};
console.log(abc`i am ${user.name},${user.info}`);
function abc(s,v1,v2) {
console.log("--s:",s,"v1:",v1,"v2:",v2);
return s+v1+v2;
}
}
//String.raw 使用频率不是太高
{
console.log(String.raw`Hi\n${1+2}`);
console.log(`Hi\n${1+2}`);
}
6.数值拓展
跟数值有关的一些小方法,仅仅码出了常用的小部分,更多请查阅
{
//二进制以0b开头,b的大小写都可以
console.log(0b111110111);
//八进制是0o开头
console.log(0o767);
}
{
//Number.isFinite 是否无尽
console.log('5',Number.isFinite(5));
console.log('NaN',Number.isFinite(NaN));
console.log('1/0',Number.isFinite(1/0));
//Number.isNaN 是否为数字
console.log('NaN',Number.isNaN(NaN));
console.log('13',Number.isNaN(13));
}
{
//判断是否为整数
console.log('25', Number.isInteger(25));
console.log('25.0', Number.isInteger(25.0));
console.log('1/3', Number.isInteger(1 / 3));
console.log('3/3', Number.isInteger(3 / 3));
console.log("abc", Number.isInteger('abc'));
}
{
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MIN_SAFE_INTEGER);
//数是否安全
console.log("10",Number.isSafeInteger(10));
console.log("NaN",Number.isSafeInteger(NaN));
}
{
//取小数中的整数部分
console.log("4.1",Math.trunc(4.1));
}
{
//判断正负0
console.log("-5",Math.sign(-5));
console.log("0",Math.sign(0));
console.log("5",Math.sign(5));
}
{
//立方根
console.log('9',Math.cbrt(9));
}
//es6中有三角函数方法+对数方法....
7.数组拓展
{
let arr=Array.of(3,4,7,9,11);
console.log(arr);
let empty=Array.of();
console.log(empty);
}
{
let p=document.querySelectorAll('p');
let pArr=Array.from(p);
pArr.forEach(function (item) {
console.log(item.textContent);
});
console.log(Array.from([1,3,5],function (item) {
return item*2;
}))
}
//填充数组
{
console.log('fill-7',[1,'a',undefined].fill(7));
console.log('fill,pos',['a','b','c','d','e'].fill(7,1,5));
}
{
for(let index of ['1','c','ks'].keys()){
console.log('keys',index);
}
//需要import 'babel-polyfill';
// for(let value of ['1','c','ks'].values()){
// console.log('values',value);
// }
for(let [index,value] of ['1','c','ks'].entries()){
console.log('values',index,value);
}
}
{
/**
* 它接受三个参数。
target (必需):从该位置开始替换数据。
start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。
*/
console.log([1,2,3,4,5].copyWithin(0,1,4));
}
{
/**查找*/
console.log([1,2,3,4,5,6].find(function (item) {
return item>3;
}));
console.log([1,2,3,4,5,6].findIndex(function (item) {
return item>3;
}))
}
{
console.log('number',[1,2,NaN].includes(NaN));
}
8.函数拓展
箭头函数,尾调用...
{
//参数可以设置默认值
//默认值的后面 必须也是默认值
//functon test(x,y='123',c) 就是错误的,必须得是c='1'
function test(x,y = 'word') {
console.log('默认值',x,y);
}
test('hello');
test('hello','kill');
}
{
let x='test';
function test2(x,y=x) {
console.log('作用域',x,y);
}
test2('kill');
//输出 kill kill
}
{
function test3(...arg) {
for(let v of arg){
console.log('rest',v);
}
}
test3(1,2,3,4,'a');
//输出 rest 1 rest 2 rest 3 rest 4 rest 5
//把输入的参数转成了数组
}
{
//扩展运算符
console.log(...[1,2,4]);
//输出 1 2 4 把数组拆成离散的值
console.log('a',...[1,2,4]);
//输出 a 1 2 4
}
//箭头函数
{
//v 参数 v*2返回值
//函数名 函数参数 函数返回值,如果没有参数就用() 表示
let arrow=v=>v*2;
console.log(arrow(3));
//输出 6
let arrow2 = ()=>5;
console.log(arrow2());
//输出 5
//箭头函数的this指向
//箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
}
/**尾调用就是看 函数的最后一句话是不是一个函数
* 提升性能
* */
{
function tail(x) {
console.log('tail',x);
}
function fx(x) {
return tail(x);
}
fx(123);
//输出 tail 123
}
9.对象拓展
{
//简洁表示法
let o=1;
let k=2;
let es5={
o:o,
k:k
};
let es6={
o,k
}
console.log(es5);
console.log(es6);
let es5_method={
hello:function () {
console.log('hello');
}
}
let es6_method={
hello(){
console.log('hello');
}
}
es5_method.hello();
es6_method.hello();
}
{
//属性表达式
let a='b';
let es5_obj={
a:'c',
b:'b'
};
let es6_obj={
[a]:'c'
}
console.log(es5_obj,es6_obj);
}
{
//新增api
//is 类似于===
console.log('字符串',Object.is('abc','an=bc'));
console.log('数组',Object.is([],[]),[1]===[1]);
console.log('拷贝',Object.assign({a:'a'},{b:'b',c:'c'},{z:'z'}));
let test={k:123,o:456};
for (let [key,value] of Object.entries(test)){
console.log([key,value]);
}
}
{
//拓展运算符
// let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
}
10.Symbol的用法
{
//声明
let a1=Symbol();
let a2=Symbol();
console.log(a1===a2);
let a3=Symbol.for('a3');
let a4=Symbol.for('a3');
console.log(a3===a4);
}
{
let a1=Symbol.for('abc');
let obj={
[a1]:'123',
'abc':345,
'c':456
}
console.log(obj);
for(let [key,value] of Object.entries(obj)){
console.log(key,value);
}
Object.getOwnPropertySymbols(obj).forEach(function (item) {
console.log(obj[item]);
})
Reflect.ownKeys(obj).forEach(function (item) {
console.log(item,obj[item]);
})
}
11.set map数据结构
简单介绍了Set WeakSet Map WeakMap
{
let list=new Set();
list.add(5);
list.add(7);
console.log('size',list.size);
}
{
let arr=[1,2,3,4,5];
let list=new Set(arr);
console.log(list.size);
}
//去重
//数据类型得一致
{
let list=new Set();
list.add(1);
list.add(2);
list.delete(2);
list.add(1);
console.log(list);
let arr=[1,2,3,1,2];
let list2=new Set(arr);
console.log(list2);
}
{
let arr=['add','delete','clear','has'];
let list=new Set(arr);
console.log(list.has('add'));
list.delete('delete');
console.log(list);
list.clear();
console.log(list);
}
{
let arr=['add','delete','clear','has'];
let list=new Set(arr);
for(let key of list.keys()){
console.log('keys',key);
}
for(let value of list.values()){
console.log('value',value);
}
}
//weakset 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
let weakList=new WeakSet();
let arg={
};
weakList.add(arg);;
console.log(weakList);
}
//map
{
let map=new Map();
let arr=['123'];
//add element
map.set(arr,456);
console.log(map,map.get(arr));
}
{
let map=new Map([['a',123],['b',456]]);
console.log(map);
console.log(map.size);
console.log(map.delete('a'),map);
console.log(map.clear(),map);
}
//weakmap 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
let weakMap=new WeakMap();
let o={};
weakMap.set(o,123);
console.log(weakMap.get(o));
}
12.map-set与数组和对象的比较
将map set与数组和object都进行了增删改查的比较
{
let list=new Set();
list.add(5);
list.add(7);
console.log('size',list.size);
}
{
let arr=[1,2,3,4,5];
let list=new Set(arr);
console.log(list.size);
}
//去重
//数据类型得一致
{
let list=new Set();
list.add(1);
list.add(2);
list.delete(2);
list.add(1);
console.log(list);
let arr=[1,2,3,1,2];
let list2=new Set(arr);
console.log(list2);
}
{
let arr=['add','delete','clear','has'];
let list=new Set(arr);
console.log(list.has('add'));
list.delete('delete');
console.log(list);
list.clear();
console.log(list);
}
{
let arr=['add','delete','clear','has'];
let list=new Set(arr);
for(let key of list.keys()){
console.log('keys',key);
}
for(let value of list.values()){
console.log('value',value);
}
}
//weakset 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
let weakList=new WeakSet();
let arg={
};
weakList.add(arg);;
console.log(weakList);
}
//map
{
let map=new Map();
let arr=['123'];
//add element
map.set(arr,456);
console.log(map,map.get(arr));
}
{
let map=new Map([['a',123],['b',456]]);
console.log(map);
console.log(map.size);
console.log(map.delete('a'),map);
console.log(map.clear(),map);
}
//weakmap 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
let weakMap=new WeakMap();
let o={};
weakMap.set(o,123);
console.log(weakMap.get(o));
}
{
//数据结构横向对比,增删改查
let map=new Map();
let array=[];
//增
map.set('t',1);
array.push({t:1});
console.info(map,array);
//查
let map_exist=map.has('t');//返回布尔值
let array_exist=array.find(item=>item.t);
console.info(map_exist,array_exist);
//改
map.set('t',2);
array.forEach(item=>item.t?item.t=2:'');
console.log(array);
//删
map.delete('t');
let index=array.findIndex(item=>item.t);
array.splice(index,1);
console.log(map,array);
}
{
//set array对比
let set=new Set();
let array=[];
//增
set.add({t:1});
array.push({t:1});
console.log(set,array);
//查
let set_exist=set.has({t:1});
let array_exist=array.find(item=>item.t);
console.log(set_exist,array_exist);
//改
set.forEach(item=>item.t?item.t=2:'');
array.forEach(item=>item.t?item.t=2:'');
console.log(set,array);
//删
set.forEach(item=>item.t?set.delete(item):'');
let index=array.findIndex(item=>item.t);
array.splice(index,1);
console.log(set,array);
}
//与object对比
{
let item = {t: 1};
let map = new Map();
let set = new Set();
let obj = {};
//增
map.set('t', 1);
set.add(item);
obj['t'] = 1;
console.log(map, set, obj);
//查
console.log(map.has('t'));
console.log(set.has(item));
console.log('t' in obj);
//改
map.set('t', 2);
item.t = 2;//修改成本高
obj['t'] = 2;
console.log(map, item, obj);
//删
map.delete('t');
set.delete(item);
delete obj['t'];
console.log(map, set, obj);
}
/**
* 优先使用map
* set作为考虑唯一性,对数据要求比较高,保证每个数据的唯一性,使用set
* 数组+object放弃
*/
13.Proxy和Reflect
//代理
{
let obj={
time:'2017-03-11',
name:'net',
_r:'123'
};
let monitor=new Proxy(obj,{
//拦截对象属性的读取
get(target,key){
return target[key].replace('2017','2018');
},
//拦截对象设置属性
set(target,key,value){
if (key==='name'){
return target[key]=value;
}else{
return target[key];
}
},
//拦截key in object 操作
has(target,key){
if(key==='name'){
return target[key];
}else{
return false;
}
},
deleteProperty(target,key){
/**
* IndexOf()与LastIndexOf()的不同在于IndexOf()从字符串中第一个字符开始检索,
* LastIndexOf()是从字符串的最后一个字符向前检索。
* 返回值都是字符串中字符所在的下标,如果没有找到则返回-1
*/
if(key.indexOf('_')>-1){
delete target[key];
return true;
}else{
return target[key];
}
},
//拦截Object.key,Object.getOwnPropertySmbols,Object.getOwnPropertyNames
ownKeys(target){
return Object.keys(target).filter(item=>item!='time');
}
});
console.log('get',monitor.time);
monitor.time='2019';
monitor.name='zhangjing';
console.log(monitor.time);
console.log(monitor.name);
console.log('has','name'in monitor,'time'in monitor);
// delete monitor._r;
// console.log('delete',monitor);
console.log('ownKeys',Object.keys(monitor));
}
//reflect 同proxy
{
let obj={
time:'2017-03-11',
name:'net',
_r:'123'
};
console.log(Reflect.get(obj,'time'));
Reflect.set(obj,'name','zhangjing');
console.log(obj);
console.log(Reflect.has(obj,'name'));
}
{
function validator(target,validator) {
return new Proxy(target,{
_validator:validator,
set(target,key,value,proxy){
if(target.hasOwnProperty(key)){
let va=this._validator[key];
if(va(value)){
return Reflect.set(target,key,value,proxy);
}else{
throw Error(`不能设置${key}到${value}`);
}
}else{
throw Error(`${key} 不存在`);
}
}
})
}
const personValidators={
name(val){
return typeof val==='string'
},
age(val){
return typeof val==='number' &&val>18;
}
}
class Person{
constructor(name,age){
this.name=name;
this.age=age;
return validator(this,personValidators);
}
}
const person=new Person('李磊',19);
console.log(person);
// person.name=29;
person.name='zhang jing';
person.age=39;
}
14.类与对象
{
//基本定义和生成实例
class Parent{
constructor(name='zhangjing'){
this.name=name;
}
}
let v_parent=new Parent('v');
console.log('构造函数和实例:',v_parent);
}
{
//继承
class Parent{
constructor(name='zhangjing'){
this.name=name;
}
}
class Child extends Parent{
}
console.log('继承',new Child());
}
{
//继承传递参数
class Parent{
constructor(name='zhangjing'){
this.name=name;
}
}
class Child extends Parent{
//super一定放在第一行
constructor(name='child'){
super(name);
this.type='child';
}
}
console.log('继承',new Child());
}
{
//getter setter
class Parent{
constructor(name='zhangjing'){
this.name=name;
}
get longName(){
return 'mk'+this.name
}
set longName(value){
this.name=value;
}
}
let v=new Parent();
console.log('getter',v.longName);
v.longName='hello';
console.log('setter',v.longName);
}
{
//静态方法,static通过类去调用,而不是通过类的实例调用
class Parent {
constructor(name = 'zhangjing') {
this.name = name;
}
static tell(){
console.log('tell');
}
}
Parent.tell();
}
{
//静态属性
class Parent {
constructor(name = 'zhangjing') {
this.name = name;
}
static tell(){
console.log('tell');
}
}
Parent.type='test';
console.log('静态属性',Parent.type);
}
15.promise
主要讲解了promise的原理,以及promise.all和promise.race的用法
//promise 解决异步操作
// {
// //es5 写法
// let ajax=function (callback) {
// console.log("执行");
// setTimeout(function () {
// callback&&callback.call();
// },1000);
// };
// ajax(function () {
// console.log('timeout1');
// })
// }
//
// {
// let ajax=function () {
// console.log('执行2');
// return new Promise(function (resolve,reject) {
// setTimeout(function () {
// resolve();
// },1000);
// })
// };
// ajax().then(function () {
// console.log('promise','timeout2');
// })
// }
// {
// let ajax=function () {
// console.log('执行3');
// return new Promise(function (resolve,reject) {
// setTimeout(function () {
// resolve();
// },1000);
// })
// };
// ajax().then(function () {
// return new Promise(function (resolve,reject) {
// setTimeout(function () {
// resolve();
// },2000);
// })
// }).then(function () {
// console.log('timeout3');
// })
// }
// {
// let ajax=function (num) {
// console.log('执行4');
// return new Promise(function (resolve,reject) {
// if(num>5){
// resolve();
// }else{
// throw new Error('出错了!');
// }
// })
// }
//
// ajax(3).then(function () {
// console.log('log',6);
// }).catch(function (err) {
// console.log('catch',err);
// })
// }
// {
// //所有图片加载完再添加到页面
// function loadImg(src) {
// return new Promise((resolve,reject)=>{
// let img=document.createElement('img');
// img.src=src;
// img.onload=function () {
// resolve(img);
// }
// img.onerror=function (err) {
// reject(err);
// }
// })
// }
//
// function showImgs(imgs) {
// imgs.forEach(function (img) {
// document.body.appendChild(img);
// })
// }
//
// //把多个promise实例当做一个1个promise实例
// Promise.all([
// loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
// loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
// loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png'),
// ]).then(showImgs);
// }
{
//先到先显示
function loadImg(src) {
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.onload=function () {
resolve(img);
}
img.onerror=function (err) {
reject(err);
}
})
}
function showImgs(img) {
let p=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
}
Promise.race([
loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png'),
]).then(showImgs);
}
16.Iterator 和 for of
{
let arr=['hello','world'];
let map=arr[Symbol.iterator]();
console.log(map.next());
console.log(map.next());
console.log(map.next());
}
{
let obj={
start:[1,3,2],
end:[7,9,8],
[Symbol.iterator](){
let self=this;
let index=0;
let arr=self.start.concat(self.end);
let len=arr.length;
return{
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);
}
}
{
let arr=['hello','world'];
for(let value of arr){
console.log('value',value);
}
}
3.17 Generator
Generator基本定义,以及2个工作学习中常用到2个方法,长轮询和类似抽奖的一个次数记录
个人感觉generator跟async差不多,yeild跟await差不多。
Generator 函数是 ES6 提供的一种异步编程解决方案。
yield表达式是暂停执行的标记,而next方法可以恢复执行。
记录一个简单的例子:
//genertaor基本定义
{
//定义generator
let tell=function* () {
yield 'a';
yield 'b';
return 'c';
};
let k=tell();
//这时候输出为空,因为程序调用tell函数,然后遇到yield就停止了。
//需要调用next()才能继续执行
console.log(k.next());
//next方法返回一个对象
// 它的value属性就是当前yield表达式的值hello,done属性的值false,表示遍历还没有结束。
//这句的输出是{ value: 'a', done: false }
console.log(k.next());
//{ value: 'b', done: false }
console.log(k.next());
//{ value: 'c', done: true }
console.log(k.next());
//{ value: undefined, done: true }
}
{
let obj={};
obj[Symbol.iterator]=function* () {
yield 1;
yield 2;
yield 3;
}
for(let key of obj){
console.log(key);
}
}
{
let state=function* () {
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());
}
//generator 语法堂
// {
// let state=async function () {
// while(1){
// await 'A';
// await 'B';
// await 'C';
// }
// }
//
// let status=state();
// console.log(status.next());
// console.log(status.next());
// console.log(status.next());
// console.log(status.next());
// console.log(status.next());
// }
//抽奖
{
let draw=function (count) {
//具体抽奖逻辑
console.info((`剩余${count}次`))
}
let residue=function* (count) {
while (count>0){
count--;
yield draw(count);
}
}
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();
},false)
}
{
//长轮询
let ajax=function* () {
yield new Promise(function (resolve,reject) {
setTimeout(function () {
resolve({code:0});
},200);
})
}
let pull=function () {
let generator=ajax();
let step=generator.next();
step.value.then(function (d) {
if(d.code!=0){
setTimeout(function () {
console.log('wait');
pull()
},1000);
}else{
console.log(d);
}
})
}
pull();
}
18.Decorators
修饰器
{
//修饰器
let readonly=function (target,name,descriptor) {
descriptor.writable=true;
return descriptor
};
class Test{
@readonly
time(){
return '2017-9-04'
}
}
let test=new Test();
// test.time=function () {
// console.log('reset-time');
// }
console.log(test.time());
}
{
let typename=function (target,name,descriptor) {
target.myname='hello';
}
@typename
class Test{
}
console.log('类修饰符',Test.myname);
}
//第三方修饰器的js库:core-decorators
//npm install core-decorators
//案例
{
let log=(type)=>{
return function (target,name,descriptor) {
let src_method=descriptor.value;
descriptor.value=(...arg)=>{
src_method.apply(target,arg);
console.log(`log ${type}`);
}
}
}
class AD{
@log('show')
show(){
console.log('ad is show');
}
@log('click')
click(){
console.log('ad is click');
}
}
let ad=new AD();
ad.show();
ad.click();
}
19.模块化
export:(2种方法,个人比较喜欢最后一种)
//模块引用 import
//模块导出 export
// export let A=123;
//
// export function test() {
// console.log('test');
// }
//
// export class Hello{
// test(){
// console.log('class');
// }
// }
export let A=123;
export function test() {
console.log('test');
}
export class Hello{
test(){
console.log('class');
}
}
export default{
A,test,Hello
}
import:
// import {A,test,Hello} from './class/lesson17';
// import * as lesson17 from './class/lesson17';
//
// console.log(lesson17.A);
import Lesson17 from './class/lesson17';
console.log(Lesson17.A);
更新到这里,也就差不多暂时整理完了。接下来会有一个基于ES6技术栈写的一个彩票系统网站,后面如果写完了,会贴上GitHub
网友评论