前端常见面试题【JS】

1、  /**
         * 事件绑定通用函数
         */
        function bind(/*元素*/el,/*事件类型*/type,/*回调函数*/fn){
            if(window.addEventListener){
                el.addEventListener(type,function(){
                   fn.apply(el,arguments);
                });
            }
            if(window.attachEvent){

                el.attachEvent('on'+type, function(){

                fn.apply(el,arguments);
            });
        }
2、  /**
         * 数组元素去重
         */
        Array.prototype.unique = function(){
            //先对数组排序
            this.sort();
            var ret = [this[0]];
            for(var i=1,l=this.length;i<l;i++){
                if(this[i] !== ret[ret.length-1]){
                    ret.push(this[i]);
                }
            }
            return ret;
        }
3、  /**
         * 点击alert其index
         */
        var children = document.getElemetsByTagName('a');
        for(var i=0,l=children.length;i<l;i++){
            children[i].onclick = (function(idx){
                    return function(){
                        alert(idx);
                    };
            })(i);
        }
使用闭包完成，闭包就是一个函数和函数定义时所起作用的作用域。
优点：1、模块可以只导出其公有函数，而将辅助函数和辅助变量这些实现细节锁定在闭包的私有名字空间中。
2、名字空间中的函数可以引用该名字空间中的其他函数和属性而不需要使用全局变量。
4、  /**
         * 实时打印系统时间
         */
        setInterval(function(){
                var date = new Date();
                var year = date.getYear();
                if(year < 1900){    //FF下getYear()会默认减掉1900
                    year = year+1900;
                }
                var month = date.getMonth()+1;
                var dd = date.getDate();
                var day = date.getDay();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                var str = year+"年"+month+"月"+dd+"日  "+day+"  "+hour+":"+minute+":"+second;
                document.getElementById("tick").innerHTML=str;
            },1000);
5、  /**
         * 统计字符串中出现次数最多的字符
         */
        function getCount(str){
            //重排列字符串
            var count = str.split('').sort().join('').match(/(.)\1*/g);
            //按字符出现的频繁次数排序
            count = count.sort(function(a,b){
               return a.length - b.length;
               }).pop();
            /*var result = '';
            for(var i=0,l=count.length;i<l;i++){
                result+=count[i].length + ':' + count[i]+',';
            }
            return result;*/
            return count.length+':'+count[0];
        }
6、  /**
         * js对象的深度克隆
         */
        Object.prototype.cloneDeep = function() {
            var destObj = {};
            if(this.constructor == Object){
                destObj = new this.constructor();
            } else {
                destObj = new this.constructor(this.valueOf());
            }
            for(var key in this) {
                if(destObj[key] != this[key]) {
                    if(typeof(this[key]) == 'Object') {
                        destObj[key] = this[key].cloneDeep();
                    } else {
                        destObj[key] = this[key];
                    }
                }
            }
            destObj.toString = this.toString;
            destObj.valueOf = this.valueOf;
            return destObj;
        }
7、事件冒泡即对一个元素绑定事件，事件触发（如onclick、mouseover，但blur、focus、onload、unload不会冒泡）时，如果没有定义事件处理程序或者事件返回true，这个事件就会一级级的往上向其父元素传播，导致激活了一些不想激活的事件.
eg:
    <div id="google" οnclick="open('www.google.com');">
        <div id="google" οnclick="open('www.baidu.com');">
        </div>
    </div>
    function open(url) {
        stopBubble();
        window.open(url);
    }
    当点击div_baidu的时候，却同时打开了google，此时可以使用一下函数阻止冒泡：
    阻止事件冒泡函数：
     function stopBubble(e) {
        if(window.event) {
            window.event.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
     }
（通过设置z-index设置元素重叠，这种情况不会发生冒泡.）
8、/**
       * JS跑马灯
       */
var rorate = (function($) {
    $("el li:first-child").addClass("current");     //设置第一张图cLass为current
    var width = $("el").width();    //容器width
    var num = $("el img").size();   //图片总数
    var roll = num * width;         //滚动长度
    $("el").css({"width":roll});

    function selectIdx(idx) {
        $("el li").removeClass("current");
        $("el li:nth-child(idx)").addClass("current");
        $("el").animate({left:-roll},600);
    }

    function bind(type,cb){
        var el = $(el).get(0);
        if(window.addEventListener) {
            el.addEventListener(type, function() {
                cb.apply(el, arguments);
            });
        }
        if(window.attachEvent) {
            el.attachEvent(type, function() {
                cb.apply(el, arguments);
            });
        }
    }

    function auto() {
        setInterval(function() {
            var current = $("el li[class='current']");
            if(!current.next()) {
                selectIdx(1);
            } else {
                selectIdx(current.attr("id")++);
            }
        },6000);
    }

    return {
        playByIdx: selectIdx,
        autoPlay: auto
    };
})(jQuery);
9、  /**
         * 按条件去除字符串空格
         */
        function trim(str) {
            //去除左空格
            return str.replace(/(^\s*)/g, "");
            //去除右空格
            return str.replace(/(\s*$)/g, "");
            //去除左右空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
            //去除所有空格
            return str.replace(/\s*/g, "");
        }

10、返回顶部

①、使用锚标记

页面顶部：<a name="top"></a>

页面底部：<a href="#top" target="_self">返回顶部</a>

②、使用scroll()函数

<a href="javascript:scroll(0,0);">返回顶部</a>