作为一个前端一年多了，总觉得自也该写写自己的博客了。其实早就想写了，但是不知道写点什么，感觉自己还是小白，也不想自己写出的东西误人子弟。前段时间看见我们班群里分享了一张图片，上面有些题目，我自己做了一遍，觉得还是可以归纳分享出来的，听说是阿里的题目，我也不知真假，看题目，出的还是有点技术含量的。好了，话不多说就是干。这篇博客只是对这些题的个人解答方法，我自己针对个别题目也在百度上搜过，总觉得自己的写法可以继续优化，不是很好，希望对于前端同学有所帮助。大神就请绕道啦~题目如下：1、字符串数组去除重复的项，例如：['1','2','1','3'] --> ['1','2','3']; 代码：function quchong(arr) { var a = []; for(var i=0,len=arr.length;i<len;i++) { if(a.indexOf(arr[i]) == -1) { a.push(arr[i]); } } return a;}注意：“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<len;i++) { key = keys[i]; var arr = key.split(""); for(var j=0,length=arr.length;j<length;j++) { if(arr[j]=="_") { arr.splice(j,1); arr[j]=arr[j].toUpperCase(); } } keys[i] = arr.join(""); newObj[keys[i]] = obj[key]; } return newObj;}代码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：<div id="draggable" style="width:200px;height: 200px;background: #000;position: absolute;left: 0;top: 0;"></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;i<len;i++) { item = arr[i]; item = item.split('='); obj[item[0]] = item[1]; } } return obj; } 7.编写一个函数flatten，传入仅包含数字的多维数组，返回拍平后的结果。如：传入[1,[2,3]],返回[1,2,3]。代码：var result = [];function flatten(arr) { if(arr.length>0) { for(var i=0,len=arr.length;i<len;i++) { if(arr[i] instanceof Array && arr[i].length>0) { 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');结果截图：随记：我的第一篇博客写好了，分享的方法可能不是最好的，但是是我认为比较通俗易懂的。我觉得学习应该是积极主动的行为，所以分享的方法没有注释信息。如果对你有帮助，麻烦多多鼓励咯。前端的知在我看来是片汪洋大海，还有很多技术还在汇入其中，我希望，这次的分享只是开始，以后能有更优质的前端知识跟大家分享。
