1.css中l(wèi)ink和@import的區(qū)別

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

2.請(qǐng)根據(jù)優(yōu)先級(jí)為選擇器排序：id,class,tag,style,!important

!important > style > id > class > tag 復(fù)制代碼

3.請(qǐng)寫一個(gè)正則表達(dá)式滿足這樣的規(guī)則：15到20位的大寫字母或數(shù)字

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

4.雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理

// 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);}, })復(fù)制代碼

5.下面的代碼會(huì)輸出什么結(jié)果？

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 復(fù)制代碼

6.以下代碼輸出的結(jié)果依次是

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實(shí)例對(duì)象的狀態(tài)為成功的狀態(tài) }).then(() => {console.log('promise實(shí)例成功回調(diào)執(zhí)行'); }) console.log('end');// => start,0,1,2,3,4,end,promise實(shí)例成功回調(diào)執(zhí)行,setTimeout復(fù)制代碼

7.請(qǐng)寫一個(gè)函數(shù)對(duì)比兩個(gè)版本號(hào)的大小，如 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) } 復(fù)制代碼

8.深拷貝方案有哪些，手寫一個(gè)深拷貝

// 1.JSON.parse(JSON.stringify()) // 2.手寫遞歸方法 //定義檢測(cè)數(shù)據(jù)類型的功能函數(shù) function checkedType(target) {return Object.prototype.toString.call(target).slice(8, -1) } //實(shí)現(xiàn)深度克隆---對(duì)象/數(shù)組 function clone(target) {//判斷拷貝的數(shù)據(jù)類型//初始化變量result 成為最終克隆的數(shù)據(jù)let result, targetType = checkedType(target)if (targetType === 'Object') {result = {}} else if (targetType === 'Array') {result = []} else {return target}//遍歷目標(biāo)數(shù)據(jù)for (let i in target) {//獲取遍歷數(shù)據(jù)結(jié)構(gòu)的每一項(xiàng)值。let value = target[i]//判斷目標(biāo)結(jié)構(gòu)里的每一值是否存在對(duì)象/數(shù)組if (checkedType(value) === 'Object' ||checkedType(value) === 'Array') { //對(duì)象/數(shù)組里嵌套了對(duì)象/數(shù)組//繼續(xù)遍歷獲取到value值result[i] = clone(value)} else { //獲取到value值是基本的數(shù)據(jù)類型或者是函數(shù)。result[i] = value;}}return result } // 3.函數(shù)庫(kù)lodash 該函數(shù)庫(kù)也有提供_.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 復(fù)制代碼

9.請(qǐng)盡量簡(jiǎn)單的實(shí)現(xiàn)一個(gè)發(fā)布訂閱模式，要求滿足：發(fā)布、訂閱、移除

const Event = {clientList: {},// 綁定事件監(jiān)聽listen(key, fn){if(!this.clientList[key]){this.clientList[key] = [];}this.clientList[key].push(fn);return true;},// 觸發(fā)對(duì)應(yīng)事件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;},// 移除相關(guān)事件remove(key, fn){let fns = this.clientList[key];// 如果之前沒有綁定事件// 或者沒有指明要移除的事件// 直接返回if(!fns || !fn){return false;}// 反向遍歷移除置指定事件函數(shù)for(let l = fns.length - 1; l >= 0; l--){let _fn = fns[l];if(_fn === fn){fns.splice(l, 1);}}return true;} }// 為對(duì)象動(dòng)態(tài)安裝 發(fā)布-訂閱 功能 const installEvent = (obj) => {for(let key in Event){obj[key] = Event[key];} }let salesOffices = {}; installEvent(salesOffices);// 綁定自定義事件和回調(diào)函數(shù)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)); 復(fù)制代碼

掃一掃，關(guān)注我吧

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。