Skip to content

初级前端面试题(js部分) #1

@RoachieDev

Description

@RoachieDev
  1. JavaScript的数据类型都有什么?answser

  2. 已知id的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架) answser

  3. 希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

  4. 设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为红色(不使用第三方框架)

  5. 当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?那么问题来了,Javascript的事件流模型都有什么?

  6. 看下列代码,输出什么?解释原因。

    var a;
    alert(typeof a);
    alert(b);
  7. 看下列代码,输出什么?解释原因。

    var a = null;
    alert(typeof a);
  8. 下面代码输出什么,并解释。

    var undefined;
    undefined == null;
    -1 == true;
    1 == true;
    2 == true;
    0 == false;
    0 == '';
    NaN == NaN;
    [] == false;
    [] == ![];
  9. 那么问题来了,看下面的代码,输出什么,foo的类型为什么?

    var foo = "11" + 2 - "1";
    console.log(foo);
    console.log(typeof foo);
    var foo = "11"+2+"1";
    console.log(foo);
    console.log(typeof foo);
  10. 看代码给答案。

    var a = new Object();
    a.value = 1;
    b = a;
    b.value = 2;
    alert(a.value);
  11. 已知数组var stringArray = ['this', 'is', 'baidu', 'campus'],Alert出'This Is Baidu Campus'。

  12. var numberArray = [3, 6, 2, 4, 1, 5];

    • 实现对该数组的倒排,输出 [5, 1, 4, 2, 6, 3]
    • 实现对该数组的降序排列,输出 [6, 5, 4, 3, 2, 1]
  13. 输出今天的日期,以YYYY-MM-DD的方式,比如今天是2018年7月14日,则输出2018-07-14。

  14. 将字符串<tr><td>{id}</td><td>{name}</td></tr>中的{id}替换成10{name}替换成 Edwin(使用正则表达式)

  15. 为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义。

  16. foo = foo || bar,这行代码是什么意思?为什么要这样写?

  17. 看下列代码,将会输出什么?

    var foo = 1;
    function(){
        console.log(foo);
        var foo = 2;
        console.log(foo);
    }
  18. 用js实现随机选取10--100之间的10个数字,存入一个数组,并排序。

  19. 把两个数组合并,并删除第二个元素。

  20. 怎样添加、移除、移动、复制、创建和查找节点。

  21. 有这样一个URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如 {a:'1', b:'2', c:'', d:'xxx', e:undefined }

  22. 看下面代码,给出输出结果。

    for(var i=1;i<=3;i++){
      setTimeout(function(){
          console.log(i);   
      },0); 
    };
  23. 写一个function,清除字符串前后的空格。(兼容所有浏览器)

  24. Javascript中callee和caller的作用?

  25. 如何消除一个数组里面重复的元素?

  26. 下面这个ul,如何点击每一列的时候alert其index?

    <ul id="test">
        <li>这是第一条</li>
        <li>这是第二条</li>
        <li>这是第三条</li>
    </ul>
  27. 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

  28. 如何消除一个数组里面重复的元素?

  29. 小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:

    function Dog() {
    	this.wow = function() {
    		alert(’Wow’);
    	}
    	
        this.yelp = function() {
    		this.wow();
    	}
    }

    小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实。

  30. 编写一个JavaScript函数,输入指定类型的选择器(仅需支持id,class,tagName三种简单CSS选择器,无需兼容组合选择器)可以返回匹配的DOM节点,需考虑浏览器兼容性和性能。

  31. 请评价以下代码并给出改进意见。

    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);
    		})
    	} 
    }
  32. 给String对象添加一个方法,传入一个string类型的参数,然后将string的每个字符间价格空格返回,例如:

addSpace("hello world")  // -> 'h e l l o  w o r l d'
  1. 定义一个log方法,让它可以代理console.log的方法。

  2. apply和call方法的异同。

  3. 在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

  4. 对作用域上下文和this的理解,看下列代码:

    var User = {
    	count: 1,
    	getCount: function() {
    		return this.count;
    	}
    };
    console.log(User.getCount()); // what?
    var func = User.getCount;
    console.log(func()); // what?
  5. 原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

  6. 想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

  7. 说出以下函数的作用是?空白区域应该填写什么?

    //define
    (function(window) {
    	function fn(str) {
    		this.str = str;
    	}
     
    	fn.prototype.format = function() {
    		var arg = ______;
    		return this.str.replace(_____, function(a, b) {
    			return arg[b] || '';
            })
        }
    	window.fn = fn;
    })(window);
     
    //use
    (function() {
        var t = new fn('<p><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7B0%7D">{1}</a><span>{2}</span></p>');
    	console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'));
    })();
  8. 用面向对象的Javascript来介绍一下自己。

  9. 讲解原生Js实现ajax的原理。

  10. 那么知道什么是Jsonp和pjax吗?

写在最后:

  • 为保证对题目知识的更好理解和掌握,只列出了题目。 关于答案之后会补充更新一份。
  • 如果由于题目有问题,错别字等请及时告知并更正。
  • 本题列表仅作为学习交流用途。一些题来源网络,如果有侵权等请联系作者删除之。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions