前端面试题

1.有这样一个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}。

function serlize(url){
    var result={};
    //1、寻找?后面的字符串
    url=url.substr(url.indexOf("?")+1);
    //2、将字符串用&分隔
    var args=url.split("&");//[“a=1”,”b=2”]
    for (var i = 0, len = args.length; i < len; i++) {
        var arg = args[i];
    var item = arg.split('=');
        //3、对象的键=值
        result[item[0]]= item[1];
    }
    return result;
}

2.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?

RegExp
答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要双反斜杠(即\表示一个\)。使用正则表达字面量的效率更高。
邮箱的正则匹配:
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/; 

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

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;  //缓存到局部变量
while (len--) {
  if (domList[len].type == ‘checkbox’) {
  checkBoxList.push(domList[len]);
  }}

4.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

<1>创建新节点
createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
<2>添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点
<3>查找
getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() // 通过元素Id,唯一性

5.下面这个ul,如何点击每一列的时候alert其index?(闭包)

<ul id=”test”>

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

 

// 方法一:

var lis=document.getElementById('2223').getElementsByTagName('li');

for(var i=0;i<3;i++)

{

    lis[i].index=i;

    lis[i].onclick=function(){

        alert(this.index);

    };

}

//方法二:

var lis=document.getElementById('2223').getElementsByTagName('li');

for(var i=0;i<3;i++){

    lis[i].index=i;

    lis[i].onclick=(function(a){

        return function() {

            alert(a);

        }

    })(i);

}

  

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

回答出概念即可,下面是几个要点

1. 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

2. mousedown事件触发后,开始拖拽

3. mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

4. mouseup时,拖拽结束

5. 需要注意浏览器边界的情况

7.AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?

1、对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.

2、CMD 推崇依赖就近,AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。

8.ECMAScript6 怎么写class么,为什么会出现class这种东西?

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
     return '('+this.x+', '+this.y+')';
  }
}

9.call() 和 apply() 的含义和区别?

apply的参数是数组形式,call的参数是单个的值,除此之外在使用上没有差别,重点理解这两个函数调用的this改变

10.数组和对象有哪些原生方法,列举一下?

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

 

Object对象的常用方法

Object.hasOwnProperty( ) 检查属性是否被继承

Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型

Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性

Object.toLocaleString( ) 返回对象的本地字符串表示

Object.toString( ) 定义一个对象的字符串表示

Object.valueOf( ) 指定对象的原始值

11.JavaScript原型,原型链 ? 有什么特点?

*  原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。

*  原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。

* JavaScript的数据对象有那些属性值?

  writable:这个属性的值是否可以改。

  configurable:这个属性的配置是否可以删除,修改。

  enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。

  value:属性值。

* 当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,就会查找他的Prototype对象是否有这个属性。

 function clone(proto) {

  function Dummy() { }

  Dummy.prototype = proto;

  Dummy.prototype.constructor = Dummy;

  return new Dummy(); //等价于Object.create(Person);

 }

        function object(old) {

         function F() {};

         F.prototype = old;

         return new F();

        }

    var newObj = object(oldObject);

12.异步加载的方式

  (1) defer,只支持IE

  (2) async:

  (3) 创建script,插入到DOM中,加载完毕后callBack

      documen.write和 innerHTML的区别

      document.write只能重绘整个页面

      innerHTML可以重绘页面的一部分

13.”==”和“===”的不同

前者会自动转换类型,再判断是否相等
后者不会自动类型转换,直接去比较

 

posted @ 2019-02-14 16:51  我自是年少  阅读(387)  评论(0编辑  收藏  举报