zoukankan      html  css  js  c++  java
  • 前端面试题

    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.”==”和“===”的不同

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

  • 相关阅读:
    JavaScript中trim 方法实现
    面向对象设计的SOLID原则
    对项目的了解差点儿为零?怎样高速上手一个新项目
    计算一个序列的移动平均线序列的模板,可实现均线的均线
    HTML5学习笔记简明版(10):废弃的元素和属性
    Using Swift with Cocoa and Objective-C下载
    实战Java虚拟机之中的一个“堆溢出处理”
    Delphi导出数据的多种方法
    Delphi+DBGrid导出Excel
    delphi try except语句 和 try finally语句用法以及区别
  • 原文地址:https://www.cnblogs.com/yangsg/p/10375505.html
Copyright © 2011-2022 走看看