xu455255849 / myblog Goto Github PK

//html
<div class="btn">
  <div class="change"></div>
</div>

//css

 .btn  {
      width: 100px;
      height: 20px;
      background: coral;
      border: 1px solid #5e6d82;
    }
    .change {
      width: 0;
      height: 20px;
      background: #2D93CA;
      transition: all 2s;
    }
    .btn:hover .change {
      width: 100px;
    }

没有原型对象
var foo = () => {};
console.log(foo.prototype) //undefined

无法使用new操作符
var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

箭头函数不绑定arguments,取而代之用rest参数…解决
function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]

// 意外的全局变量
functuon foo () { bar = 1} //函数里直接对未定义的变量赋值，导致变量存在顶部Window中，内存垃圾无法回收

//闭包变量被引用导致无法被回收
function fun2() {
    var obj = { a: 2 }
    return obj;
}	
var a =  fun2()

//被遗忘的定时器

function Test()  {  
    this.obj= {};
    this.index = 1;
    this.timer = null;
    var cache = []; // 内部变量，内存隐患...
    this.timer = window.setInterval(() =>{
        this.index += 1; 
        this.obj = {
            val: '_timerxxxxxbbbbxx_' + this.index,
            junk: [...cache]
        };
        cache.push(this.obj);
    }, 1);  
    console.warn("create Test instance..");
}  
test = new Test(); // JS对象开启定时器不断分配内存


...

typeof Vue
typeof React
typeof jQery	

class F {
  init () {
		console.log（1）
  }
}
var f = new F()

F.prototype.init = function () {
  console.log(2)
}

f.init() //2

头部：unshift / shift

中部：splice / concat

尾部： push / pop

function throttleAndDebounce(fn, delay, isThrottle) {
  let lastCallTime = 0, timer = null;
  return  (...args) => {
    if (isThrottle) {
      const now = Date.now()
      if (now - lastCallTime < delay) return
      lastCallTime = now
      fn(...args)
    } else {
      if (timer) clearTimeout(timer)
      timer = setTimeout( () => {
        fn(...args)
      }, delay)
    }
  }
}

var arr = [1,2,1]

arr.filter( (it, idx, arr) => {
  return arr.indexOf(it) === idx
})

// reduce
var reducer = (arr, cur) => {
  if ( arr.length === 0 || arr[arr.length - 1] !== cur) {
    arr.push(cur)
  }
  return arr
}
arr.sort().reduce(reducer, [])

<input id="file" type="file" />
var file = document.getElementById('file').files[0]
var reader = new FileReader()
    reader.onload = function (e) {
      $.post('/upload' , { "base64": e.target.result } , function () {})
    }
    reader.readAsDataURL(file)