类型别名
type Name = string;
type NameResolver = () => string
const getName = (n: NameResolver): Name => {
if (typeof n === 'string') {
return n;
} else {
return n();
}
};
类型别名常用于联合类型
字符串字面量类型
type EventNames='click'|'scroll'|'mousemove'
const handleEvent = (ele: Element, event: EventNames) => {
};
handleEvent(document.getElementById('hello'), 'scroll');
类型别名与字符串字面量类型都是使用type进行定义
环形仪表图
let template1=elem[0];
let myCharts5=echarts4.init(template1);
let total = 100;
let value = 75;
let option = {
title: {
text: `${value}%`,
left: 'center',
top: 'center', //top待调整
textStyle: {
color: '#fff',
fontSize: 20,
},
},
//背景圆
graphic: [{
type: 'circle',
left: 'center',
top: 'middle',
shape:{r:55},
style: {
fill: '#02154A',
},
},
/*最外层小圆环*/
{
type:'ring',
left:'center',
top:'middle',
shape:{
r:57,
r0:59
},
style:{
fill: '#192e5e',
}
}],
series: [
{
name: '',
type: 'gauge',
radius: '90%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 14,
zlevel:2,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 18,
lineStyle: {
8,
color: '#02154a'
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ''
}]
},
{
name: '',
type: 'pie',
radius: ['70%', '86%'],
center: ['50%', '50%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
// zlevel: 0,
label: {
normal: {
position: 'center',
}
},
data: [
{
value: value,
name: '',
itemStyle: {
normal: {
color: new echarts4.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#033bce'
}, {
offset: 1,
color: '#03bcfe'
}]),
}
}
},
{
value: total - value,
name: '',
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#003554'
}
}
},
{
name:'',
type: 'pie',
radius: ['70%', '86%'],
center: ['50%', '50%'],
z: 0,
itemStyle: {
normal: {
color: new echarts4.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1147A1'
},
{
offset: 0.5,
color: '#423DB3'
},
{
offset: 1,
color: '#1147A1'
}
]),
label: {
show: false
},
labelLine: {
show: false
}
},
},
label: {
normal: {
position: "center",
}
},
data: [100],
},
]
},
/*内圈*/
{
name: '',
type: 'gauge',
radius: '60%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 15,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length:2,
lineStyle: {
12,
color: '#192e5e'
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ''
}]
},
]
};
myCharts5.setOption(option)
新写法
/*判断报错信息*/
const handleErrors = (params) => {
if (params.length === 0) {
throw new Error('数组的长度不能为0')
}
if (params.some(val => typeof val !== 'number')) {
throw new Error('每一个元素都应该是Number')
}
if (params.some(val => val > Infinity || val < -Infinity)) {
/*最大值,最小值
* 9,007,199,254,740,991
* -9,007,199,254,740,991*/
throw new Error('每一个元素不能超过最大值,或者小于最小值')
}
}
const sum = (...params) => {
handleErrors(params);
return params.reduce((acc, val) => acc + val, 0)
}
//求最小值
const minNum=(...params)=>{
return params.reduce((acc,val)=>acc<val?acc:val)
};
console.log(minNum(1, 12, 1, 1, -1, 12))
//-1
class
class MathHandle {
constructor(x, y) {
this.x = x;
this.y = y;
}
add() {
return this.x + this.y
}
}
let m = new MathHandle(10, 20)
console.log(m.add())
再次提一些异步
const getUser = () => new Promise((resolve, reject) => {
resolve('zhangsan');
reject('失败')
}).then(resolver=>{
console.log(resolver)
})
async function add() {
console.log(1)
await getUser()
console.log(3)
}
add()
/*
* 1
zhangsan
3
* */
彻底弄懂怎么正确使用async/await
//微任务
const p1 = () => new Promise((resolve, reject) => {
resolve('微任务')
}).then(res => {
console.log(res)
})
//宏任务
const p2 = () => new Promise(res => setTimeout(() => {
res('宏任务')
},1000)).then(res => {
console.log(res)
})
const add = async () => {
console.log(1)
await p2()
await p1()
console.log(4)
}
add()
简化成函数
const pipeAsync = (...args) => arg => args.reduce((acc, val) => {
return acc.then(val)
}, Promise.resolve(arg))
const sum = pipeAsync(
x => x + 1,
x => new Promise(resolve => setTimeout(() => {
resolve(x * 4)
}, 1000)),
x => new Promise(res => res(x * 10)),
x=>x+10
);
(
async () => {
//5+1 *4 *10 +10
console.log(await sum(5))
}
)()
const arrayFromRange = function arrayFromRange(min, max) {
const output = []
for (let i = min; i <= max; i++)
output.push(i)
return output
}
console.log(arrayFromRange(1, 10))
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
//优化后
const arrayFrom = (min, max) =>
Array.from({length: max - min+1}, (_, i) => i + min)
console.log(arrayFrom(1, 10))
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
虚拟ＤＯＭ
https://github.com/wavesoft/dot-dom
有时间好好看看