您的位置：首页 > Web前端

前端笔试题及资料集锦（一）（持续更新....）

2014-09-11 13:54 316 查看

我也是在学习中喔，如果大家有好的方法，或者我的解答中有不对的不合理的效率不好的地方，请大家踊跃留言一起学习喔~

1、（2014年春季阿里巴巴实习生笔试）题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。

分析要点：随机生成数组，数组去重。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head>
<body>
<span>题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。（解答见控制台）</span>

<script>
/*生成长度为100，内容为随机整数构成的字符串的函数*/
var newArr = function(){
var a = [];
var i = 0;
var num = [];
for(i=0;i<100;i++){
num[i] = Math.floor(Math.random()*100) + "";
a.push(num[i]);
}
return a;
}
var arr = newArr();
console.log('随机生成的长度为100的数组a[]为：')
console.log(arr);
/* 删除数组a中的重复元素，并返回已删除的元素*/
var singleNum = function(arr){
var result = [];
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;){
if(arr[j] == arr[i])
{
result.push(arr.splice(j,1));
}else{
j++;
}
}
}
return result;
}
singleNum(arr);
/*log出删除重复元素后的a数组，成功去重*/
console.log('去重后的数组a[]为：')
console.log(arr);
</script>
</body>
</html>

谢谢大家的留言，鉴于上面的方法是最基本的最无趣的最没有新意的，必须改进哇..

改进版一：

分析：利用对象中的key唯一这个原理来对数组去重，（但是在某些数组元素比较复杂的情况下可能会有些问题喔，大家可以根据情况自行改进）。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head>
<body>
<span>题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。（解答见控制台）</span>

<script>
/*生成长度为100，内容为随机整数构成的字符串的函数*/
var arr = [];
var num = [];
for(var i=0;i<100;i++){
num[i] = Math.floor(Math.random()*100) + "";
arr.push(num[i]);
}
console.log('随机生成的数组为：');
console.log(arr);
/*删除重复元素后的arr数组*/
function singleNum(arr){
var tmp,tmpObj = {};
for(var i=0;i<arr.length;i++){
tmp = arr[i];
if(typeof tmpObj[tmp] === 'undefined'){
tmpObj[tmp] = tmp;
}else{
arr.splice(i,1);
i--;
}
}
return arr;
}
singleNum(arr);
/*log出删除重复元素后的a数组，成功去重*/
console.log('去重后的数组arr[]为：');
console.log(arr);
</script>
</body>
</html>

2、（2014年春季阿里巴巴实习生笔试）

题目：给定如下的一段字符串和javascript对象字面量，需要将字符串中所有使用花括号括起来的关键词，统一替换为对象字面量中对应的键值，请使用正则表达式实现字符串的模板替换操作。
字符串：<a href="{href}">{text}</a>
对象字面量：
{href:'//www.taobao.com/',text:'淘宝网'}

要求：
1.请给出用于配所有花括号关键词的正则表达式；
2.请尽可能考虑正则表达式的兼容性，匹配效率问题；
3.使用原生javascript语言，不依赖任何框架或类库。
正则表达式参考资料：<a href="http://blog.csdn.net/zaifendou/article/details/5746988">http://blog.csdn.net/zaifendou/article/details/5746988</a>

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head>
<body>

<span>题目：给定如下的一段字符串和javascript对象字面量，需要将字符串中所有使用花括号括起来的关键词，统一替换为对象字面量中对应的键值，请使用正则表达式实现字符串的模板替换操作。
<p>字符串：<textarea><a href="{href}">{text}</a></textarea></p>
<p>对象字面量：
<textarea>{href:'//www.taobao.com/',text:'淘宝网'}</textarea>
</p>
<p>要求：</p>
<p>1.请给出用于配所有花括号关键词的正则表达式；</p>
<p>2.请尽可能考虑正则表达式的兼容性，匹配效率问题；</p>
<p>3.使用原生javascript语言，不依赖任何框架或类库。</p>
<p>正则表达式参考资料：<a href="http://blog.csdn.net/zaifendou/article/details/5746988">http://blog.csdn.net/zaifendou/article/details/5746988</p>
</span>

<script>
var list = {
href:'//www.taobao.com/',
text:'淘宝网'
};
var str = '<a href="{href}">{text}</a>';
console.log(str.replace(/\{(\w+)}/g,function(i,id){return list[id];}));

</script>
</body>
</html>

分析：replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的字符串。

stringObject.replace(regexp/substr,replacement);

题目这样出，不禁想到模板的问题，看很多大公司网站源码都有这样的用法，无非是为了与后端模板的复用。模板引擎就是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，可以大大提高开发效率，同时也使代码复用变得更加容易。

十分感谢@萝卜奸商的留言不过还只是换一个正则匹配而已．．优劣问题，还需指点．．．

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head>
<body>

<script>
var list = {
href:'//www.taobao.com/',
text:'淘宝网'
};
var str = '<a href="{href}">{text}</a>';
console.log(str.replace(/\{([\s\S]+?)}/g,function(i,id){return list[id];}));

</script>
</body>
</html>

3、（2014年春季阿里巴巴实习生笔试）

题目：在页面上的这样的一个区块，区块中展示的数据都是页面加载后从后端ajax接口获取的，请实现该区块的数据请求与渲染的逻辑。

要求：

1.进行当前区块的样式布局。

2.设计当前区块所适合的json格式、或者xml的数据格式（要包含商品图片、商品原价、商品折扣价、商品标题、商品标签）并模拟接口data.json/data.xml

3.自行选择框架（KISSY，YUI，JQ）或者原生代码编写与设计好的后端接口通信和渲染的过程。

分析：

看到这一题不禁让我想到了上一个题目，像模板匹配一样的。取来我自己定义的json格式的数据，放到我自己写的简易模板中，匹配就是了。

一开始，我企图真的写个data.json来存放我的数据，像这样

但是根本是读不到的，据说是安全问题，这方面还不太懂....

其实在实际开发中，php会给个接口，像module/filter/data类似这样的，我们用的时候只要像这样

$.post('module/filter/data',function(data){
alert(data);
})

把我们想要的数据拿来就是了.....

于是乎，我开窍了，我写个data.js把我的数据放进去,然后导入到我的页面中不就行了嘛~

data.js

var JSON = {
"url" : "www.baidu.com",
"data":[
{
"blockid" : "1",
"img"  : "images/1.jpg",
"name" : "连衣裙1",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "2",
"img"  : "images/2.jpg",
"name" : "连衣裙2",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "3",
"img"  : "images/3.jpg",
"name" : "连衣裙3",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "4",
"img"  : "images/4.jpg",
"name" : "连衣裙4",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "5",
"img"  : "images/5.jpg",
"name" : "连衣裙5",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "6",
"img"  : "images/6.jpg",
"name" : "连衣裙6",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "7",
"img"  : "images/7.jpg",
"name" : "连衣裙7",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "8",
"img"  : "images/8.jpg",
"name" : "连衣裙8",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "9",
"img"  : "images/9.jpg",
"name" : "连衣裙9",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
{
"blockid" : "10",
"img"  : "images/10.jpg",
"name" : "连衣裙10",
"ju" : "images/bao.png",
"oldPrace" : "￥255",
"juPrace" : "￥180",
},
]
}

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head>
<script src="js/jquery-1.11.1.js" type="text/javascript"charset="utf-8"></script>
<script src="data.js" type="text/javascript"charset="utf-8"></script>
<style>
ul {
margin-right: auto;
margin-left: auto;
}
li {
display: inline-block;
padding-right: 25px;
padding-left: 15px;
}
a {
text-decoration: none;
}
</style>

<body>

<ul>
<textarea style="display:none;">
<li>
<a href="javascript:" data-id="$blockid$">
<p class="name">$name$</p>
<div>
<del class="old">$oldPrace$</del>
<strong class="juPrice">$juPrace$</strong>
</div>
</a>
</li>
</textarea>
</ul>

<script>

/*扩展的模板方法,用来匹配dom结构中的$..$这样的表达式，并进行替换*/
String.prototype.temp = function(obj){
return this.replace(/\$\w+\$/gi,function(matches){
var returns = obj[matches.replace(/\$/g,"")];
return(returns+"") == "undefined"?"":returns;
});
};
var htmlList = '';
/*获得包括<li>元素在内的整个模板*/
var htmlTemp = $('textarea').val();
JSON.data.forEach(function(object){
htmlList += htmlTemp.temp(object);
});
/*由于图片存在url因此直接在htnl中写$img$会报错，于是选择动态写进去的方式，但是要等dom加载完再插入，不然会找不到要插入的位置*/
$(document).ready(function(){
console.log(htmlList);
var imgPic=[];
var bao = [];
for(var i=0;i<JSON.data.length;i++){
imgPic[i] = '<img height="180" width="200" src="'+JSON.data[i].img+'"/></br>';
console.log(imgPic[i]);
bao[i] = '<img height="12" width="20" src="'+JSON.data[i].ju+'"/>'
/*要注意到这里获取到i的值得方法，要让它可以取到*/
var indexImg = 'li:eq("'+i+'") p';
$(indexImg).prepend(imgPic[i]);
var indexBao = 'li:eq("'+i+'") p';
$(indexBao).after(bao[i]);
}
});
$('ul').html(htmlList);
</script>

</body>
</html>

然后就可以实现如下图的效果。（当然，实现的过程中我是踩到了无数个坑的....囧）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航