摘要:前段時間看見我們班群里分享了一張圖片,上面有些題目,我自己做了一遍,覺得還是可以歸納分享出來的,聽說是阿里的題目,我也不知真假,看題目,出的還是有點技術含量的。我覺得學習應該是積極主動的行為,所以分享的方法沒有注釋信息。
作為一個前端一年多了,總覺得自也該寫寫自己的博客了。其實早就想寫了,但是不知道寫點什么,感覺自己還是小白,也不想自己寫出的東西誤人子弟。前段時間看見我們班群里分享了一張圖片,上面有些題目,我自己做了一遍,覺得還是可以歸納分享出來的,聽說是阿里的題目,我也不知真假,看題目,出的還是有點技術含量的。好了,話不多說就是干。這篇博客只是對這些題的個人解答方法,我自己針對個別題目也在百度上搜過,總覺得自己的寫法可以繼續優化,不是很好,希望對于前端同學有所幫助。大神就請繞道啦~
題目如下:
1、字符串數組去除重復的項,例如:
["1","2","1","3"] --> ["1","2","3"];
代碼:
function quchong(arr) { var a = []; for(var i=0,len=arr.length;i注意:“indexOf”方法是ECMAscript5方法,IE8以上支持;
2、寫一個轉換函數,把JSON對象的key從橫杠形式(Pascal)轉換成小駝峰形式(Camel)。即["a_b":1] --> ["aB":1]
代碼1:function trans(obj) { var arr = []; var newObj = {}; var pos,key; for(var p in obj) { key = p; pos = p.indexOf("_"); p = p.slice(0,pos)+""+p.substr(pos+1,1).toLocaleUpperCase()+""+p.slice(pos+2); newObj[p] = obj[key]; } return newObj; }代碼2:
function trans(obj) { var keys = Object.keys(obj); var newObj = {}; var key; for(var i =0,len=keys.length;i代碼3:
function trans(str) { var re = /-(w)/g; str = str.replace(re, function ($0, $1) { return $1.toUpperCase(); }); };注意:前兩種方法都類似字符串拼接的方法,第一種主要是通過字符串方法slice來截取字符串;第二種方法主要是通過數組和字符串的轉換,來完成字符串的拼接;第三種方法適合熟悉正則表達式的同學,這里主要使用了replace的回調函數方法。
3、寫一個類Person,擁有屬性age和name,擁有方法say(something)。代碼:
function Person(age, name) { this.age = age; this.name = name; } Person.prototype.say=function() { // something console.log("let"s do something"); } function Superman(power) { this.power = power; } Superman.prototype = new Person(18,"程序員"); Superman.prototype.fly = function(height) { console.log("height:",height); } var superman = new Superman("電力"); console.log(superman.name,superman.age,superman.power,superman.fly(300));結果截圖:
注意:這種方法在《JavaScript設計模式》一書中叫類式繼承,有興趣的同學可以了解一下。
4、給一個div:
用原生js讓這個div可以拖拽;
代碼:window.onload=function() { var box = document.getElementById("draggable"); box.onmousedown = function() { document.onmousemove = function(event) { var ev = event || window.event; box.style.left = (ev.clientX - box.offsetHeight/2)+"px"; box.style.top = (ev.clientY - box.offsetWidth/2)+"px"; } } box.onmouseup = function() { document.onmousemove = null; } }5、寫一個函數實現數字格式化輸出,比如輸入999999999,輸出為999,999,999。
代碼:function formarNum(num,sep) { sep = sep || ","; var reg = /B(?=(d{3})+(?!d))/g; var str = num.toString().replace(reg,sep); return str; }注意:如果數字不是很大,可以直接使用toLocaleString()的方法;如果需要格式化的數字有小數部分,還需要把小數部分截取出來,格式化整數部分再拼接輸出結果。
toLocaleString方法使用截圖:
6、編寫一個函數parseQueryString,它的用途是把URL參數解析為一個對象。
代碼:function parseQuryString(url) { var obj = {}; var str = ""; var arr = []; var item = ""; if(url.indexOf("?")!=-1) { str = url.split("?")[1]; arr = str.split("&"); for(var i=0,len=arr.length;i7.編寫一個函數flatten,傳入僅包含數字的多維數組,返回拍平后的結果。
如:傳入[1,[2,3]],返回[1,2,3]。代碼:
var result = []; function flatten(arr) { if(arr.length>0) { for(var i=0,len=arr.length;i0) { flatten(arr[i]) } else { result.push(arr[i]); } } } return result; } 注意:這里用到了遞歸的方法,如果數組中的元素還是數組且子數組的長度大于零,就繼續調用本方法。
8、寫一個類EventEmitter,實現簡單的發布訂閱功能:const e = new EventEmitter(); e.on("update",function(data){console.log(data)}); e.emit("update","message");代碼:
function EventEmitter(event,cb) {}; EventEmitter.prototype.on = function(eventName,cb) { this[eventName] = cb; } EventEmitter.prototype.emit = function(eventName,message) { this[eventName](message); } var e = new EventEmitter(); e.on("update",function(data){console.log(data)}); e.emit("update","message");結果截圖:
注意:如果想鏈式(xx.xx.xx)使用發布訂閱功能,需要在on和emit中將this返回。
例如:function EventEmitter(event,cb) {}; EventEmitter.prototype.on = function(eventName,cb) { this[eventName] = cb; return this; } EventEmitter.prototype.emit = function(eventName,message) { this[eventName](message); return this; } var e = new EventEmitter(); e.on("update",function(data){console.log(data)}).on("go",function(data){alert(data)}); e.emit("update","message").emit("go","go home");結果截圖:
隨記:我的第一篇博客寫好了,分享的方法可能不是最好的,但是是我認為比較通俗易懂的。我覺得學習應該是積極主動的行為,所以分享的方法沒有注釋信息。如果對你有幫助,麻煩多多鼓勵咯。前端的知在我看來是片汪洋大海,還有很多技術還在匯入其中,我希望,這次的分享只是開始,以后能有更優質的前端知識跟大家分享。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52313.html
摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續更新中……,可以關注下github 項目地址 https:...
摘要:軟件測試自學秘訣面試失敗一天,心態穩的一批,因為面試的全是外包人事幫我聯系的公司,工資全都是一萬以上,之前只有四五千的自己根本不覺得自己能勝任。 個人是去年年底零基礎轉行,兩三千培訓費學出來,學完后也是稀里糊涂,僅是知道功能測試就是找問題,其他接口,性能,數據庫,python基礎,虛擬機搭建網站都實現了課程展示那樣。面試資...
摘要:好不容易在月號這天中午點左右接到了來自阿里的面試電話。這里會不斷收集和更新基礎相關的面試題,目前已收集題。面試重難點的和的打包過程多線程機制機制系統啟動過程,啟動過程等等掃清面試障礙最新面試經驗分享,此為第一篇,開篇。 2016 年末,騰訊,百度,華為,搜狗和滴滴面試題匯總 2016 年未,騰訊,百度,華為,搜狗和滴滴面試題匯總 各大公司 Java 后端開發面試題總結 各大公司 Jav...
摘要:閉包有多重前端知識點大百科全書前端掘金,,技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 Vue全家桶實現還原豆瓣電影wap版 - 掘金用vue全家桶仿寫豆瓣電影wap版。 最近在公司項目中嘗試使用vue,但奈何自己初學水平有限,上了vue沒有上vuex,開發過程特別難受。 于是玩一玩本項目,算是對相關技術更加熟悉了。 原計劃仿寫完所有頁面,礙于豆瓣的接口API有限,實現頁面也有...
閱讀 3056·2021-09-22 15:59
閱讀 1310·2021-08-30 09:46
閱讀 2272·2019-08-30 15:54
閱讀 2003·2019-08-26 12:15
閱讀 2530·2019-08-26 12:09
閱讀 1328·2019-08-26 11:57
閱讀 3333·2019-08-23 17:11
閱讀 1879·2019-08-23 15:59