前端面試常問的基礎問題大全

一、es6的新特性  參考：https://www.jianshu.com/p/390a65d7a353

• 新增變量聲明方式：let 塊級做用域 const常量聲明
• promise
• 箭頭函數：不須要function關鍵字來建立函數，能夠省略return關鍵字，繼承當前上下文的this關鍵字
• Object.assign 淺拷貝
• ...擴展符號  淺拷貝  let arr = [2,3,4]; let result = [...arr];
• 函數參數能夠直接設置默認值：function(name="xiao"){}
• ``反斜號模板拼接，變量用${}
• 結構賦值：let [a,b,c] = [1,2,3]

•  Set 的成員具備惟一性: let set2 = new Set([4,5,6,5])
  　　      　　                 console.log('array to set 1:', set2) =>{4, 5, 6}

• Array.from([1,2,3]) // 返回和原數組一致
• 字符串操做
  • startsWith() 判斷字符串是否以 XX 開頭
  • endsWith() // 判斷字符串是否以 XX 結尾
  • includes //  let str = 'liaoke'; str.includes('ao');

　　

二、h5的新特性

 

• 語義標籤：header footer nav aside
• 表單
• 音頻 audio 視頻video
• canvas繪畫
• geolocation 定位
• localstorage：長期存儲數據，瀏覽器關閉後數據不丟失；
• sessionStorage 數據在瀏覽器關閉後自動刪除
• websockt 消息推送
• Drag 與Drop 拖放

 

 

三、css3的新特性

• border-radius 圓角
• box-shadow 邊框陰
• transform
  • translate
  • rotate
  • scale
• flex
• 多媒體查詢@media
• 動畫animation
• 背景
• background-image背景圖片
• background-size：cover保持橫縱比與背景盒子最小大小，contain 保持橫縱比縮放成適合盒子最大大小

 

四、vue的生命週期

1. beforeCreate：組件實例剛被建立
2. created:組件實例建立完成，屬性已綁定，可是DOM還未生成
3. beforeMount：模板編譯
4. mounted：掛載
5. beforeUpdate：
6. updated：更新
7. beforeDestroy：實例銷燬前
8. destroyed：銷燬

 

五、vue的實現原理

1. vue是一個典型的MVVM框架，模型Model是js對象，修改它則視圖VIEW自動更新。
2. vue實現雙向數據綁定，須要三大模塊：
   1. Observer:可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
   2. Compile:對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定想要的更新函數
   3. Watcher:做爲連接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖。

 

六、原型，原型鏈

• 原型鏈：javaScript中的每一個對象都有一個prototype屬性，咱們稱之爲原型，而原型的值也是一個對象，所以它也有本身的原型，這樣就串聯起來了一條原型鏈。原型鏈的鏈頭是object，它的prototype畢竟特殊，值爲null
• 原型鏈的做用是用於對象繼承，函數A的原型屬性（prototype property）是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，好比咱們新建一個數組，數組的方法便從數組的原型上繼承而來。

 

七、面向對象

• 面向對象是一種編程思想，簡稱OOP
• 面向對象的特徵：封裝、繼承、抽象、多態
• js的面向對象編程，用一句話說就是抽象，封裝，繼承，多態。
  • 抽象就是把一類事物的主要特徵跟問題相關的特徵抽取出來，使用函數進行封裝（不考慮內部實現原理，只考慮它功能使用）經過原型實現繼承（通俗理解就是父母能幹的事孩子也能幹好比吃飯，睡覺。在JS中，好比有一個對象A，A中有一些功能，如今從A中繼承出一個對象B，這個對象B就具備對象A的全部功能。）
  • js是弱類型語言自然具有多態的特性

 

八、瀏覽器適配

九、安卓，ios適配

十、媒體查詢

十一、盒模型

十二、淺拷貝與深拷貝

• 淺拷貝是拷貝的一層，深層次的對象級別的就拷貝引用
• 深拷貝是拷貝多層，每一層級的數據都會拷貝出來

1三、隱式轉換

1四、數組去重

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}
// es6 new Set
function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
// 利用對象的屬性不會重複這一特性，校驗數組元素是否重複

function distinct(a, b) {
let arr = a.concat(b)
let result = []
let obj = {}

for (let i of arr) {
if (!obj[i]) {
result.push(i)
obj[i] = 1
}
}

return result
}

 

1三、數組排序

1四、閉包

• 自執行函數也是閉包也叫作沙箱，就是讓內部變量不會污染全局。
• 閉包的特色：能夠讀取函數內部變量，將函數內部變量的值始終保存在內存中，保護函數內的變量不被更改
• 用途：
  • 使用閉包能夠訪問函數中的變量
  • 可使變量長期保存在內存中，生命

 

1五、跨域以及jsonp的工做原理

概念：瀏覽器對於js的同源策略的限制 同源策略：同一個域名，同一個端口，相同的協議 jsonp: ajax直接請求存在跨域無權限訪問的問題 凡是擁有src屬性的標籤均可以跨域如script img iframe jsonp的跨域請求只能是get不能是post 原理：jsonp是一種非正式的傳輸協議，該協議容許用戶傳遞一個callback參數給服務器，而後服務端返回數據時會將這個callback 參數做爲函數名包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

1六、變量聲明提高

1七、事件冒泡與事件代理與事件隊列

• 事件冒泡：當一個元素接收到事件的時候，會把它接收到的事件傳給本身的父級，一直到window.
• 事件代理：
  • 　$("div").on("click",function(){})
• js是單線程，任務按順序執行，若是一個任務很耗時，下一個任務不得不等待。爲了不這種阻塞，咱們須要一種非阻塞機制。這種非阻塞機制是一種異步機制，即須要等待的任務不會阻塞主執行棧中同步任務的執行。
• 運行機制：
  • 全部同步任務都在主線程上執行，造成執行棧。
  • 等待任務的回調結果進入任務隊列
  • 當主執行棧中的同步任務執行完畢後纔會讀取任務隊列，任務隊列中的異步任務會塞入主執行棧
  • 異步任務執行完畢後再次進入下一個循環
  • 任務隊列分爲：
    • 微任務：promises
    • 宏任務: setTimeout、setInterval等

 

1八、rn

1九、js繼承的幾種方式

• 原型鏈繼承
  • 　　
• 構造函數繼承
• 組合繼承（組合原型鏈與構造函數繼承）

20、rem em px的區別

• rem css3新增的相對單位，相對於根節點html的字體大小來計算的
• em：會繼承父級元素的字體大小
• px：像素的相對於顯示器屏幕分辨率而言的

 2一、vuex

• state：公共狀態
• Getters：計算屬性
• Mutations: 方法
• Actions：相似於mutaion,而不是直接變動狀態，能夠包含任意異步操做

 2二、js的數據類型

簡單數據類型：Number String Boolean Object引用類型：Object Array Function