微一案筆試題分享

1 哪些操做會引發內存泄漏，如何發現

一些常見的內存泄露代碼

// 意外的全局變量
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對象開啓定時器不斷分配內存


...

參考文章：

http://www.javashuo.com/article/p-qzzdhpyc-gr.html

https://github.com/wengjq/Blog/issues/1

如何查看內存佔用狀況

web

googol控制檯 》 performance 面板 > 勾選 Memory
點擊左上角的錄製按鈕。
在頁面上進行各類操做，模擬用戶的使用狀況。
若是內存佔用基本平穩，接近水平，就說明不存在內存泄漏。反之，就是內存泄漏了。

node

console.log(process.memoryUsage()); //node

2 如下代碼輸出

typeof Vue
typeof React
typeof jQery

function github Vue

object github React

function github Jquery

ps：話說我寫了這麼久Vue。還歷來沒操做過typeof vue。。。。

3 下面代碼輸出

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

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

f.init() //2

4 如何在數組頭部、尾部、中部增長/刪除

頭部：unshift / shift

中部：splice / concat

尾部： push / pop

參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

5 手寫防抖/節流 實現

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)
    }
  }
}

6 filter/reduce 實現數組去重

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, [])

7 原生實現 上傳base64 圖片

<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)

8 寫成3種前端下載文件方式

參考： http://www.javashuo.com/article/p-bazmfiao-p.html

ps：這也算！！？瀏覽器打開。。。心裏一度崩潰，真的是爲了面試而面試。。

9 手寫promise 實現

參考：

https://www.jianshu.com/p/43de678e918a

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7

10 vue實現數據綁定有什麼缺陷？做者爲何改用proxy實現

參考：https://zhuanlan.zhihu.com/p/50547367

後記

有些問題 我沒給出答案，只給出一些參考連接，主要是才疏學淺，不能給出一個絕對完美的答案；或者答案的內容量能夠再寫一篇深刻專研的文章，你們有什麼好的意見或者文章錯誤能夠留言補充；歡迎技術交流

ps：一年沒面試了第一次作這種筆試題，我表示一個筆都很久沒握過的人瑟瑟發抖。。。建議你們不要裸辭。。這個夏天有點冷。。。

若是以爲本文對你有所幫助，就star一下吧～大傳送之術！ 個人博客Github