本周学习总结(原生+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 的异同

相同点

1. 都是改变this的指向

2. 都可以只传递一个参数

   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',
                ]