1.css中link和@import的區別

區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS 區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。 區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。 區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。 復制代碼

2.請根據優先級為選擇器排序：id,class,tag,style,!important

!important > style > id > class > tag 復制代碼

3.請寫一個正則表達式滿足這樣的規則：15到20位的大寫字母或數字

/([A-Z]|[0-9]){15-20}/ 復制代碼

4.雙向數據綁定的實現原理

// Object.defineProperty 方式 var obj = {} Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function(){return obj[key]},set: function(newVal){obj[key] = newVal} }) // proxy方式 const obj = {}; const newObj = new Proxy(obj, {get: function(target, key, receiver) {return Reflect.get(target, key, receiver);},set: function(target, key, value, receiver) {return Reflect.set(target, key, value, receiver);}, })復制代碼

5.下面的代碼會輸出什么結果？

var fullname ='a'; var obj = {fullname: 'b',prop:{fullname: 'c',getFullName:function(){return this.fullname;}} }; console.log(obj.prop.getFullName()); // =>c var test = obj.prop.getFullName; console.log(test()) // => a 復制代碼

6.以下代碼輸出的結果依次是

setTimeout(() => {console.log(1) }, 0) new Promise(function exectutor(resolve) {console.log(2)for (var i = 0; i < 10000; i++) {i == 9999 && resolve()}console.log(3) }).then(function() {console.log(4) }) console.log(5)// => 2,3,5,4,1Promise.resolve().then(()=>{console.log('Promise1') setTimeout(()=>{console.log('setTimeout2')},0) }) setTimeout(()=>{console.log('setTimeout1')Promise.resolve().then(()=>{console.log('Promise2') }) },0)// => Promise1,setTimeout1,Promise2,setTimeout2console.log('start'); setTimeout(() => {console.log('setTimeout'); }, 0) new Promise((resolve, reject) =>{for (var i = 0; i < 5; i++) {console.log(i);}resolve(); // 修改promise實例對象的狀態為成功的狀態 }).then(() => {console.log('promise實例成功回調執行'); }) console.log('end');// => start,0,1,2,3,4,end,promise實例成功回調執行,setTimeout復制代碼

7.請寫一個函數對比兩個版本號的大小，如 1.2.3 和 2.1.5

function que(param1,param2) {var param1Arr = param1.split('.').join('')var param2Arr = param2.split('.').join('')return Number(param1Arr)>Number(param2Arr) } 復制代碼

8.深拷貝方案有哪些，手寫一個深拷貝

// 1.JSON.parse(JSON.stringify()) // 2.手寫遞歸方法 //定義檢測數據類型的功能函數 function checkedType(target) {return Object.prototype.toString.call(target).slice(8, -1) } //實現深度克隆---對象/數組 function clone(target) {//判斷拷貝的數據類型//初始化變量result 成為最終克隆的數據let result, targetType = checkedType(target)if (targetType === 'Object') {result = {}} else if (targetType === 'Array') {result = []} else {return target}//遍歷目標數據for (let i in target) {//獲取遍歷數據結構的每一項值。let value = target[i]//判斷目標結構里的每一值是否存在對象/數組if (checkedType(value) === 'Object' ||checkedType(value) === 'Array') { //對象/數組里嵌套了對象/數組//繼續遍歷獲取到value值result[i] = clone(value)} else { //獲取到value值是基本的數據類型或者是函數。result[i] = value;}}return result } // 3.函數庫lodash 該函數庫也有提供_.cloneDeep用來做 Deep Copy var _ = require('lodash'); var obj1 = {a: 1,b: { f: { g: 1 } },c: [1, 2, 3] }; var obj2 = _.cloneDeep(obj1); console.log(obj1.b.f === obj2.b.f); // false 復制代碼

9.請盡量簡單的實現一個發布訂閱模式，要求滿足：發布、訂閱、移除

const Event = {clientList: {},// 綁定事件監聽listen(key, fn){if(!this.clientList[key]){this.clientList[key] = [];}this.clientList[key].push(fn);return true;},// 觸發對應事件trigger(){const key = Array.prototype.shift.apply(arguments),fns = this.clientList[key];if(!fns || fns.length === 0){return false;}for(let fn of fns){fn.apply(null, arguments);}return true;},// 移除相關事件remove(key, fn){let fns = this.clientList[key];// 如果之前沒有綁定事件// 或者沒有指明要移除的事件// 直接返回if(!fns || !fn){return false;}// 反向遍歷移除置指定事件函數for(let l = fns.length - 1; l >= 0; l--){let _fn = fns[l];if(_fn === fn){fns.splice(l, 1);}}return true;} }// 為對象動態安裝 發布-訂閱 功能 const installEvent = (obj) => {for(let key in Event){obj[key] = Event[key];} }let salesOffices = {}; installEvent(salesOffices);// 綁定自定義事件和回調函數salesOffices.listen("event01", fn1 = (price) => {console.log("Price is", price, "at event01"); })salesOffices.listen("event02", fn2 = (price) => {console.log("Price is", price, "at event02"); })salesOffices.trigger("event01", 1000); salesOffices.trigger("event02", 2000);salesOffices.remove("event01", fn1);// 輸出: false // 說明刪除成功 console.log(salesOffices.trigger("event01", 1000)); 復制代碼

掃一掃，關注我吧

總結

以上是生活随笔為你收集整理的萌妹子的前端面试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。