2014蘑菇街校招前端笔试题和我自己的解答

发表于   |   分类于   |  

写出position属性的属性值，简述各值的感化与差别

position: static;

元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

position: relative;

元素框偏移某个距离，元素仍然保持位定位前的形状，它原本所占的空间仍然保留

position: absolute;

元素从文档流完全删除，相对于包含块定位，包含块可能是元素中的另一个元素或者初始包含块（）。元素原先在正常文档流中所占的空间被关闭，且定位后的元素会生成一个块级框

position: fixed;

相当于包含块是视窗的position: absolute;

写出一个两列等高，左列固定宽度为300px，右列自适应浏览器的布局

这里参考豆瓣克军大牛的一篇文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
    body {
        height: 500px;
    }
    .left {
        background: yellow;
        width: 300px;
        float: left;
        height: 100%;
    }
    .right {
        overflow: hidden;
        zoom: 1;
        background: green;
        height: 100%;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right">
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
        <p>abcd</p>
    </div>
</body>

写一个获取url中参数的值的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getRequest() {

        var url = window.location.search;

        var oRequest = new Object();

        if (url.indexOf('?') !== -1) {

            url = url.substr(1); // 取得?以后的字符串

            var reqArr = url.split('&');

            for (var i = 0; i < reqArr.length; i++) {

                oRequest[(reqArr[i].split('='))[0]] = unescape((reqArr[i].split('='))[1]);
            }
            
        }

        return oRequest;

    }

有字符串在的地方就少不了正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 根据参数获取参数值
function getQueryString(name) {

    var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)", "i");

    var ret = location.search.substr(1).match(reg);

    return ret === null ? null : ret[2];
}

console.log(getQueryString("key"));


// 返回参数与参数的值对象
function getRequest() {
    var searchStr = decodeURI(window.location.search);
    var reg = /([\u4E00-\u9FFFa-zA-Z0-9_]+=[\u4E00-\u9FFFa-zA-Z0-9_]+)/g;
    var aRes = [];
    var oRequest = {};
    var i = 0;
    aRes = searchStr.match(reg);
    for (i = 0; i < aRes.length; i++) {
        oRequest[(aRes[i].split('='))[0]] = (aRes[i].split('='))[1];
    }
    return oRequest;
}
console.log(getRequest());

写出一个3X5的方格一共有几许个矩形的推导过程以及成果

每个矩形都是由两条水平直线和两条竖直直线组成的，那么水平直线的取法有 32/(21) = 3,竖直线的取法有 54/(21) = 10，则矩形个数为30（不知道这里正方形算不算矩形……）

  • 简单用代码实现下JS中的原型持续，并且画图申明其父类与子类的原型关系
  • 用JS代码简单介绍本身
  • JS中的数据类型？如何断定一个变量是否是String类型

在ECMAScript有5种基本数据类型： Undefined/Null/Boolean/Number/String， 以及一种复杂数据类型Object。

1
2
3
4
5
6
7
8
var str = new String("abcd");
console.log(typeof str); // object
console.log(Object.prototype.toString.call(str) === "[object String]"); // true

var str1 = "abcd";

console.log(typeof str1); // string
console.log(Object.prototype.toString.call(str1) === "[object String]"); // true