2020 前端面試 | 「HTML + CSS + JS」專題

時間 2019-11-05

原文原文鏈接

本文版權歸 「公衆號 | 前端一萬小時」 全部，歡迎轉載！

轉載請註明出處，未經贊成，不可修改文章內容。
複製代碼

「前端面試題」及「參考答案詳解」屬於「￥102.4 | 面試刷題」私有團隊專享內容，需付費閱讀；css
文章列表所列示的文章屬於「￥1024 | 從零基礎到輕鬆就業」私有團隊專享內容，除開源的部分，其它皆需付費閱讀；html

▽ Web 前置知識

《老生常談的從 URL 輸入到頁面展示背後發生的事》[編號：web_01]

涉及面試題：
1. 從 URL 輸入到頁面展示背後發生了什麼事？
2. 一次完整的 HTTP 事務是怎麼一個過程？
3. 瀏覽器是如何渲染頁面的？
4. 瀏覽器的內核有哪些？分別有什麼表明的瀏覽器？
5. 刷新頁面，JS 請求通常會有哪些地方有緩存處理？
複製代碼

▽ HTML

《① HTML 基礎》[編號：html_01]

涉及面試題：
 1. DOCTYPE 有什麼做用？怎麼寫？
 2. 列出常見的標籤，並簡單介紹這些標籤用在什麼場景？
 3. 頁面出現了亂碼，是怎麼回事？如何解決？
 4. title 屬性和 alt 屬性分別有什麼做用？
 5. HTML 的註釋怎樣寫？
 6. HTML5 爲何只寫 <!DOCTYPE html> ？
 7. data- 屬性的做用？
 8. <img> 的 title 和 alt 有什麼區別？
 9. Web 標準以及 W3C 標準是什麼？
10. DOCTYPE 做用？嚴格模式與混雜模式如何區分？它們有何意義？
11. HTML 全局屬性（Global Attribute）有哪些？
複製代碼

《② HTML 元素、屬性詳解》[編號：html_02]

涉及面試題：
1. meta 有哪些常見的值？
2. meta viewport 是作什麼用的，怎麼寫？
3. 列出常見的標籤，並簡單介紹這些標籤用在什麼場景？
4. 如何在 HTML 頁面上展現 <div></div> 這幾個字符？
5. 你是如何理解 HTML 語義化的？
6. 前端須要注意哪些 SEO?
7. 你對網頁標準和 W3C 重要性的理解?
複製代碼

《③ HTML 表單詳解》[編號：html_03]

涉及面試題：
1. POST 和 GET 方式提交數據有什麼區別？
2. 在 input 裏，name 有什麼做用？
3. label 有什麼做用？如何使用？
4. radio 如何分組？
5. placeholder 屬性有什麼做用？
6. type=hidden 隱藏域有什麼做用？舉例說明。
7. CSRF 攻擊是什麼？如何防範？
8. 網頁驗證碼是幹嗎的？是爲了解決什麼安全問題？
9. 常見 Web 安全及防禦原理？
複製代碼

▽ CSS

《CSS 基礎與選擇器初識》[編號：css_01]

涉及面試題：
1. CSS 加載方式有幾種？
2. @import 有什麼做用？如何使用？
3. CSS 選擇器常見的有幾種？
4. id 選擇器和 class 選擇器的使用場景分別是什麼？
5. @charset 有什麼做用？
6. 簡述 src 和 href 的區別？
7. 頁面導入時，使用 link 和 @import 有什麼區別？
複製代碼

《CSS 選擇器詳解》[編號：css_02]

涉及面試題：
1. 僞類選擇器有哪些？
2. 僞元素和僞類的區別？
複製代碼

《CSS 結構和層疊》[編號：css_03]

涉及面試題：
1. 選擇器的優先級是如何計算的？
2. 什麼是 CSS 繼承？哪些屬性能繼承，哪些不能？
複製代碼

《CSS 值和單位》[編號：css_04]

涉及面試題：
1. 你有沒有使用過視網膜分辨率的圖形？當中使用什麼技術？
2. px，em，rem，vw 有什麼區別？
複製代碼

《CSS 給文本加樣式：① 字體屬性》[編號：css_05]

涉及面試題：
簡述字體圖標的原理，動手實現使用 iconfont 實現字體圖標的 demo。
複製代碼

涉及面試題：
1. 塊級元素和行內元素分別有哪些？ 空（void）元素有那些？塊級元素和行內元素有什麼區別？
2. IE 盒模型和 W3C 盒模型有什麼區別?
3. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例？
複製代碼

《CSS 基本視覺格式化：② 「行內盒子」格式化》[編號：css_08]

涉及面試題：
1. line-height: 2; 和 line-height: 200%; 有什麼區別?
2. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例。
3. 行內元素的「邊框」、「邊界」等「框屬性」是由 font-size 仍是 line-height 控制？
4. height=line-height 能夠用來垂直居中單行文本？代碼怎麼實現？
5. inline-block 有什麼特性？
6. inline-block 在實際工做中有什麼做用？
7. 怎麼去除兩個按鈕中間的縫隙問題？
8. 一個頁面有一排高度不同的產品圖，這時若是咱們用 inline-block ，怎樣使他們「頂端對齊」？
複製代碼

《CSS 給盒子、背景、連接、列表、表單、表格等加樣式》[編號：css_09]

涉及面試題：
1. 讓一個元素「看不見」有幾種方式？有什麼區別？
2. 單行文本溢出加 ... 如何實現？
3. 如何在頁面上實現一個圓形的可點擊區域？
複製代碼

《讓「盒子」動起來：① 浮動》[編號：css_10]

涉及面試題：
1. 浮動元素有什麼特徵？對父容器、其餘浮動元素、普通元素、文字分別有什麼影響？
2. 清除浮動指什麼？如何清除浮動？兩種以上方法。
複製代碼

《讓「盒子」動起來：② 「定位」和 BFC》[編號：css_11]

涉及面試題：
1. 有幾種定位方式？分別是如何實現定位的？參考點是什麼？使用場景是什麼？
2. z-index 有什麼做用？如何使用？
3. BFC 是什麼？如何生成 BFC？BFC 有什麼做用？舉例說明。
4. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例？
複製代碼

《把「能夠動的盒子」更優雅地展現：① 「僞元素」妙用》[編號：css_12]

涉及面試題：
1. 如何使用僞元素來清除浮動？
2. 能夠經過哪些方法優化 CSS3 Animation 渲染？
複製代碼

《把「能夠動的盒子」更優雅地展現：② 「居中」盒子》[編號：css_13]

涉及面試題：
1. 如何讓塊級元素水平居中？如何讓行內元素水平居中？如何讓 inline-block 元素水平居中？
2. 垂直上下居中的辦法？
複製代碼

《把「能夠動的盒子」更優雅地展現：③ 經常使用的「佈局」》[編號：css_14]

涉及面試題：
響應式佈局原理？
複製代碼

《讓這些「展現」有更好的擴展性——媒體查詢》[編號：css_15]

涉及面試題：
1. 列舉你瞭解的 HTML五、CSS3 新特性？
2. Canvas 和 SVG 有什麼區別？
複製代碼

《CSS 拓展：① 瀏覽器兼容》[編號：css_16]

涉及面試題：
 1. 漸進加強和優雅降級分別是什麼意思？
 2. 什麼是 CSS Hack？在哪一個網站查看標籤（屬性）的瀏覽器兼容狀況？
 3. IE六、7 的 Hack 寫法是？
 4. 儘量多的列舉瀏覽器兼容的處理範例？
 5. CSS Reset 是什麼？CSS 預編譯器是什麼？後編譯器（PostCSS）是什麼？
 6. CSS Reset 和 Normalize.css 有什麼區別？
 7. 儘量多的寫出瀏覽器兼容性問題？
 8. 如何讓 Chrome 瀏覽器顯示小於 12px 的文字？
 9. CSS 預處理器的比較：Less、Sass？
10. 常見兼容性問題？
複製代碼

《CSS 拓展：② CSS 編碼規範》[編號：css_17]

涉及面試題：
1. 列舉 CSS 編碼規範？
2. 編碼規範的做用是什麼？列舉 5 條以上編碼規範。
複製代碼

《CSS 拓展：③ Emmet 經常使用語法介紹》
《CSS 拓展：④ flex 佈局》
《CSS 拓展：⑤ CSS3 Transition》
《CSS 拓展：⑥ CSS3 變形》
《CSS 拓展：⑦ CSS3 Animation》

▽ 🚀HTML+CSS 實戰：PC 端「簡書」靜態首頁開發（難度：☆☆）

《PC 端「簡書」靜態首頁：① 結構+header》[編號：html-css_01]

涉及面試題：
1. 什麼是盒模型？
2. CSS 的屬性 box-sizing 有什麼值？分別有什麼做用？
複製代碼

《PC 端「簡書」靜態首頁：② 側邊欄+推薦》
《PC 端「簡書」靜態首頁：③ 輪播+按鈕組+內容區》

▽ JavaScript 初識

《① JS 速覽——進入 JS 的世界》[編號：js_01]

涉及面試題：
1. 簡單介紹 JavaScript 的發展歷史。ES三、ES五、ES6 分別指什麼？
2. 說幾條寫 JavaScript 的基本規範？
3. JavaScript 代碼中的 「use strict」 是什麼意思？
4. 說說嚴格模式的限制？
複製代碼

《② 運算符、運算符優先級》[編號：js_02]

涉及面試題：
 1. NaN 是什麼？有什麼特別之處？
 2. == 與 === 有什麼區別？
 3. console.log(1+"2") 和 console.log(1-"2") 的打印結果？
 4. 爲何 console.log(0.2+0.1==0.3) 輸出 false ？
 5. 請用三元運算符（問號冒號表達式）改寫如下代碼：
    if(a > 10) {
      b = a
    }else {
      b = a - 2
    }

 6. 如下代碼輸出的結果是？
    var a = 1;  
    a+++a;  
    typeof a+2;

 7. 如下代碼輸出什麼？
    var d = a = 3, b = 4
    console.log(d)

 8. 如下代碼輸出什麼？
    var d = (a = 3, b = 4)
    console.log(d)

 9. 如下代碼輸出結果是？爲何？
    var a = 1, b = 2, c = 3;
    var val = typeof a + b || c >0
    console.log(val)
    var d = 5;
    var data = d ==5 && console.log('bb')
    console.log(data)
    var data2 = d = 0 || console.log('haha')
    console.log(data2)
    var x = !!"Hello" + (!"world", !!"from here!!");
    console.log(x)

10. 如下代碼輸出結果是？爲何？
    var a = 1;
    var b = 3;
    console.log( a+++b );

11. 如下代碼輸出的結果是？爲何？
    console.log(1+1);
    console.log("2"+"4");
    console.log(2+"4");
    console.log(+"4");
複製代碼

《③ 變量、值、數據類型、數據類型轉換》[編號：js_03]

涉及面試題：
1. JavaScript 定義了幾種數據類型？哪些是原始類型？哪些是複雜類型？null 是對象嗎？
2. 對象類型和原始類型的不一樣之處？函數參數是對象會發生什麼問題？
3. 怎樣判斷「值」屬於哪一種類型？typeof 是否能正確判斷類型？instanceof 呢？
   instanceof 有什麼做用？內部邏輯是如何實現的？
4. null，undefined 的區別？
5. 說一下 JS 中類型轉換的規則？
6. 如下代碼的輸出？爲何？
    console.log(a);
    var a = 1;
    console.log(b);

7. 如下代碼輸出什麼？
    var a = typeof 3+4
    console.log(a)

8. 如下代碼輸出什麼？
    var a = typeof typeof 4+4
    console.log(a)
複製代碼

《④ 流程控制語句》[編號：js_04]

涉及面試題：
1. break 與 continue 有什麼區別？
2. switch...case 語句中的 break 有什麼做用？
3. for...of、 for...in 和 forEach、map 的區別？
4. 寫出以下知識點的代碼範例：
    ① if...else 的用法；
    ② switch...case 的用法；
    ③ while 的用法；
    ④ do...while 的用法；
    ⑤ for 遍歷數組的用法；
    ⑥ for...in 遍歷對象的用法；
    ⑦ break 和 continue 的用法。

5. 如下代碼輸出什麼？
    var a = 2
    if(a = 1) {
      console.log("a 等於 1")
    }else {
      console.log("a 不等於 1")
    }
複製代碼

▽ JavaScript 入門

《① JS 函數——養成函數思惟》[編號：js_05]

涉及面試題：
1. 寫一個函數，返回參數的平方和？
    function sumOfSquares() {
      // 補全
    }
    var result = sumOfSquares(2, 3, 4)
    var result2 = sumOfSquares(1, 3)
    console.log(result) // 29
    console.log(result2) // 10

2. 以下代碼的輸出？爲何？
    sayName("world");
    sayAge(10);
    function sayName(name) {
      console.log("hello ", name);
    }
    var sayAge = function(age) {
      console.log(age);
    };

3. 以下代碼的輸出？爲何？
    var x = 10;
    bar() 
    function bar() {
      var x = 30;
      function foo() {
        console.log(x) 
      }
      foo();
    }

4. 以下代碼的輸出？爲何？
    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar() {
      var x = 30
      foo()
    }

5. 以下代碼的輸出？爲何？
    var a = 1
    function fn1() {
      function fn3() {
        function fn2() {
          console.log(a)
        }
        fn2()
        var a = 4
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() // ？

6. 以下代碼的輸出？爲何？
    var a = 1
    function fn1() {
      function fn2() {
        console.log(a)
      }
      function fn3() {
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() // ？

7. 以下代碼的輸出？爲何？
    var a = 1
    function fn1() {
      function fn3() {
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    function fn2() {
      console.log(a)
    }
    var fn = fn1()
    fn() // ？

8. 以下代碼的輸出？爲何？
    var a = 1
    var c = {name: "oli", age: 2}
    function f1(n) {
      ++n
    }
    function f2(obj) {
      ++obj.age
    }
    f1(a) 
    f2(c) 
    f1(c.age) 
    console.log(a) 
    console.log(c)

9. 以下代碼的輸出？爲何？
    var obj1 = {a:1, b:2};
    var obj2 = {a:1, b:2};
    console.log(obj1 == obj2);
    console.log(obj1 = obj2);
    console.log(obj1 == obj2);
複製代碼

《② JS 數組——讓數據排排坐》[編號：js_06]

涉及面試題：
1. 寫一個函數 squireArr，其參數是一個數組，做用是把數組中的每一項變爲原值的平方。
    var arr = [3, 4, 6]
    function squireArr(arr) {
      // 補全
    }
    squireArr(arr)
    console.log(arr) // [9, 16, 36]

2. 寫一個函數 squireArr，其參數是一個數組，返回一個新的數組，新數組中的每一項是原數組
   對應值的平方，原數組不變。
    var arr = [3, 4, 6]
    function squireArr(arr) {
      // 補全
    }
    var arr2 = squireArr(arr)
    console.log(arr) // [3, 4, 6]
    console.log(arr2) // [9, 16, 36]

3. 遍歷 company 對象，輸出裏面每一項的值。
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }

4. 遍歷數組，打印數組裏的每一項的平方。
    var arr = [3, 4, 5]
複製代碼

《③ JS 對象——理解對象》[編號：js_07]

涉及面試題：
1. 介紹 JS 有哪些內置對象？
2. 如下代碼輸出什麼？
    var name = "sex"
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }
    console.log(company[name])

3. 如下代碼輸出什麼？
    var name = "sex"
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }
    console.log(company.name)
複製代碼

《④ 瞭解 DOM——與網頁交互》
《⑤ JS 事件——異步編碼》

▽ JavaScript 基礎

《JS 函數：① 把函數視爲「值」》
《JS 函數：② 嵌套函數、做用域和閉包》[編號：js_11]

涉及面試題：
1. 閉包是什麼？閉包的做用是什麼？閉包有哪些使用場景？
2. 使用遞歸完成 1 到 100 的累加？
3. 談談垃圾回收機制的方式及內存管理？
4. 談談你對 JS 執行上下文棧和做用域鏈的理解？
5. 以下代碼輸出多少？若是想輸出 3，那如何改造代碼？
    var fnArr = [];
    for(var i=0; i<10; i++) {
      fnArr[i] =  function() {
        return i
      };
    }
    console.log(fnArr[3]())

6. 封裝一個 Car 對象。
    var Car = (function() {
      var speed = 0;
      // 補充
      return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        speedUp: speedUp,
        speedDown: speedDown
      }
    })()
    Car.setSpeed(30)
    Car.getSpeed() // 30
    Car.speedUp()
    Car.getSpeed() // 31
    Car.speedDown()
    Car.getSpeed() // 30

7. 以下代碼輸出多少？如何連續輸出 0，1，2，3，4？
    for(var i=0; i<5; i++) {
      setTimeout(function() {
        console.log("delayer:" + i)
      }, 0)
    }

8. 以下代碼輸出多少？
    function makeCounter() {
      var count = 0
      return function() {
        return count++
      };
    }
    var counter = makeCounter()
    var counter2 = makeCounter();
    console.log(counter()) // 0
    console.log(counter()) // 1
    console.log(counter2()) // ？
    console.log(counter2()) // ？
複製代碼

《JS 數組：① ES3 數組方法》[編號：js_12]

涉及面試題：
1. 數組的哪些 API 會改變原數組？
2. 寫一個函數，操做數組，返回一個新數組，新數組中只包含正數。
    function filterPositive(arr) {
      // 補全
    }
    var arr = [3, -1, 2, true]
    filterPositive(arr)
    console.log(filterPositive(arr)) // [3, 2]

3. 補全代碼，實現數組按姓名、年紀、任意字段排序。
    var users = [
      {name: "John", age: 20, company: "Baidu"},
      {name: "Pete", age: 18, company: "Alibaba"},
      {name: "Ann", age: 19, company: "Tecent"}
     ]
    
    users.sort(byField("age"))
    users.sort(byField("company"))

4. 用 splice 函數分別實現 push、pop、shift、unshift 方法。
   如：
    function push(arr, value) {
      arr.splice(arr.length, 0, value)
      return arr.length
    }
    var arr = [3, 4, 5]
    arr.push(10) // arr 變成 [3, 4, 5, 10]，返回 4。
複製代碼

《JS 數組：② ES5 數組方法》[編號：js_13]

涉及面試題：
1. for...of、 for...in 和 forEach、map 的區別？
2. 數組的哪些 API 會改變原數組？
3. 如何消除一個數組裏面重復的元素？
4. 判斷一個變量是不是數組，有哪些辦法？
5. ["1", "2", "3"].map(parseInt) 答案是多少？
6. 取數組的最大值（ES五、ES6）？
7. 實現一個 reduce 函數，做用和原生的 reduce 相似下面的例子。
   Ex：
    var sum = reduce([1, 2, 3], function(memo, num) {return memo + num;}, 0); => 6

8. 怎樣用原生 JS 將一個多維數組拍平？
    var array = [1, [2], [3, [4, [5]]]]
    function flat(arr) {
      // 補全
    }
    console.log(flat(array)) // [1, 2, 3, 4, 5]
複製代碼

《面向對象編程：① 對象構造函數》[編號：js_14]

涉及面試題：
1. new 的原理是什麼？經過 new 的方式建立對象和經過字面量建立有什麼區別？
2. Object.create 有什麼做用？
3. 怎樣判斷「值」屬於哪一種數據類型？typeof 是否能正確判斷類型？instanceof 呢？instanceof 有什麼做用？內部邏輯是如何實現的？
4. JavaScript 有哪些方法定義對象？
5. 以下代碼中？new 一個函數本質上作了什麼？
    function Modal(msg) {
      this.msg = msg
    }
    var modal = new Modal()
複製代碼

《面向對象編程：② 使用原型》[編號：js_15]

涉及面試題：
 1. JS 原型是什麼？如何理解原型鏈？
 2. JS 如何實現繼承？
 3. 實現一個函數 clone 能夠對 JavaScript 中的五種主要數據類型（Number、string、Object、Array、Boolean）進行復制？
 4. 對 String 作擴展，實現以下方式獲取字符串中頻率最高的字符：
    var str = "ahbbccdeddddfg";
    var ch = str.getMostOften();
    console.log(ch); // d，由於 d 出現了 5 次

 5. 有以下代碼，代碼中並未添加 toString 方法，這個方法是哪裏來的？畫出原型鏈圖進行解釋：
    function People() {
      // 補全
    }
    var p = new People()
    p.toString()

 6. 有以下代碼，解釋 Person、 prototype、__proto__、p、constructor 之間的關聯：
    function Person(name) {
      this.name = name;
    }
    Person.prototype.sayName = function() {
      console.log("My name is :" + this.name);
    }
    var p = new Person("Oli")
    p.sayName();

 7. 下面兩種寫法有什麼區別？
    // 方法一：
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
      this.printName = function() {
        console.log(this.name);
      }
    }
    var p1 = new People("Oli", 2)
    // 方法二：
    function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    Person.prototype.printName = function() {
      console.log(this.name);
    }
    var p1 = new Person("Aman", 2);

 8. 補全代碼，實現繼承：
    function Person(name, sex){
      // 補全
    };
    Person.prototype.getName = function() {
      // 補全
    };
    function Male(name, sex, age) {
      // 補全
    };
      // 補全
    Male.prototype.getAge = function() {
      // 補全
    };
    var catcher = new Male("Oli", "男", 2);
    catcher.getName();

 9. 以下代碼中 call 的做用是什麼？
    function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    function Male(name, sex, age) {
      Person.call(this, name, sex); // 這裏的 call 有什麼做用？
      this.age = age;
    }
複製代碼

《JS 提供的對象：① 做爲對象的「字符串」》[編號：js_16]

涉及面試題：
1. 多行字符串的聲明有哪幾種常見寫法？
2. 如下代碼輸出什麼？
    var str = "C:\Users\Document\node\index.js"
    console.log(str.length)
   如何聲明 str 讓 console.log(str) 輸出 C:\Users\Document\node\index.js ？
複製代碼

《JS 提供的對象：② 正則表達式》[編號：js_17]

涉及面試題：
1. 寫一個函數 isValidUsername(str)，判斷用戶輸入的是否是合法的用戶名（長度 6-20 個字符，
   只能包括字母、數字、下劃線）？
2. 寫一個函數 isPhoneNum(str)，判斷用戶輸入的是否是手機號？
3. 寫一個函數 isEmail(str)，判斷用戶輸入的是否是郵箱？
4. 寫一個函數 trim(str)，去除字符串兩邊的空白字符？
5. \d，\w，\s，[a-zA-Z0-9]，\b，.，*，+，?，x{3}，^，$ 分別是什麼?
6. 什麼是貪婪模式和非貪婪模式？
複製代碼

《JS 提供的對象：③ Date》[編號：js_18]

涉及面試題：
寫一個函數，參數爲時間對象毫秒數的字符串格式，返回值爲字符串。假設參數爲時間對象毫秒數 t，
根據 t 的時間分別返回以下字符串：
  - 剛剛（t 距當前時間不到 1 分鐘時間間隔）
  - 3 分鐘前（t 距當前時間大於等於 1 分鐘，小於 1 小時）
  - 8 小時前（t 距離當前時間大於等於 1 小時，小於 24 小時）
  - 3 天前（t 距離當前時間大於等於 24 小時，小於 30 天）
  - 2 個月前（t 距離當前時間大於等於 30 天小於 12 個月）
  - 8 年前（t 距離當前時間大於等於 12 個月）
  function friendlyDate(time) {
    // 補充
  }
  var str = friendlyDate("1556286683394") // x 分鐘前（以當前時間爲準）
  var str2 = friendlyDate("1555521999999") // x 天前（以當前時間爲準）
複製代碼

《JS 提供的對象：④ Math》[編號：js_19]

涉及面試題：
1. 寫一個函數，返回從 min 到 max 之間的隨機整數，包括 min 不包括 max ？
2. 寫一個函數，生成一個隨機顏色字符串，合法的顏色爲 #000000 ~ #ffffff。
    function getRandColor() {
      // 補全
    }
    var color = getRandColor()
    console.log(color) // #3e2f1b

3. 寫一個函數，生成一個長度爲 n 的隨機字符串，字符串字符的取值範圍包括 0 到 9，a 到 z，A 到 Z。
    function getRandStr(len) {
      // 補全
    }
    var str = getRandStr(10); // 0a3iJiRZap

4. 寫一個函數，生成一個隨機 IP 地址，一個合法的 IP 地址爲 0.0.0.0 ~ 255.255.255.255。
    function getRandIP() {
      // 補全
    }
    var ip = getRandIP()
    console.log(ip) // 10.234.121.45
複製代碼

《JS 提供的對象：⑤ JSON》[編號：js_20]

涉及面試題：
1. JSON 格式的數據須要遵循什麼規則？
2. 使用 JSON 對象實現一個簡單的深拷貝函數（deepCopy）？
3. XML 和 JSON 的區別？
4. eval 是作什麼的？
5. 深拷貝和淺拷貝的區別？如何實現？
複製代碼

《瀏覽器提供的對象：① BOM》[編號：js_21]

涉及面試題：
1. URL 如何編碼解碼？爲何要編碼？
2. iframe 有那些缺點？
3. 補全以下函數，判斷用戶的瀏覽器類型。
    function isAndroid() {
      // 補全
    }
    function isIphone() {
      // 補全
    }
    function isIpad() {
      // 補全
    }
    function isIOS() {
      // 補全
    }
複製代碼

《瀏覽器提供的對象：② DOM》[編號：js_22]

涉及面試題：
1. 什麼是 Virtual DOM，爲什麼要用 Virtual DOM？
2. 怎麼添加、移除、複製、建立、和查找節點？
3. offsetWidth/offsetHeight，clientWidth/clientHeight 與 scrollWidth/scrollHeight 的區別？
4. attribute 和 property 的區別是什麼？
5. 寫一個函數，批量操做 CSS。
    function css(node, styleObj){
      // 補全
    }
    css(document.body, {
      "color": "red",
      "background-color": "#ccc"
    })

6. 補全代碼，要求：當鼠標放置在 li 元素上，會在 img-preview 裏展現當前 li 元素的
   data-img 對應的圖片。
    <ul class="ct">
      <li data-img="1.png">鼠標放置查看圖片 1</li>
      <li data-img="2.png">鼠標放置查看圖片 2</li>
      <li data-img="3.png">鼠標放置查看圖片 3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      // 補全
    </script>
複製代碼

《瀏覽器提供的對象：③ 定時器》[編號：js_23]

涉及面試題：
 1. setTimeout、setInterval、requestAnimationFrame 各有什麼特色？
 2. 實現一個節流函數？
 3. setTimeout 倒計時爲何會出現偏差？
 4. 簡單解釋單線程、任務隊列的概念？
 5. 簡述同步和異步的區別？
 6. JS 延遲加載的方式有哪些？
 7. 函數防抖節流的原理？
 8. defer 和 async ？
 9. 下面這段代碼輸出結果是？ 爲何？
    var flag = true;
    setTimeout(function() {
      flag = false;
    }, 0)
    while(flag) {}
    console.log(flag);

10. 下面這段代碼輸出結果是？爲何？
    var a = 1;
    setTimeout(function() {
      a = 2;
      console.log(a);
    }, 0);
    var a ;
    console.log(a);
    a = 3;
    console.log(a);
複製代碼

《JS 事件：① 事件流和 DOM2 事件處理程序》[編號：js_24]

涉及面試題：
1. DOM 事件模型是什麼？
2. 解釋 DOM2 事件傳播機制？
複製代碼

《JS 事件：② 事件對象和事件代理》[編號：js_25]

涉及面試題：
1. 解釋如下概念：事件傳播機制、阻止傳播、取消默認事件、事件代理？
2. 寫一個 Demo，演示事件傳播的過程，演示阻止傳播的效果？
3. JS 的事件委託是什麼，原理是什麼？
複製代碼

《JS 事件：③ 常見事件使用》[編號：js_26]

涉及面試題：
window.onload 和 document.onDOMContentLoaded 有什麼區別？
複製代碼

▽ JavaScript 進階

《先後端交互：① Node.js 搭建簡單後端服務器》
《先後端交互：② AJAX 概念及 XMLHttpRequest 對象初識》[編號：js_28]

涉及面試題：
1. HTTP 狀態碼知道哪些？
2. 301 和 302 的區別是什麼？
3. AJAX 是什麼？有什麼做用？
4. HTTP 的幾種請求方法和區別？
5. AJAX 原理？
複製代碼

《先後端交互：③ XMLHttpRequest 對象詳解》[編號：js_29]

涉及面試題：
1. 把 GET 和 POST 類型的 AJAX 的用法手寫一遍？
2. 封裝一個 AJAX 函數？
複製代碼

《先後端交互：④ AJAX 示例——實現簡單新聞列表切換》
《瀏覽器相關：① 同源策略和跨域》[編號：js_31]

涉及面試題：
1. 什麼是同源策略？
2. 什麼是跨域？列舉跨域有幾種實現形式？
3. JSONP 的原理是什麼？
4. JSON 和 JSONP 的區別？
複製代碼

《瀏覽器相關：② 瀏覽器加載機制、白屏和 FOUC 》
《瀏覽器相關：③ 瀏覽器存儲》[編號：js_33]

涉及面試題：
1. Cookie、Session、localStorage 分別是什麼？
2. Cookies，sessionStorage 和 localStorage 的區別？
3. 如何實現同一個瀏覽器多個標籤頁之間的通訊？
4. HTML5 的離線儲存怎麼使用，工做原理能不能解釋一下？
5. 瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和加載的呢？
6. Web 開發中會話跟蹤的方法有哪些？

7. 使用 localStorage 封裝一個 Storage 對象，達到以下效果：
    Storage.set("name", "前端一萬小時") // 設置 name 字段存儲的值爲「前端一萬小時」。
    Storage.set("age", 2, 30);
    Storage.set("people", ["Oli", "Aman", "Dante"],  60)
    Storage.get("name") // "前端一萬小時"
    Storage.get("age") /*
                       若是不超過 30 秒，返回數字類型的 2；若是超過 30 秒，返回 undefined，
                       而且 localStorage 裏清除 age 字段。
                        */
    Storage.get("people") // 若是不超過 60 秒，返回數組； 若是超過 60 秒，返回 undefined。
複製代碼

《前端工程化：① 「前端工程化」初識》[編號：js_34]

涉及面試題：
1. 模塊化開發怎麼作？
2. Webpack 如何實現打包的？
複製代碼

《前端工程化：② JS 模塊加載方案和「組件化」初探》[編號：js_35]

涉及面試題：
談談你對 AMD、CMD 的理解？
複製代碼

▽ 🚀原生 JS 實戰：小 DEMO 系列（難度：☆☆）

《Tab 切換》
《模態框》
《JS 動畫》
《圖片懶加載》
《瀑布流佈局》

▽ ES6+

《ES6 速學：① let、const 和解構賦值》[編號：es6_01]

涉及面試題：
1. var、let 及 const 區別？
2. 使用解構，實現兩個變量的值的交換？
3. 解構賦值？
4. 函數默認參數？
5. JavaScript 中什麼是變量提高？什麼是暫時性死區？
複製代碼

《ES6 速學：② 字符串、數組、函數、對象》[編號：es6_02]

涉及面試題：
1. 箭頭函數？
2. 箭頭函數與普通函數有什麼區別？
3. 反引號 ` 標識？
4. 使用 ES6 改下面的模板？
    let iam  = "我是";
    let name = "Oli";
    let str  = "你們好，"+iam+name+",多指教。";

5. 屬性簡寫、方法簡寫？
6. for...of 循環？
7. 字符串新增方法？
複製代碼

《ES6 速學：③ 完全弄懂各類狀況下的 this 指向》[編號：es6_03]

涉及面試題：
1. 如何改變函數內部的 this 指針的指向？
2. 如何判斷 this？箭頭函數的 this 是什麼？
3. call、apply 以及 bind 函數內部實現是怎麼樣的？
複製代碼

《ES6 速學：④ 類、繼承和模塊化》[編號：es6_04]

涉及面試題：
1. import 和 export？
2. ES6 中的 class 瞭解嗎？ES6 中的 class 和 ES5 的類有什麼區別？
3. 知道 ECMAScript6 怎麼寫 class 麼？爲何會出現 class 這種東西?
4. 原型如何實現繼承？Class 如何實現繼承？Class 本質是什麼？
複製代碼

《ES6 速學：⑤ Promise 對象》[編號：es6_05]

涉及面試題：
1. Promise 有幾種狀態？Promise 的特色是什麼，分別有什麼優缺點？
2. Promise 構造函數是同步仍是異步執行？then 呢？Promise 如何實現 then 處理？
3. Promise 和 setTimeout 的區別？
4. 如何實現 Promise.all() ？
5. 如何實現 Promise.prototype.finally() ？
6. all() 的用法？
7. 說說你對 Promise 的瞭解？
複製代碼

▽ 🚀原生 JS 實戰：造輪子系列（難度：☆☆☆☆）

《實現一個簡單的左右滑動手勢庫》
《Web 輪播：① 「面向過程」寫法》
《Web 輪播：② 「面向對象」寫法》
《Web 輪播：③ 給輪播加動畫》

▽ 前端高級

《NPM 與 Node.js 入門：① Node.js》
《NPM 與 Node.js 入門：② NPM 初識》
《NPM 與 Node.js 入門：③ NPM 詳解》
《NPM 與 Node.js 入門：④ 開發天氣命令行應用》
《「移動端」實戰技巧：① 「移動端」開發少踩坑（上）》
《「移動端」實戰技巧：② 「移動端」開發少踩坑（下）》
《HTTP：① HTTP 初識和報文》[編號：http_01]

涉及面試題：
1. HTTPS 是如何實現加密的？
2. HTTP 和 HTTPS 的區別？
3. 如何實現頁面每次打開時清除本頁緩存？
複製代碼

《HTTP：② HTTP 緩存》

▽ 🚀原生 JS 實戰：移動端音樂播放器（難度：☆☆☆）

《① 項目概覽和環境搭建》
《② 靜態頁面（大結構 + 移動端適配 + header）》
《③ 靜態頁面（SVG + panels）》
《④ 靜態頁面（SVG Sprite + buttons + bar-area + actions）》
《⑤ JS 效果實現（大致結構 + mock 數據）》
《⑥ JS 效果實現（播放/暫停 + 上/下一曲）》
《⑦ JS 效果實現（滑動窗口切換 + 歌詞加載）》
《⑧ JS 效果實現（歌詞定位 + 時間進度條 + 項目上線）》

▷ React.js 基礎語法學習前端

▷ 🚀React.js 實戰——PC 端「簡書」項目開發（難度：☆☆☆☆）node

▷ Vue.js 基礎語法學習es6

▷ 🚀Vue.js 實戰：移動端「旅遊網站」開發（難度：☆☆☆☆）（🔥近期火熱更新中~）web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。