JavaScript 阿里笔试题

最近在准备JavaScript的笔试题.网上看到有阿里的就拿来学习学习.自己写的答案在下边.

1、请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2....."
var obj = parseQueryString(url);
alert(obj.key0)? // 输出0

2、请编写一个通用的事件注册函数(请看下面的代码)。

function addEvent(element, type, handler)
{
    // 在此输入你的代码,实现预定功能
}

3.尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因):

var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }   
    this.waitAndShout = function(){
        //隔五秒钟后执行上面的shout方法
    }
}

4.请根据下面的描述,用JSON语法编写一个对象: “小明今年22岁,来自杭州。兴趣是看电影和旅游。他有两个姐姐,一个叫小芬,今年25岁,职业是护士。还有一个叫小芳,今年23岁,是一名小学老师。”
var person = ?
5:请给JavaScript的String 原生对象添加一个名为trim 的原型方法,用于截取空白字符。要求:

alert(" taobao".trim());     // 输出 "taobao"
alert(" taobao ".trim());    // 输出 "taobao"

6:请编写一段JavaScript脚本生成下面这段DOM结构。要求:使用标准的DOM方法或属性。

淘!你喜欢

7,请说明下面各种情况的执行结果,并注明产生对应结果的理由。
function doSomething() {
alert(this);
}
① element.onclick = doSomething,点击element元素后。
② element.onclick = function() {doSomething()}, 点击element元素后。
③ 直接执行doSomething()。
8:请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。

9阅读以下JavaScript代码:

if (window.addEventListener) {
    var addListener = function(el, type, listener, useCapture) {
        el.addEventListener(type, listener, useCapture);
    };
} else if (document.all) {
    addListener = function(el, type, listener) {
        el.attachEvent("on" + type, function() {
            listener.apply(el);
        });
    };
}

请阐述 :
a) 代码的功能;
b) 代码的优点和缺点;
c) listener.apply(el) 在此处的作用;
d) 如果有可改进之处,请给出改进后的代码,并说明理由。

Answers:
1: 当然你也可以用var params=url.split("?")[1].split("&"); 我更喜欢这么写.

function parseQueryString(url) {
    var params = url.substring(url.indexOf("?") + 1,url.length);
    var paramsArray = params.split("&");
    var result= {};
    var entry ;
    for(var i= 0 ; i < paramsArray.length;i++ ){
        entry = paramsArray[i].split("=");
        result[entry[0]] = entry[1];
    }
    return result;
}

返回值是 : {key0: "0", key1: "1", key2: "2"}
2: 这个其实不光有.AddEvent ,看了一下阮老师写的书, 总体提出来就这样;
说白了就是为了兼容怪异的IE,我是在IE 上用IE 8 测的,目前这些需求都满足.

var EventUtil = {
    addEvent: function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false)
        }else if(element.attachEvent()){
            element.attachEvent("on" + type,handler)
        }else{
            element["on" + type] = handler;
        }
    },
    removeEvent : function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false)
        }else if(element.detachEvent()){
            element.detachEvent("on" + type,handler)
        }else{
            element["on" + type] = null;
        }
    },
    getEvent: function(event){
        return event? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }
}

3:我直接就用ES6 写了,免得用es5 this 传过来传过去的.本身箭头函数中 没有本身的this, 箭头函数用的是箭头函数外边的那个this

var Obj = function(msg){
    console.log(msg)
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }
    this.waitAndShout = () => {
        setTimeout(() => {
            this.shout();
        },5000)
    }
}
var instance = new Obj("message");
instance.waitAndShout();

或者你也可以这么写 主要差在一个返回值.

var Obj = function(msg){
    console.log(msg)
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }
    this.waitAndShout = () => {
        setTimeout(() => {
            this.shout();
        },5000)
    }
    return this;
}

Obj("message").waitAndShout();

4: 这个感觉简单一些

var person= {
    name:"小明",
    age:22,
    city:"杭州",
    interests:["看电影","旅游"],
    sisters:[
        {
            name:"小芬",
            age:25,
            occupation:"护士"
        },{
            name:"小芳",
            age:25,
            occupation:"小学老师"
        }
    ]
}

5:按照要求 给String的原生对象 也就是需要用原型链来解决.
话说回来真的在笔试里 写 正则? 可能我看见这道题就略过了...能背住?
这个例子是别人写的,我们就分析一下怎么满足条件的.
本身正则 //包围起来,后边没有其他修饰符
需要trim 字符串左右两边的空格, 空格在正则里边是 \s ,^表示以空格开始. * 表示任意个 ,可以理解为 ^\s左边多个空格开始.\s$ 右边多个空格结束,中间 包含了 a-z A-Z的字母,[]表示查找方括号之间的任何字符 . {n,m} 至少出现n次,最多出现m次,
然后调用了 String 本身的match 方法.

String.prototype.trim=function(){
    var reg=/^\s*([a-zA-Z]{1,})\s*$/;
    return this.match(reg)[1];
}

你们可以看下match方法 .返回值第一项是原来的字符,第二项是操作后的字符串


111111.png

6.考验JavaScript 基础DOM 操作. 感觉没有机器 直接写还是有点难度.

var div = document.createElement("div");
var p = document.createElement("p");
var text = document.createTextNode("淘!你喜欢");
p.appendChild(text);
p.className = "slogan";
div.appendChild(p);
div.setAttribute("id","example");
document.body.appendChild(div);
222.png

或者可以这么写.

var div = document.createElement("div");
var p = document.createElement("p");
p.className = "slogan";
div.appendChild(p);
p.innerHTML = "淘! 你喜欢";
div.setAttribute("id","example");
document.body.appendChild(div);

我试了一下 就算把p.innerHTML 设置放到最后一行也好用. 但是看起来不方便 还是放前边吧.
7 答案:
①弹出element对象,通过函数赋值方式,this直接指向element对象
②弹出window对象,this是写在doSomething这个函数里面的,而函数的this和谁调用它有关。如果没有对象调用它,那么this是window.
③刷新页面弹出window,没有绑定对象的情况下this默认指向window
8 : 答案:
HTML注释
JavaScript注释单行//多行//
CSS注释/
/
Java注释单行//多行//
PHP注释单行//多行/
/
Python注释#
9: 答案:
a)给组件注册事件
b)优点:兼容了IE和W3C;缺点:第二个条件下应该声明var,否则就会变成全局函数,下面给出的写法就把addListener 变量提到了括号外边
c)作用:绑定listener的作用域为el

var addListener = function(el, type, listener, useCapture) {
    if (window.addEventListener) {
        el.addEventListener(type, listener, useCapture);
    }else if (document.all) {
        el.attachEvent("on" + type, function() {
            listener.apply(el);
        });
    }else{
        el["on"+type]=listener;
    }
};

你可能感兴趣的:(JavaScript 阿里笔试题)