文末
如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。
同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
});
// 首次 请求地图的总数据数据 用来初始化数据
axios
.get(https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
)
.then((res: any) => {
// 存一次数据 用来找子级
mapData.value = res.data;
// registerMap 注册一个地图 mapData 地图的数据包 根据不同的数据渲染不同的地图
echarts.registerMap(“china”, res.data);
// 这个调用是进行地图的渲染
mapRender();
});
// 首次 请求疫情的数据 因为接口 设计到跨域 所以要进行 proxy 进行代理
axios
.get(“/api/news/wap/fymap2020_data.d.json?_=1580892522427”)
.then((res: any) => {
// 将数据备份一次 用来查找子级
mapEpidemic.value = res.data.data.list;
// 这个调用是疫情数据的渲染 mapRender 处理数据的函数
let data = mapRender(res.data.data.list);
// option 数据传入进去 设置数据
map.setOption(data);
});
});
// 处理数据的函数 以及 echarts 的option 数据配置 这个函数非常重要
const mapRender = (data: any = [], mapData: any = []) => {
let mapLocal: any = [];
mapData.forEach((value: any, index: number) => {
console.log(value.properties.name);
mapLocal.push(value.properties.name);
});
let city = [“北京”, “重庆”, “上海”, “天津”];
let area: any = {
内蒙古: “内蒙古自治区”,
新疆: “新疆维吾尔自治区”,
广西: “广西壮族自治区”,
宁夏: “宁夏回族自治区”,
西藏: “西藏自治区”,
澳门: “俺们特别行政区”,
香港: “香港特别行政区”,
};
// 便利处理字典
let result = data.map((i: any, index: number) => {
let name = “”;
// 有 conNum 说明有子级
if (i.conNum) {
return {
name: mapLocal[index],
value: Number(i.conNum),
};
} else {
if (city.find((x: any) => x === i.name)) {
name = i.name + “市”;
} else if (area[i.name]) {
name = area[i.name];
} else {
name = i.name + “省”;
}
return {
name,
value: Number(i.value),
};
}
});
// echarts 的数据配置选项 具体看官网
let option = {
title: {
text: “中国地图”,
left: “right”,
},
tooltip: {
trigger: “item”,
showDelay: 0,
transitionDuration: 0.2,
},
visualMap: {
left: “right”,
min: 0,
max: 19000,
inRange: {
color: [
“#313695”,
“#4575b4”,
“#74add1”,
“#abd9e9”,
“#e0f3f8”,
“#ffffbf”,
“#fee090”,
“#fdae61”,
“#f46d43”,
“#d73027”,
“#a50026”,
],
},
text: [“高”, “低”],
calculable: true,
},
series: [
{
name: “中国疫情地图”,
type: “map”,
roam: true,
map: “china”,
// 设置地图的文字
label: {
show: true,
fontSize: 8,
color: “#fff”,
},
emphasis: {
label: {
show: true,
},
},
data: result,
},
],
};
return option;
};
vue.config.js文件夹里面写入配置跨域
const {
defineConfig
} = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
open: true, // 自动打开浏览器
// proxy: “https://sug.so.360.cn”, 这个接口必须跨域
react和vue的比较
相同
1)vitual dom
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
om
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
[外链图片转存中…(img-S199Fdxk-1715832482446)]
[外链图片转存中…(img-Eqd4A2ml-1715832482447)]