前言

關於面試

前端水平的三個層次

基層工程師-基礎知識
高階工程師-專案經驗
架構師- 解決方案

幾個面試題

題目很多，做具有代表的題目，舉一反三

js 中使用 typeof 能得到哪些型別（==js 變數型別==）
何時使用 === 何時使用 == ？（==強制型別轉換==）
window.onload 和 DOMContentLoaded 的區別（==瀏覽器渲染過程==）
用 js 連續建立 10 個 <a> 標籤，點選的時候彈出來對應的序號 (==作用域==)
簡述如何實現一個模組載入器，實現類似 require.js 的基本功能（==js 模組化==）
實現陣列的隨機排序（==JS 基礎演算法==）

思考

拿到面試題第一時間看到的是什麼（==考點==）
如何看待永遠做不完的題海（==以不變應萬變==）
如何對待接下來遇到的面試題？（==總結考點並擴充套件再反思題目==）

基礎知識

js 基礎三座大山

原型原型鏈
作用域閉包
非同步單執行緒

面試題

1. js 中使用 typeof 能得到哪些型別

2. 何時使用 === 何時使用 ==

if (obj.a == null){
    // 這裡相當於 obj.a === null || obj.a ===undefined ，因為 undefined == null 值為true
    // 這是 JQuery 中推薦的寫法， 其餘情況全部用 === （避免程式碼風險有程式碼潔癖） 

}

3. JS 中有哪些內建函式

4. JS 變數按照儲存方式區分為哪些型別，並描述其特點

5. 如何理解 JSON

知識點

變數型別：值型別和引用型別（指標）

引用型別包括：陣列函式物件;引用型別公共空間，是指標

        var a=100;
        var b=a;
        a=200;
        console.log(b) //100

        var a={age:20};
        var b=a;
        b.age=21;
        console.log(a.age) //21

typeof只能區分值型別的詳細型別，對引用型別無能為力，但可以區分出函式來

        typeof undefined;//undefined
        typeof 'abc';//string
        typeof 123;//number
        typeof true;//boolean
        typeof {};//object
        typeof [];//object
        typeof null;//object
        typeof console.log//function

強制型別轉換(值型別的計算)
- ①字串拼接
- ②==運算子
- ③if語句
- ④邏輯運算（布林操作符邏輯非、邏輯與、邏輯或）
  - 邏輯非！ (結果總是 true/fasle )
    - 如果運算元是一個物件，返回 false
  - 邏輯與 &&
    - ==如果第一個操作是物件則返回第二個運算元==
    - 如果第二個運算元是物件，則只有在第一個運算元的求值結果為 true 的情況下才會返回該物件
    - 如果兩個運算元都是物件，則返回第二個運算元
    - 如果第一個運算元是 null，則返回 null
    - 如果第一個運算元是 NaN，則返回 NaN
    - 如果第一個運算元是 undefined ，則返回 undefined。
    - 邏輯與操作符屬於斷路操作，如果第一個操作符能夠決定結果，那麼就不會再對第二個運算元求值。
  - ==邏輯或 ||==
    - 如果第一個運算元是物件，則返回第一個運算元
    - 如果兩個運算元都是物件，則返回第一個運算元
    - 如果第一個運算元的求值結果為 false ，則返回第二個運算元
    - 如果兩個運算元都是 NaN/null/undefined ，則返回 NaN/null/undefined

上面四種操作可能導致強制型別轉換

       var a=100+10;//110
       var b=100+'10'//'10010'

       100 =='100'//true
       0==''//true
       null==undefined//true

       var a=true;
       if(a){
          //...
       }
       var b=100;
       if(b){
          //...
       }
       var c='';
       if(c){
          //...
       } 

       console.log(10&&0)//0
       console.log(''||'abc')//abc
       console.log(!window.abc)//true
       
       var a=100;
       console.log(!!a)//true

面試題解答 1

    面試題1、JS中使用typeof能得到的哪些型別？
            typeof undefined;//undefined
            typeof 'abc';//string
            typeof 123;//number
            typeof true;//boolean
            typeof {};//object
            typeof [];//object
            typeof null;//object
            typeof console.log//function

            typeof只能區分值型別的詳細型別，對引用型別無能為力，但可以區分出函式來
     面試題2、何時使用===何時使用==？
            if(obj.a==null){
                //這裡相當於obj.a===null||obj.a===undefined,簡寫形式
                //這是jquery原始碼中推薦的方法，其他的都用===
            }
     面試題3、JS中有哪些*內建函式*--資料封裝類物件？
          //JS作為單純語言的內建函式
            Object
            Array
            Boolean
            Number
            String
            Function
            Date
            RegExp
            Error
            //Global瀏覽器內建物件
            //Math是物件，不是函式
     面試題4、JS變數按照儲存方式區分為哪些型別，並描述其特點
            //分為值型別和引用型別
            //值型別
            var a=10
            var b=a
            a=11
            console.log(b)//10

            //引用型別
            var obj1={x:100}
            var obj2=obj1
            obj1.x=200
            console.log(obj2.x)//200
            值型別直接儲存的是值
            引用型別儲存的是指向值的指標，這樣做是為了節省記憶體
            值型別的值賦值後不會相互干預
            引用型別的賦值是變數指標的賦值，不是真的值的拷貝，他們的賦值是相互干預的。
     面試題5、如何理解JSON?
            //JSON只不過是一個JS對像而已，和MATH一樣
            JSON.stringfy({a:10,b:20})
            JSON.parse('{"a":10,"b":20}')
            //注意:JS中為false的為 0 NaN null undefined '' false

原型和原型鏈

  *建構函式*
     function Foo(name,age){
        this.name=name;
        this.age=age;
        this.class="class-1";
        //return this;//預設有這一行
     }
     var f=new Foo('zhangsan',20)
     var f1=new Foo('lisi',22)//建立多個物件
     //new物件時函式中的this初始化為空物件，引數賦值完後返回this給f和f1
  *建構函式--擴充套件*
     var a={}其實是var a=new Object()的語法糖
     var a=[]其實是var a=new Array()的語法糖
     function Foo(){...}其實是var Foo=new Function(...)
     //使用instanceof判斷一個函式是否是一個變數的建構函式
     //物件，陣列，函式的建構函式其實是Object,Array,Function
     //判斷一個變數是否是'陣列'  變數 instanceof Array

原型規則(是學習原型鏈的基礎)

所有的引用型別(陣列，物件，函式)，都具有對像特性，即可自由擴充套件屬性（除了null）
所有的引用型別（陣列，函式，物件），都有一個 _proto_ 屬性，屬性值是一個普通物件
所有的函式，都有一個 prototype 屬性，屬性值也是一個普通的物件
函式的 prototype 稱顯式原型，引用型別的 _proto 成為隱式原型
所有的引用型別（陣列，函式，物件），其 _proto_ 屬性值都指向其建構函式的 prototype 屬性值
當試圖獲取一個物件的某個屬性時，如果這個物件本身沒有這個屬性，那麼會去它的_prot__(即它的建構函式的prototype)

image

         var obj={};obj.a=100;
         var arr=[];arr.a=100;
         function fn(){}
         fn.a=100;

         console.log(obj.__proto__);
         console.log(arr.__proto__);
         console.log(fn.__proto__);

         console.log(fn.prototype)

         console.log(obj.__proto__===Object.prototype)


        function Foo(name,age){
            this.name=name;
        }             
        Foo.prototype.alertName=function(){
             alert(this.name)
        }
        var f=new Foo('zhangsan');
        f.printName=function(){
            console.log(this.name);
        }
        f.printName();
        f.alertName();

        //迴圈物件自身的屬性
        var item;
        for(item in f){
          //高階瀏覽器已經在for in中遮蔽了來自原型的屬性
          //但是這裡建議大家還是加上這個判斷，保證程式的健壯性
          if(f.hasOwnProperty(item))
              console.log(item);
        }

  *原型鏈*
     f.toString()//要去f.__proto__.__proto__中去找
  *instanseof*
     **注意:** //用於判斷引用型別屬於哪個建構函式的方法
      f instanceof Foo的判斷邏輯是:
         f的__proto__一層一層向上找，能否對應到Foo.prototype
      f instanceof Object也是正確的

面試題解答 2

面試題1、如何準確判斷一個變數時陣列型別？
           var arr=[]
           arr instanceof Array //true
           typeof arr//object,typeof是無法判斷是否是陣列的
    面試題2、寫一個原型鏈繼承的例子
       ①function Animal(){
          this.eat=function(){
             console.log('animal eat');
          }
       }
       function Dog(){
          this.bark=function(){
             console.log('dog bark')
          }
       }
       Dog.prototype=new Animal();
       var hashiqi=new Dog()

       ②function Elem(id){
           this.elem=document.getElementById(id);
       }
       Elem.prototype.html=function(val){
          var elem=this.elem;
          if(val){
              elem.innerHTML=val;
              return this;//鏈式操作
          }else{
             return elem.innerHTML;
          }
       }
      Elem.prototype.on=function(type,fn){
         var elem=this.elem;
         elem.addEventListener(type,fn);
         return this;
      }
      var elem=new Elem("div1");
      elem.html("<p>hello world</p>").on("click",function(){alert("clicked")}).html("<p>javascript</p>");
    面試題3、描述new一個物件的過程
       ①建立一個新物件
       ②this指向這個新物件
       ③執行程式碼，即對this賦值
       ④返回this
    面試題4、zepto(或其他框架)原始碼中如何使用原型鏈
       ①閱讀原始碼是高效提高技能的方式
       ②但不能“埋頭苦鑽”有技巧在其中
       ③慕課網搜尋“zepto設計和原始碼分析”

執行上下文

js 是解釋型語言不是編譯型語言，所以有些錯誤在編寫程式時不會報錯，什麼時候執行什麼時候報錯

範圍：一段<script>或者一個函式之內都會生成一個上下文
全域性：變數定義，函式宣告 //執行之前，一段<script>會生成全域性上下文
函式：變數定義，函式宣告，this，arguments //函式執行之前會生成函式上下文
注意：‘函式宣告’和‘函式表示式’的區別

    console.log(a);//undefined
    var a=100

    fn('zhangsan') //'zhangsan' 20
    function fn(name){
       age=20;
       console.log(name,age);
       var age;
    }

this

this要在執行時才能確認值，定義時無法確認

    var a={
       name:"A",
       fn:function(){
           console.log(this.name)
       }
    }
    a.fn()  //this===a
    a.fn.call({name:B}) //this==={name:'B'}
    var fn1=a.fn;
    fn1() //this===window

    使用場景
    ①作為建構函式執行
       function Foo(name){
          //this={};
          this.name=name;
          //return this
       }
       var f=new Foo('zhangsan')
    ②作為物件屬性執行
        var obj={
            name:'A',
            printName:function(){
                console.log(this.name)
            }
        }
        obj.printName();
    ③作為普通函式執行
       function fn(){
          console.log(this)  //this===window
       }
       fn()
    ④call apply bind
       function fn1(name,age){
          alert(name);
          console.log(this)  //this===window
       }
       fn1.call({x:100},'zhangsan',20)
       fn1.apply({x:100},['zhangsan',20])
       var fn2=function(name,age){
          alert(name);
          console.log(this)  //this==={x:100}
       }.bind({x:100})//bind只能用函式表示式，函式宣告不可用，會報錯
       fn2('zhangsan',200)

作用域

       ①沒有塊級作用域
            if(true){
                var name='zhangsan'
            }
            console.log(name)//'zhangsan'
       ②只有全域性和函式作用域
            var a=100;
            function fn(){
                var a=200；
                console.log('fn',a)
            }
            console.log('global',a)
            fn()

作用域鏈

       var a=100
       function fn(){
               var b=200
               //當前作用域沒有定義的變數，即'自由變數'
               console.log(a)

               console.log(b)
       }
       fn()


       var a=100;
       function F1(){
          var b=200;
          function F2(){
              var c=300;
              console.log(a);//a是自由變數
              console.log(b);//b是自由變數
              console.log(c);
          }
          F2()
       }
       F1();

==注意==：函式的父級作用域是函式定義時候的作用域，不是函式執行時候的作用域,也就是說那個作用域定義了這個函式，這個函式的父級作用域就是誰，跟函式執行沒有關係，函式自由變數要到父級作用域中找，就形成了作用域鏈

閉包

實際開發中閉包的應用：封裝變數，收斂許可權

     function F1(){
          var a=100;
          //返回一個函式(函式作為返回值)
          return function(){
              console.log(a);//自由變數，父作用域尋找
          }
     }
     //f1得到一個函式
     var f1=F1();
     var a=200;
     f1();//100


     閉包使用場景
     ①函式作為返回值
     ②函式作為引數傳遞(函式自由變數要到父級作用域中找)
       function F1(){
          var a=100;
          return  function(){
              console.log(a);
          }
       }
       var f1=F1();
       function F2(fn){
           var a=200
           fn();(自由變數要到宣告定義時的父作用域中找，和執行的作用域沒有關係)
       }
       F2(f1);//100

面試題解答 3

問題1、說一下對變數提升的理解
            ①變數的定義
            ②函式的宣告（注意和函式表示式的區別）
      問題2、說明this幾種不同的使用場景
             參考上文**this**
      問題3、建立10個`<a>`標籤，點選的時候彈出來對應的序號
            var i;
            for(i=0;i<10;i++){
            (function(i){
               var a=document.createElement('a');
               a.innerHTML=i+'<br>';
               a.addEventListener('click',function(e){
               e.preventDefault();
               alert(i);
              })
              document.body.appendChild(a);
              })(i);//相當於建立了10個函式
            }

      問題4、如何理解作用域
         ①自由變數
         ②作用域鏈，即自由變數的查詢
         ③閉包的兩個場景
      問題5、實際開發中閉包的應用
      //閉包實際應用中主要用於封裝變數，收斂許可權
      function isFirstLoad(){
             var _list=[];
              return function(id){
                 if(_list.indexOf(id)>=0){
                     return false;
                 }else{
                    _list.push(id);
                    return true;
                 }
              }
      }
      //使用
      var firstLoad=isFirstLoad();
      firstLoad(10);
      firstLoad(10);
      firstLoad(20);
    //你在 isFirstLoad 函式外面，根本不可能修改掉_list的值

非同步

何時需要非同步

①在可能發生等待的情況下
②等待過程中不能像alert一樣阻塞程式執行
③因此，所以的”等待的情況”都需要非同步

前端使用非同步的場景

①定時任務：setTimeout，setInterval
②網路請求：ajax請求，動態載入
③事件繫結

console.log(100) 
setTimeout(function(){ 
console.log(200) 
},1000) 
console.log(300) //100 300 200

非同步示例

console.log('start');
$.get('./data1.json',function(data1){
       console.log(data1);
})
console.log('end')//'start'  'end'   data1



console.log(start);
var img=document.createElement('img')
img.onload=function(){
        console.log('loaded')
}//圖片載入完執行
img.src='/xx.png';
console.log('end');//start end loaded


console.log('start')
document.getElementById('btn1').addEventListener('click',function(){
       alert('clicked');
})//點選時才會執行
console.log('end');//start clicked end

同步

console.log(100)
alert(200);
console.log(300)  //100 200 300

非同步和單執行緒

js 是單執行緒的語言，所以需要非同步

console.log(100) 
setTimeout(function(){ 
console.log(200) 
}) 
console.log(300) //100 300 200

上述非同步程式碼的執行過程如下

執行第一行列印100
setTimeout 非同步執行，先暫存起來
列印 300
待所有程式執行完，處於空閒狀態時，拿到暫存的函式在指定的時間後執行

面試解答 4

問題1、同步和非同步的區別是什麼？分別舉一個同步和非同步的例子 
①同步會阻塞程式碼執行，而非同步不會 
②alert是同步，setTimeout是非同步

問題2、一個關於setTimeout的筆試題 
console.log(1) 
setTimeout(function(){ 
console.log(2) 
},0) 
console.log(3) 
setTimeout(function(){ 
console.log(4) 
},1000) 
console.log(5) 
//1 3 5 2 4

問題3、前端使用非同步的場景有哪些 
①定時任務：setTimeout，setInterval 
②網路請求：ajax請求，動態載入 
③事件繫結

其他（日期、Math、各種常用API）

①日期 
Date.now()  //獲取當前時間毫秒數 
var dt=new Date() 
dt.getTime()   //獲取毫秒數 
dt.getFullYear()   //年
 dt.getMonth()  //月
(0-31) dt.getHours()   //小時(0-23) 
dt.getMinutes() //分鐘(0-59) 
dt.getSeconds() //(0-59)

②Math 
Math.random()
random 在實際中的應用有清除快取的作用，是每次訪問到的都不是快取

③陣列API
forEach  遍歷所有元素
  var arr=[1,2,3]
     arr.forEach(function(item,index){
     //遍歷陣列的所有元素
     console.log(index,item)
  })

 every  判斷所有元素是否都符合條件
   var arr=[1,2,3]
   var result=arr.every(function(item,index){
      //用來判斷所有的陣列元素，都滿足一個條件
        if(item<4){
           return true;
        }
    })
   console.log(result);

some  判斷是否至少一個元素符合條件
    var arr=[1,2,3]
    var result=arr.some(function(item,index){
      //用來判斷所有的陣列元素，只要有一個滿足條件即可
        if(item<2){
            return true;
       }
    })
    console.log(result);

sort  排序
   var arr=[1,4,2,3,5]
   var arr2=arr.sort(function(a,b){
         //從小到大排序
         return a-b
         //從大到小排序
         //return b-a
   })
   console.log(arr2)

map  對元素重新組裝，生成新陣列
   var arr=[1,2,3,4]
   var arr2=arr.map(function(item,index){
        //將元素重新組裝，並返回
        return '<b>'+item+'</b>'
   })
   console.log(arr2)
filter過濾符合條件的元素
   var arr=[1,2,3]
   var arr2=arr.filter(function(item,index){
       //通過某一個條件過濾陣列
       if(item>=2){
          return true;
       }
   })
   console.log(arr2)
④物件API
   var obj={
      x:100,
      y:200,
      z:300
   }
   var key
   for(key in obj){
      //注意這裡的hasOwnProperty,再講原型鏈時講過了
      if(obj.hasOwnProperty(key)){
             console.log(key,obj[key])
      }

    }

面試題解答 5

問題1、獲取2017-06-10格式的日期 
     function formatDate(dt){
          if(!dt){
              dt=new Date()
          }
          var year=dt.getFullYear();
          var month=dt.getMonth()+1;
          var date=dt.getDate();
          if(month<10){
             //強制型別轉換
             month="0"+month;
          }
          if(date<10){
              //強制型別轉換
              date="0"+month;
          }
          return year+"-"+month+"-"+date
     }
     var dt=new Date()
     var formatDate=formatDate(dt)
     console.log(formatDate)
問題2、獲取隨機數，要求是長度一直的字串格式 
      var random=Math.random()
      var random=random+'0000000000'   //後面加上10個零
      var random=random.slice(0,10)
      console.log(random)
問題3、寫一個能遍歷物件和陣列的通用forEach函式
       function forEach(obj,fn){
           var key
           //準確判斷是不是資料
           if(obj instanceof Array){
                  obj.forEach(function(item,inex){
                         fn(index,item)
                 })
           }else{
                //不是陣列就是物件
                for(key in obj){
                     fn(key,obj[key])
                }
           }
       }

       var arr=[1,2,3];
       //注意，這裡引數的順序換了，為了和物件的遍歷格式一致
       forEach(arr,function(index,item){
             console.log(index,item)
       })

       var obj={x:100,y:200};
       forEach(obj,function(key,value){
             console.log(key,value)
       })

js-web-api

本期主要內容

Dom操作
Bom操作
事件繫結
Ajax請求(包括http協議)
儲存

注意：內建函式和內建物件的區別

內建函式：Object Array RegExp Function Error Date Number Boolean String…
內建物件：Math JSON…

注：

JS基礎知識：ECMA 262標準
JS-WEB-API：W3C標準，它參與規定任何JS基礎相關的東西，不管什麼變數型別、原型、作用域和非同步，只管定義用於瀏覽器JS操作頁面的API和全域性變數

DOM

html是xml的一種特殊結構
DOM 本質：
DOM 可以理解為：
瀏覽器把拿到的html程式碼，結構化一個瀏覽器能識別並且js可操作性的一個模型而已

①獲取DOM節點 
var div1=document.getElementById(‘div1’)；//元素 
var divList=document.getElementsByTagName(‘div’); //集合 
console.log(divList.length) 
console.log(divList[0])

var containerList=document.getElementsByClassName(“.contaner”)//集合 
var pList=document.querySelectorAll(‘p’)//集合 
②property 
var pList=document.querySelectorAll(‘all’); 
var p=pList[0]; 
console.log(p.style.width) 
p.style.width=’100px’ 
console.log(p.className) 
p.className=’p1’

//獲取nodeName和nodeType 
console.log(p.nodeName) 
console.log(p.nodeType)

DOM 結構操作
- 新增節點
- 查詢子節點
- 查詢父節點
- 刪除節點

面試題解答 6

問題1、dom是哪種基本的資料結構？ 
樹 
問題2、Dom操作的常用API有哪些？ 
①獲取DOM節點，以及節點的property和Attribute 
②獲取父節點，獲取子節點  childNodes/ parentNode
③新增節點，刪除節點 
問題3、Dom節點的Attribute和Property有和區別？ 
①property只是一個JS物件的屬性的修改 
②Attribute是對html標籤屬性的修改

BOM操作

測試瀏覽器型號 navigator

var ua=navigator.userAgent 
var isChrome=ua.indexOf(‘Chrome’) 
console.log(isChrome)

screen
location
history

console.log(screen.width) 
console.log(scr)

console.log(location.href) 
console.log(location.protocal) 
console.log(location.pathname) 
console.log(location.search) 
console.log(location.hash)

history.back() 
histort.forward()

面試題解答 7

題目1、如何檢測瀏覽器的型別 
var ua=navigator.userAgent 
var isChrome=ua.indexOf(‘Chrome’) 
console.log(isChrome) 
題目2、拆解url的各部分 
參考location

事件

通用事件繫結

var btn=document.getElementById(‘btn1’); 
btn.addEventListener(‘click’,function(event){ 
console.log(‘clicked’) 
})

function bindEvent(elem,type,fn){ 
elem.addEventListener(type,fn) 
}

var a=document.getElementById(‘link1’) 
bindEvent(a,’click’,function(e){ 
e.preventDefault() //阻止預設行為 
alert(‘clicked’) 
})

注：關於IE低版本的相容性 
①IE低版本使用attachEvent繫結事件，和W3C標準不一樣 
②IE低版本使用量以非常少，很多網站都早已不支援 
建議對IE低版本的相容性：瞭解即可，無需深究 
如果遇到對IE低版本要求苛刻的面試，果斷放棄

事件冒泡

在父級 div 中定義的事件，會在子級的事件執行之後冒泡上來執行

阻止事件冒泡 e.stopPropagation()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">啟用</p>
      <p id="p2">取消</p>
      <p id="p3">取消</p>
      <p id="p4">取消</p>
    </div>
    <div id="div2">
      <p id="p5">取消</p>
      <p id="p6">取消</p>
    </div>


    <script type="text/javascript">
    // 利用阻止冒泡的機制實現：只點擊 p1 的時候彈窗啟用
      function bindEvent(elem,type,func) {
        elem.addEventListener(type,func)
      }
      var p1 = document.getElementById('p1')
      bindEvent(p1,'click',function(e){
        e.stopPropagation()
        alert('啟用')
      })
      bindEvent(body,'click',function (e) {
        alert('取消')
      })
    </script>
  </body>
</html>

代理

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <a href="#">a5</a>
      <p>fjdk</p>
      <h1>jfkd</h1>
      <!-- ...隨時會新增更多的 a 標籤 -->
    </div>
    <script type="text/javascript">
      // 要求用代理的方式實現 動態事件繫結，繫結 div1 中的所有 a 標籤
      var div = document.getElementById('div1')
      function bindEvent(elem,type,func) {
        elem.addEventListener(type,func)
      }
      bindEvent(div,'click',function(e){
        console.log(e) // MouseEvent
        console.log(e.target) //  完整的 a 標籤 物件 <a href="#">a3</a>
        console.log(e.target.nodeName); // 都是大寫
        if(e.target.nodeName === 'A'){
          alert(e.target.innerHTML)
        }
      })
    </script>
  </body>
</html>

面試題解答 8

問題1、編寫一個通用的事件監聽函式 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    慕課網 前端JS面試技巧 筆記
      前言關於面試前端水平的三個層次基層工程師-基礎知識高階工程師-專案經驗架構師- 解決方案幾個面試題題目很多，做具有代表的題目，舉一反三js 中使用 typeof 能得到哪些型別 （==js 變數型別==）何時使用 === 何時使用 == ？  （==強制型別轉換==）window.onload 和 DOMCo 

  
 

    

    
    慕課網c語言入門學習筆記
      
                
#include<stdio.h>
int main（）新標準中是int 而非void
一個c程式中只有一個主函式，main是唯一入口
printf（）；
return 是函式的返回值，函式型別不同，返回值也不同良好規範
1、一個說明或一個語句佔一行，例如：包含 

  
 

    

    
    實戰踩坑筆記-手把手從0打造電商平臺-前端-慕課網
        
webpack 公共模組函式未定義 
忘了加 

 module.exports = xx;
 

  
 Fiddler | Charles 抓取不到chrome   
 chrome外掛Proxy SwitchyOmega 新建代理127.0.0.1:8888 
  
 

  
 

    

    
    js之window物件（慕課網學習筆記）
       
  
  
 javaScript定義了一個變數一個函式都會變成window中的一個成員 
 var a=1;
alert(window.a)  //會輸出a的值
 
 window基礎 
 建立視窗、調整視窗、移動視窗、關閉視窗 
 <!DOCTYPE html>
<html lang 

  
 

    

    
    js之DOM入門（慕課網學習筆記）
       
  
  
 DOM簡介 
  
 獲得元素 
 document.getElementById(’’) 1、通過id獲得元素內容 document.getElementsByTagName(’’) 2、通過標籤獲得元素內容 document.getElementsByClassName(’’) 3、通過 

  
 

    

    
    慕課網：Web前端面試題目及答案彙總
      
							
							
							HTML/CSS部分

1、什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部 

  
 

    

    
    【慕課網實戰課程筆記】Vue.js高仿餓了麼外賣App
      
							
							
							寫在前面：該課程為慕課網付費課程，筆記內容程式碼居多、內容簡略，僅供自己日後翻閱。如有疑問或者不妥，歡迎提出指正，我看到了會回覆，謝謝！

第1章：課程簡介

第2章：Vuejs介紹


Ctrl+Alt+l 快捷整理程式碼


第3章：Vue-cli開啟Vue 

  
 

    

    
    JavaScript入門--慕課網學習筆記
      裏的   編寫   .com   span   符號   代碼格式   www   空白   body                     JAVASCRIPT—（慕課網）入門篇
我們來看看如何寫入JS代碼？你只需一步操作,使用<script>標簽在HTML網頁中插入JavaScript代碼。 

  
 

    

    
    Node.js爬蟲-爬取慕課網課程信息
      reac   分享   function   apt   txt   sta   eject   賦值   find   第一次學習Node.js爬蟲，所以這時一個簡單的爬蟲，Node.js的好處就是可以並發的執行
這個爬蟲主要就是獲取慕課網的課程信息，並把獲得的信息存儲到一個文件中，其中要用到cheerio 

  
 

    

    
    node.js初步了解（3）——慕課網（回調，作用域，上下文）
      span   clas   global   ava   運行   time   log   timeout   color   1.

 1 //回調:回調是異步編程最基本的方法，node.js需要按順序執行異步邏輯的時候，一般采用後續傳遞的方式，將後續邏輯封裝在回調函數中，作為起始函數的參數。
 2 // 

  
 

    

    
    JS內置對象練習（慕課網題目）
      星期四   rest   html   內置   document   har   write   func   index   效果圖:
XXXX年XX月X日 星期X--班級總分為:81
格式要求：
1、顯示打印的日期。 格式為類似“XXXX年XX月XX日 星期X” 的當前的時間。
2、計算出該班級的平均分 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記三之銘文升級版
      聚集   配置文件   ssi   path   fig   rect   擴展   str   控制臺   銘文一級：
Flume概述Flume is a distributed, reliable, and available service for efficiently collecting(收集), 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記五之銘文升級版
      環境變量   local   server   節點數   replicas   conn   配置環境   park   所有   銘文一級：
單節點單broker的部署及使用
$KAFKA_HOME/config/server.propertiesbroker.id=0listenershost.name 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記九之銘文升級版
      file   sin   ssi   右上角   result   map   tap   核心   內容   銘文一級：
核心概念：StreamingContext
def this(sparkContext: SparkContext, batchDuration: Duration) = {    th 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記十之銘文升級版
      state   分鐘   mooc   系統數據   使用   連接   var   style   stream   銘文一級：
第八章：Spark Streaming進階與案例實戰
updateStateByKey算子需求：統計到目前為止累積出現的單詞的個數(需要保持住以前的狀態)
java.lang.I 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記十五之銘文升級版
      spa   for   序列   html   art   mat   div   pre   paths   銘文一級：[木有筆記]
銘文二級：
第12章 Spark Streaming項目實戰
行為日誌分析：
1.訪問量的統計
2.網站黏性
3.推薦
 
Python實時產生數據
訪問URL->IP 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記十六之銘文升級版
      .so   zook   orm   3.1   date   nta   highlight   org   結果   銘文一級：
linux crontab	網站：http://tool.lu/crontab	每一分鐘執行一次的crontab表達式： */1 * * * * 
crontab -e	*/1 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記十七之銘文升級版
      eid   實時   root   現在   ava   ==   oop   urn   啟動   銘文一級：
功能1：今天到現在為止 實戰課程 的訪問量
yyyyMMdd courseid
使用數據庫來進行存儲我們的統計結果	Spark Streaming把統計結果寫入到數據庫裏面	可視化前端根據：yyy 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記二十之銘文升級版
      .get   frame   結果   取數據   lena   echarts   object   原理   四種   銘文一級：
Spring Boot整合Echarts動態獲取HBase的數據1） 動態的傳遞進去當天的時間	a) 在代碼中寫死	b) 讓你查詢昨天的、前天的咋辦？		在頁面中放一個時間插 

  
 

    

    
    【慕課網實戰】Spark Streaming實時流處理項目實戰筆記二十一之銘文升級版
      win7   小時   其他   har   safari   北京   web   連接   rim   銘文一級：
DataV功能說明1）點擊量分省排名/運營商訪問占比	Spark SQL項目實戰課程： 通過IP就能解析到省份、城市、運營商
2）瀏覽器訪問占比/操作系統占比	Hadoop項目：userAg

慕課網 前端JS面試技巧 筆記

前言

關於面試

幾個面試題

思考

基礎知識

js 基礎三座大山

面試題

1. js 中使用 typeof 能得到哪些型別

2. 何時使用 === 何時使用 ==

3. JS 中有哪些內建函式

4. JS 變數按照儲存方式區分為哪些型別，並描述其特點

5. 如何理解 JSON

知識點

面試題解答 1

原型和原型鏈

原型規則(是學習原型鏈的基礎)

面試題解答 2

執行上下文

this

作用域

作用域鏈

閉包

面試題解答 3

非同步

非同步示例

同步

非同步和單執行緒

面試解答 4

其他（日期、Math、各種常用API）

面試題解答 5

js-web-api

DOM

面試題解答 6

BOM操作

面試題解答 7

事件

事件冒泡

面試題解答 8

相關推薦

慕課網前端JS面試技巧筆記