学习计划
- ES6
- Node.js
- VUE.JS
- Uni-App
学习日志之ES6(完结)
2020/12/27一2021/1/19
用时24天
-
2020/12/27 es6 P27-P29
-
Promise
const P = new Promise((resolve,reject)=>{ settimeout(()=>{ resolve('用户数据');//成功 //reject('程序出错');//错误 },1000); }); //调用then()方法 //then()包含两个方法参数{1.当成功(resolve)时运行value方法2.当失败(reject)时运行reason方法}且赋值 P.then(value=>{ console.log(value); },reason=>{ console.error(reason); }); //调用catch()方法 //catch()与then()类似,但then()包含成功(value)和失败(reason)两个参数,而cantch()只有失败参数(reason) P.catch(reason=>{ console.error(reason); });
-
2020/12/29 es6 P30-P31
-
Set
//Set基本语法及属性 //去重性 const a = new Set(['张三','李四','王五','张三']);//'张三','李四','王五' const b = new Set(['111','222']); //向集合中添加一个对象 a.add('张飞');//'张三','李四','王五','张飞' //向集合中删除一个对象 a.delete('张三');//'李四','王五','张飞' //查看集合中是否包含一个对象 a.has('李四');//true a.has('李逵');//false //清除一个集合 a.clear(); //遍历一个集合 for(let v of b){ console.log(v); //111 //222 }
//Set集合实践 //设置两组数组 let a = [1,2,3,5,6,6]; let b = [2,3,4,5,7]; //a数组去重 const result = new Set(a);//1,2,3,5,6 //a与b交集 const result2 = [...new Set(a)].filter(item => { let b2 = new Set(b); if(b2.has(item))return true; else return false; }); console.log(result);//2,3,5 //简写语法 const r2 = [...new Set(a)].filter(item => new Set(b).has(item));//2,3,5 //a与b并集 const result3 = [...new Set(...a,...b)];//1,2,3,4,5,6,7 //a与b差集 const r2 = [...new Set(a)].filter(item => !(new Set(b).has(item)));//1,4,6,7
-
2020/12/31 es6 P32-P34
-
Map
//Map的基本语法及使用 //声明一个Map let m = new Map(); //给Map m添加一个普通类型的元素 m.set('name','kjkjkl');//第一个参数为键值key,第二个参数为值value //给Map m 添加一个对象键值类型的元素,值为方法 let n = { sex:'男' } m.set(n,function(){ console.log('我是一个方法'); }); //删除Map中的一个元素 m.delete('name'); //获取Map中的一个键的值 m.get(n);//f(); //声明一个变量用作存储Map中n键值的方法 let f = m.get(n); f();
-
Class
//声明一个Class class Phone{ //constructor方法(每个类中有且只有一个constructor方法,该方法采用固定名称)即:构造函数方法 constructor(brand,price){ this.brand = brand; this.price = price; } //声明一个功能方法 vivo(){ console.log('我是一部vivo手机'); } iphoneX(){ console.log('我是一部iphoneX,我比vivo手机贵'); } } //vivo手机初始化 let vivo = new Phone('vivo',1999); vivo.vivo();//我是一部vivo手机 //苹果X初始化 let iphonex = new Phone('iphoneX',9999); iphonex.iphoneX();//我是一部iphoneX,我比vivo手机贵
//class静态成员 //声明一个class class Phone{ //声明静态变量name static name = 'kjkjkl'; //生命静态方法f() static f(){ console.log('test test test'); } } //初始化类 let p = new Phone(); console.log(Phone.name);//kjkjkl console.log(p.name);//undefined Phone.f();//test test test p.f();//直接报错 //结论:静态化变量,方法,对象无法被赋值给初始化的对象直接读取
-
2021/1/1 es6 p35-p38
//class之类的继承 //声明一个父类Phone class Phone{ constructor(brand,price){ this.brand = brand; this.price = price; } call(){ console.log('我可以打电话'); } } //声明一个子类SmartPhone //固定写法extends class SmartPhone extends Phone{ constructor(brand,price,color,size){ //继承 固定写法super super(brand,price); this.color = color; this.size = size; } //生成成员函数 Photo(){ console.log('我可以照相'); } PlayGame(){ console.log('我可以打游戏'); } //继承/重写成员函数call() call(){ console.log('我可以打视频电话'); } } //实例化对象 let p = new SmartPhone('vivo',1200,'black',6.3); p.Photo();//我可以照相 p.PlayGame();//我可与打游戏 p.call();//我可以打视频电话 console.log(p);//SmartPhone{vivo,1200,black,6.3}Photo:f();PlayGame:f();/Phone:call():f()
//class中getter和setter设置 //声明一个类Phone class Phone{ //设置price的get get price(){ console.log('价格属性被读取了'); return '返回结果'; } //设置price的set //set中至少要有一个参数 set price(newVal){ console.log('价格参数被修改了'); } //实例化对象 let s = new Phone(); s.price = 'free';//价格参数被修改了 console.log(s.price);//1.价格参数被读取了2.返回结果 } //结论:使用场景{get:处理动态数据}{set:多种条件处理}
-
2021/1/2 es6 p39-p40
//数值扩展 //1.Javascript的最小精度 Number.EPSILON console.log(0.1 + 0.2);//0.3000000000004 非0.3 function eq(a,b){ if(Math.abs(a + b) < Number.EPSILON){ return true; }else{ return false; } } console.log(eq(0.1 + 0.2,0.3));//true //2.二进制和八进制 console.log(0b1010);//10 console.log(0o777);//511 console.log(100);//100 console.log(0xff);//255 //3.检测一个数是否为有限数 Number.isFinite console.log(Number.isFinite(100));//true console.log(Number.isFinite(0));//true console.log(Number.isFinite(Infinity));//false //4.检测一个数值是否为NaN Number.isNaN console.log(Number.isNaN(123));//false console.log(Number.isNaN(123/'test'));//true //5.字符串转整数,字符串转浮点数 Number.ParseInt||Number.parseFloat console.log(Number.ParseInt('123abc'));//123 console.log(Number.ParseFloat('1.23a'));//1.23 //6.判断一个数是否为整数 Number.isInteger console.log(Number.isInteger(10));//true console.log(Number.isInteger(10.2));//false //7.将数字的小数部分抹掉 Math.trunc console.log(Math.trunc(10.2));//10 //8.判断一个数字为正数 负数 还是0 Math.sign console.log(Math.sign(100),Math.sign(-100),Math.sign(0));//1 -1 0
//对象方法扩展 //1.判断两个值是否完全相等 Object.is console.log(Object.is(1,1));//true; console.log(Object.is(1,0));//false; console.log(Object.is(NaN,NaN));//true; console.log(NaN === NaN);//false //2.对象的合并 Object.assign let Config1 = { host:'127.0.0.1', port:8080, uid:'kjkjkl', pwd:'123456', add:'test' } let Config2 = { host:'localhost', port:80, uid:'lmf', pwd:'123' } Object.assign(Config1,Config2);//第一个对象属性会被第二个对象属性覆盖 console.log(Config1);//{host:'localhost',port:80,uid:'lmf',pwd:'123',add:'test'} //3.设置原型对象 setPrototypeOf let s1 = { name:'kjkjkl' } let s2 = { game:['CF','LOL','MC'] } Object.setPrototypeOf(s1,s2); console.log(s);//{name:'kjkjkl',_proto_:Object(play:['CF','LOL','MC'])} //获取原型对象 getPrototypeOf //截取上面例子 console.log(getPrototypeOf(s));//play:['CF','LOL','MC'],_proto_:Object
-
2021/1/4 es6 模块化
-
导出模块 export
//分别暴露 export let name = 'm1'; export function test(){ console.log('这里是m1,分别暴露'); }
//统一暴露 let name = 'm2'; function test(){ console.log('这里是m2,统一暴露'); } export { name, test }
//默认暴露 export default { name: 'm3', test: function(){ console.log('这里是m3,默认暴露'); } }
-
导入模块 import
//通用导入方法 import * as m1 from './这里填写模块文件路径/m1.js'; import * as m2 from './这里填写模块文件路径/m2.js'; import * as m3 from './这里填写模块文件路径/m3.js'; m1.test();//这里是m1,分别暴露 m2.test();//这里是m2,统一暴露 m3.default.test();//这里是m3,默认暴露 默认暴露的固定写法,方法或变量前加default
//解构赋值形式 import {name as m1_name,test as m1_test} from './这里填写模块文件路径/m1.js'; import {name as m1_name,test as m1_test} from './这里填写模块文件路径/m2.js'; import {default as m3} from './这里填写模块文件路径/m3.js'; m1_test();//这里是m1,分别暴露 m2_test();//这里是m2,统一暴露 m3.test();//这里是m3,默认暴露 //注意:解构赋值形式导入默认暴露固定写法default后必须加as 别名
//简便导入方式 --- 只针对于默认暴露 import m3 from './这里填写模块文件路径/m3.js'; m3.test();//这里是m3,默认暴露