本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长
dsa.js(数据结构)
拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码
GoJS
有时间要好好研究下
https://github.com/NorthwoodsSoftware/GoJS
sketchjs 画图
http://soulwire.github.io/sketch.js/
发现一个api直接看怎么实现的
https://collect.js.org/api
JavaScript 语言精髓
https://lxchuan12.github.io/js-book/#array
对象
属性名可以是包括空字符串在内的所有字符串
属性值可以是除了undefined值之外的任意值
检索
.和[]推荐点`.`表示法,尝试从undefined的成员属性中取值将会导致TypeError异常 `更新` 如果属性名已经存在对象里,那么属性的值会被替换,如果之前没有这个属性名,就会将该属性将被扩展到对象里 `引用` 对象通过引用来传递,他们永远不会被复制 `原型` 所有通过对象字面量创建的对象都链接到`Object.prototype` 创建新对象时,可以选择某个对象作为它的原型 原型连接只有在检索值得时候才被用到,如果尝试去获取对象某个属性值,但对象没有此属性名,那么就会从原型中获取属性值,如果那么原型对象也没有该原型中寻找,只要最后达到Object.prototype, 如果想要得属性完全不存在原型链中,那么结果就是`undefined`值,这个过程称为委托
underscore源码解读
https://github.com/lessfish/underscore-analysis
https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/base/%E7%BB%93%E6%9E%84.html
用void 0 代替undefined
1. 低版本IE中能被重写,但是undefined在ES5已经是全局对象的一个只读属性了,他不能被重写,但是在局部作用域中,还是可以被重写的
const add=()=>{
let undefined=3;
console.log(undefined)
}
add();//3
2. void运算符能对给定的表达式求值,然后返回undefined,
也就是void后面随便跟上一个表达式,返回的都是undefined
其中 void 0 最短
void 1 //undefined
void (1+1) //undefined
void (new Date()) //undefined
为了节省字段,很多代码压缩工具,正是将undefined用 void 0 替换
0.._ 你也可以用这个(这个更短) 其实的意思就是 0['_']
使用 == 还是有一定的风险
console.log(undefined == null) //true
console.log(undefined !== null) //true
call 和apply 的异同
相同点
都是改变this的指向
都可以只传递一个参数
function doSth(){ console.log(this); } console.log(doSth.apply('0'))//[String: '0'] console.log(doSth.call(true))//[Boolean: true]
不同点
apply只接收两个参数,第二个参数可以是数组也可以是类数组,其实也可以是对象,后序参数忽略不计
function doSth(a,b){ console.log(this); console.log([a, b]) } console.log(doSth.apply('0',[1,2])) // [String: '0'] [1,2] console.log(doSth.call(true,1,2)) //[Boolean: true] [1,2]函数的第一个参数 thisArg值被指定为
null和undefined时,this值会自动替换为指定全局对象,原始值则会自动包装,也就是new Object()
判断对象
把类型为function 和Object 变量都算做对象,而且去除掉null
const isObject = obj => {
let val = typeof obj;
return val === 'function' || val === 'object' && !!val
}
//简写
const isObject = obj =>
(val => val === 'function' || val === 'object'&&!!val)(typeof obj)
判断其他类型
'Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error' 这些类型的判断
const _ = {};
['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error'].forEach(val => {
_['is' + val] = obj => Object.prototype.toString.call(obj) === '[object ' + val + ']'
})
判断NaN
const isNaNs=val=>typeof val==='number'&&val!==val;
判断元素是否是DOM元素
const isElement = type => !!(type && type.nodeType === 1)
判断两个数是否相等
const eq = (a, b) => a === b && (a !== 0 || 1 / a === 1 / b)
位运算
num & 1 相当于 num%2
js-base64
https://github.com/dankogai/js-base64/blob/master/base64.js
打印编码表
var b64chars
= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
//b64tab 是编码好的一个对象
var b64tab = function(bin) {
var t = {};
for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
return t;
}(b64chars);
//简化
let b64 = (()=>
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.
split('').reduce((acc, val,index) => {
acc[val]=index;
return acc
},{})
)()
原生技巧
const isInt=x=>x%1===0;
const isObject=obj=>Object.prototype.toString.apply(obj)==='[object Object]';
查某个字符在字符串的重复次数
const count = (str, substr) => {
let count = 0;
let pos = str.indexOf(substr)
while (pos >= 0) {
count++
pos = str.indexOf(substr, pos + 1)
}
return count
}
let jStat = {}
function extend(obj) {
let i, j
if (arguments.length === 1) {
for (j in obj) {
jStat[j] = obj[j]
}
return this
}
for (i = 1; i < arguments.length; i++) {
for (j in arguments[i]) {
obj[j] = arguments[i][j]
}
}
return obj
}
extend({name:'age',age:'xxx',aa:'vvv'})
console.log(jStat)
//{ name: 'age', age: 'xxx', aa: 'vvv' }
//简化
const extend = (...obj) => {
obj.forEach(val => {
Object.keys(val).forEach(item => {
jStat[item] = val[item]
})
})
return jStat
}
console.log(extend({name: 'age'},{age:'xxx'}))
//{ name: 'age', age: 'xxx' }
const min = arr => {
let i = 0,
low = arr[0];
while (++i < arr.length) {
if (arr[i] < low) {// max arr[i]>low
low = arr[i]
}
}
return low
}
const sum = arr => {
let sum = 0;
let i = arr.length;
while (--i >= 0) {
sum += arr[i]
}
return sum
}
中位数
先排序
偶数 8 4,5位数的和除以2
奇数 就是中间的那个数
互斥
xor(true, true); // false
xor(true, false); // true
xor(false, true); // true
xor(false, false); // false
const xor = (...args) => args.reduce((a, b) => !(a && b) && !(!a && !b));
解构
let o = {
name: 'aaa',
age: 'bbb',
xxx:'ccc'
};
let {name, age} = o;
console.log(name, age);
//'aaa' 'bbb'
for (let item in o) {
console.log(item);//name age
}
let {name,...args}=o;
console.log(name); //aaa
console.log(args);//{ age: 'bbb', xxx: 'ccc' }
一道有趣的面试题
let a={name:'xxx'}
let c={key:'xxx'}
let b={};
b[a]=123;// 属性的a 从对象转成字符串 [object Object]
b[c]=345;// c 同上
console.log(b)//{ '[object Object]': 345 }
模板字符串(标签模板)
它可以紧跟在函数后面,该函数将调用来处理这个模板字符串,称为"标签模板"
//也就是第一个参数是字符串切割的数组,第二个参数是一个迭代的类数组,也就是变量
const template=(strings,...keys)=>{
console.log(strings) //[ 'wo shi', 'yige sha ', '' ]
console.log(keys) //[ '我', '傻' ]
return keys //可以用return 返回自己需要的
}
let a='我'
let b='傻'
let c=template`wo shi${a}yige sha ${b}`
console.log(c) //[ '我', '傻' ]
angular8的时候你发现使用@ViewChild编辑器报错
父组件拿到子组件的ID
@ViewChild('unable',{static:true}) whose!: ElementRef;
Echarts 地图相关知识
let seriesA=[
{
type:'lines', //攻击线的球
zlevel:2, //Canvas 分层,大的在小的上面
effect:{ // 线特效的配置
show:true,//显示特效
period:2,//箭头指向速度,值越小速度越快
trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle:{
normal:{//正常的模式
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
color:'颜色'
}
},
data:[
[
{coord:[127.9688,45.368],value:0.88}, //起点
{coord:[126.9688,45.868]}//终点
],
...
]
},
// 涟漪
{
type: 'effectScatter', //涟漪特效,就是地址的波纹
coordinateSystem: 'geo',//坐标系:使用地理坐标系
zlevel: 2,// 分层,小的图新会被大的图形覆盖
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式两种 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大,就是半径
},
label: {//图形的标签
normal: {//默认模式
show: true,//显示标签(文字)
position: 'right', //显示位置
offset: [5, 0], //偏移设置,[x,y]
formatter: function(params) { //圆环显示文字;标签内容格式器
return params.data.name;
},
fontSize: 13
},
// emphasis: {// 高亮的标签和图形样式,就是鼠标附上去,标签的变化
// show: true
// },
},
symbol: 'circle',//起点:标记的图形
// symbolSize:8, 默认为10
data:[
{name:'黑龙江',value:[127.9688,45.368,0.88]},
...
]
},
//被攻击点 ,跟攻击点的属性类似
//type:'scatter' //气泡图
//symbol: 'pin',
]
let seriesA=[
{
type:'lines', //攻击线的球
zlevel:2, //Canvas 分层,大的在小的上面
effect:{ // 线特效的配置
show:true,//显示特效
period:2,//箭头指向速度,值越小速度越快
trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle:{
normal:{//正常的模式
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
color:'颜色'
}
},
data:[
[
{coord:[127.9688,45.368],value:0.88}, //起点
{coord:[126.9688,45.868]}//终点
],
...
]
},
// 涟漪
{
type: 'effectScatter', //涟漪特效,就是地址的波纹
coordinateSystem: 'geo',//坐标系:使用地理坐标系
zlevel: 2,// 分层,小的图新会被大的图形覆盖
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式两种 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大,就是半径
},
label: {//图形的标签
normal: {//默认模式
show: true,//显示标签(文字)
position: 'right', //显示位置
offset: [5, 0], //偏移设置,[x,y]
formatter: function(params) { //圆环显示文字;标签内容格式器
return params.data.name;
},
fontSize: 13
},
// emphasis: {// 高亮的标签和图形样式,就是鼠标附上去,标签的变化
// show: true
// },
},
symbol: 'circle',//起点:标记的图形
// symbolSize:8, 默认为10
data:[
{name:'黑龙江',value:[127.9688,45.368,0.88]},
...
]
},
//被攻击点 ,跟攻击点的属性类似
//type:'scatter' //气泡图
//symbol: 'pin',
]
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬
