webpack
1.安装nodejs
2.安装npm install -g webpack
bug:
npm 安装包报错 rollbackFailedOptional
https://blog.csdn.net/qq_34351732/article/details/78705997
npm config rm proxy
npm config rm https-proxy
然后使用npm install -g cnpm –registry=https://registry.npm.taobao.org安装淘宝的cnpm
Css-loader:
js形式
命令行形式
– watch 实时更新 --progress 进度 --display-moudles 显示模块 --display-reason 显示原因
Webpack.config.js 配置:
可以在package.json 配置webpack 命令
然后npm run webpack
Entry 入口:
数组
Entry:[./js/index1.js,./js/index2.js]
对象
Entry:{
Package1:’./js/index.js’,}
Output:
Babel-loader :安装
Npm install --save-dev babel-loader babel-core
Npm install @babel/core --save
Npm install @babel/preset-env --save-dev
使用:
Babel reset— package.json
Bug:
Es6
19/3/4
变量:
Es5:var(全局作用域)
Es6:
let(相当于var)只作用于块级作用域,1 没有预解析。
const(常量定义) object.freeze(对象)。
Const config ={
Host:
test
}
解构赋值:
let a=1,b=2,c=3;
Let [a,b,c]=[1,2,3];
Console.log(a,b,c);
左右两边,结构要保持一致,
Let[a,[b,c]]=[1,[2,3]];
Let json={name:test,age:13,sex:male};
Let {a:a1,b:b1,c:c1}=json;
可以给默认值:
Let {a,b,c=’c’}={‘a’,’b’};
交换赋值:
let a=12;
Let b=2;
Let [a,b]=[b,a];
字符串模板:
Let name=’a‘;
Let sex=’b’;
Let str=”这个人叫
n
a
m
e
,
性
别
是
{name},性别是
name,性别是{sex}”;
Srt.includes() 返回值:true/false
Navigator.userAgent.includes(‘chrome’) 判断浏览器
str.endwidth()
Str.startwidth()
Str.repeat(次数);
函数的默认参数
Function show({x=0,y=0}={}){
}
Show();
函数默认参数已经定义,不能重复定义
扩展运算符,reset运算符
…
Let arr=[a,b,c];
Console.log(…arr); 数组展开
Let a =Array.prototype.slice.call(arguments); 排序
a.sort();
箭头函数
()=>return 东西
()=>{
语句
Return
}
this问题,定义函数所在的对象,不在是运行时所在的对象
箭头函数里面没有arguments
6.数组热闹的循环
Arr.foreach(
Function(val,index,arr){}
)
Arr.map((val,index,arr)=>(
Console.log(val,index.arr);
));
非常有用,映射,需要配合return,返回是一个新的数组
Arr.filter();
Arr.some(); 类似查找 符合某个元素就 返回true
Arr.every();
Array.of(‘abc’,’bcd’,’cde’) 把一组值转成数组
Array.from()
Arr.find() 没找到返回undefine
Arr.findindex() 没找到返回-1
Arr.fill(‘填充的东西’,开始位置,结束位置);
object
Object.is(‘nan’,’nan’) 判断两个对象是否相等
Let js={a:1};
Let js2={b:1,a:2};
Let js3={c:1};
Object.assign({},json,json2,json3) 1.复制一个对象2.用来合并对象
For(let key of object.keys(js2)){
Console.log(key);
}
Let item of entries(json)
9.Promise
作用:解决异步回调问题
Let promise=new promise(function(resolve,reject){
If(a==10){
Resolve(‘成功’);
}else{
reject(‘失败’);
}
});
Promise.then(res=>{
Console.log(res);
},error=>{
Console.log(err);
}).catch(){};
Promise.resolve(“aaa”); 将东西转换成一个resolve状态的promise对象
Promise.reject(“bb”);
Promise.all([p1,p2,p3]).then(res=>{}) 三个必须为成功状态
Promise.race([p1,p2,p3]) 只要一个成功就行
模块化
Export const a=1;
Export const b=2;
Export const c=3;
Export {
A as a,b as ba,} 语法二
Export default
Import {a,b,c} from ‘./moudles/1.js’;
1写在任何位置,会自动提升顶部
2导出去模块内容,如果里面有定时器更改,外面也会改动
3import只会导入一次。
4.不可写到if语句里
Import * as modto from ‘./moudles/1.js’
动态引入,是个promise对象类似于nodejs:
Import(‘js文件’).then(res=>{ })
类和继承
Const person= class{
Constructor(){
}
aaa{ 方法名可以为变量
}
}
静态方法
Class person{
Static show(){
}}
Person.show(); 可直接调用
继承
Super(arug); 继承父类的属性
Super.方法名(); 继承父类的方法
12.symbol&generator
generator函数
解决异步,深度嵌套问题 async()
语法:
Function * gen(){
Yield ‘welcome’;
Yield ‘to’;
Return ‘test’;
}
Let g1=gen();
Console.log(g1.next()); //{value:’welcome’,done:false}
遍历
For (let val of g1 ){
Console.log(val);}
解构:
Let [a,b]=gen();
…gen();
文件读写系统
promise方式
Generator方式
async方式
1await后面可以是promise对象,也可以是数字、字符
2Async 函数返回也是promise对象
3只要一个状态为reject,后面中断执行(try{}catch{}解决)
13.set数据结构
Let setarr=new set(‘1’,’3’,’4’); 类似数组,但不能用重复值
Set.add() 添加
Set.delete 删除
Set.has() 是否有值
Set.size()
Set.clear()
new weakset({}) 存储json数据
Map
Map.set(key, value) key可以为任意类型
Map.get(key)
Map.delete()
Map.has()
Map.clear()
Weakmap key只能是对象
16.数字变化 和math新增的东西
二进制:
let a =0b101010
八进制
Let a =0o666
Number.isfinite(a) 判断是不是数字
Number.isnan()
Number.isinteger() 判断是不是整数
安全整数:
-(2^53)-1 到2^53-1
Number.isSafeinteger()
Math.trunc(4.55) 保留整数
Math.sign() 判断是否正数 ,正为1,负为-1,0为0
Math.cbrt() 计算一个数的立方根
取年月日
命名捕获
/(?\d)-(?{2})/