$JavaScript（3）

4一、漸進加強和優雅降級

• 漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

• 優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

4二、defer和async

• defer並行加載js文件，會按照頁面上script標籤的順序執行

• async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

4三、說說嚴格模式的限制

• 變量必須聲明後再使用

• 函數的參數不能有同名屬性，不然報錯

• 不能使用with語句

• 禁止this指向全局對象

4四、attribute和property的區別是什麼？

• attribute是dom元素在文檔中做爲html標籤擁有的屬性；

• property就是dom元素在js中做爲對象擁有的屬性。

• 對於html的標準屬性來講，attribute和property是同步的，是會自動更新的

• 可是對於自定義的屬性來講，他們是不一樣步的

4五、談談你對ES6的理解

• 新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）

• 箭頭函數

• for-of（用來遍歷數據—例如數組中的值。）

• arguments對象可被不定參數和默認參數完美代替。

• ES6將promise對象歸入規範，提供了原生的Promise對象。

• 增長了let和const命令，用來聲明變量。

• 增長了塊級做用域。

• let命令實際上就增長了塊級做用域。

• 還有就是引入module模塊的概念

4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?

• 這個語法糖可讓有OOP基礎的人更快上手js，至少是一個官方的實現了

• 但對熟悉js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多

4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點

• 面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了

• 面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲

• 面向對象是以功能來劃分問題，而不是步驟

4八、面向對象編程思想

• 基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計

• 優勢

  • 易維護易擴展

    • 採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的

  • 開發工做的重用性、繼承性高，下降重複工做量。

  • 縮短了開發週期

4九、對web標準、可用性、可訪問性的理解

• 可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力

• 可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性

• 可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。

50、如何經過JS判斷一個數組？

• instanceof方法

• instanceof 運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性

var arr = []; 
arr instanceof Array; // true

• constructor方法

  • constructor屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數

  • var arr = []; 
    arr.constructor == Array; //true

• 最簡單的方法

  • 這種寫法，是 jQuery 正在使用的

  • Object.prototype.toString.call(value) == '[object Array]'
    // 利用這個方法，能夠寫一個返回數據類型的方法
    var isType = function (obj) {
         return Object.prototype.toString.call(obj).slice(8,-1); 
    }

• ES5新增方法isArray()

 

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

 

5一、談一談let與var的區別？

• let命令不存在變量提高，若是在let前使用，會致使報錯

• 若是塊區中存在let和const命令，就會造成封閉做用域

• 不容許重複聲明，所以，不能在函數內部從新聲明參數

5二、map與forEach的區別？

• forEach方法，是最基本的方法，就是遍歷與循環，默認有3個傳參：分別是遍歷的數組內容item、數組索引index、和當前遍歷數組Array

• map方法，基本用法與forEach一致，可是不一樣的，它會返回一個新的數組，因此在callback須要有return值，若是沒有，會返回undefined

5三、談一談你理解的函數式編程？

• 簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論

• 它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"

5四、談一談箭頭函數與普通函數的區別？

• 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象

• 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤

• 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替

• 不可使用yield命令，所以箭頭函數不能用做Generator函數

5五、談一談函數中this的指向吧？

• this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象

• 《javascript語言精髓》中大概歸納了4種調用方式：

• 方法調用模式

• 函數調用模式

• 構造器調用模式

graph LR
A-->B

• apply/call調用模式

5六、異步編程的實現方式？

• 回調函數

  • 優勢：簡單、容易理解
  • 缺點：不利於維護，代碼耦合高

• 事件監聽(採用時間驅動模式，取決於某個事件是否發生)：

  • 優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數
  • 缺點：事件驅動型，流程不夠清晰

• 發佈/訂閱(觀察者模式)

  • 相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者

• Promise對象

  • 優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；
  • 缺點：編寫和理解，相對比較難

• Generator函數

  • 優勢：函數體內外的數據交換、錯誤處理機制
  • 缺點：流程管理不方便

• async函數

  • 優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
  • 缺點：錯誤處理機制

5七、對原生Javascript瞭解程度

• 數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript

5八、Js動畫與CSS動畫區別及相應實現

• CSS3的動畫的優勢

  • 在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化
  • 代碼相對簡單

• 缺點JavaScript的動畫正好彌補了這兩個缺點，控制能力很強，能夠單幀的控制、變換，同時寫得好徹底能夠兼容IE6，而且功能強大。對於一些複雜控制的動畫，使用javascript會比較靠譜。而在實現一些小的交互動效的時候，就多考慮考慮CSS吧

  • 在動畫控制上不夠靈活
  • 兼容性很差

5九、JS 數組和對象的遍歷方式，以及幾種方式的比較

• for in循環

• for循環

• forEach

  • 這裏的 forEach回調中兩個參數分別爲 value，index
  • forEach 沒法遍歷對象
  • IE不支持該方法；Firefox 和 chrome 支持
  • forEach 沒法使用 break，continue 跳出循環，且使用 return 是跳過本次循環

• 這兩種方法應該很是常見且使用很頻繁。但實際上，這兩種方法都存在性能問題

• 在方式一中，for-in須要分析出array的每一個屬性，這個操做性能開銷很大。用在 key 已知的數組上是很是不划算的。因此儘可能不要用for-in，除非你不清楚要處理哪些屬性，例如 JSON對象這樣的狀況

• 在方式2中，循環每進行一次，就要檢查一下數組長度。讀取屬性（數組長度）要比讀局部變量慢，尤爲是當 array 裏存放的都是 DOM 元素，由於每次讀取都會掃描一遍頁面上的選擇器相關元素，速度會大大下降

60、gulp是什麼？

• gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成

• Gulp的核心概念：流

• 流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向

• gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做

• Gulp的特色：

  • 易於使用：經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理

  • 構建快速 利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做

  • 易於學習 經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道

6一、說一下Vue的雙向綁定數據的原理

• vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調