[原]有意思的前端面试题-附答案（一）

超过20家的前端面试题汇总，每天做一点，专挑有意思的做

此面试题题目部分来源：

https://juejin.im/post/58c51b5c44d90400698da686?utm_source=gold_browser_extension

1：当前一段代码输出结果是什么？

var z = 10;
function foo(){
    console.log(z);
}
(function(funArg){
    var z = 20;
    funArg();
})(foo);

【答案】：10

这个其实还是考察函数的作用域和闭包的知识，因为foo函数是在一个自执行匿名函数里调用，在这里面声明的变量其实在函数foo体并不会访问到，所以在去找爸爸，全局声明的z，即输出 10

2.当前一段代码输出结果是什么？

var data = [];
for(var k = 0; k < 3; k++){
        data[k] = function(){
            console.log(k);
        };
}
data[0]();
data[1]();
data[2]();

【答案】： 3 3 3

闭包，不多讲，把K的声明换成es6的写法let就可以变成 0 1 2

3.假设现有一篇文章，var content = “…大量文字”，

文章中触及到一些敏感词汇,如 [“习近平”,”周永康”,”中共”,”6.4”] 等内容。

如何在文章中发现这些敏感词，并将背景设置为红色或者改变字体颜色并标示出来。

【答案】

利用正则来做，方便快捷

function filter(content) {
    var result = '';
    // 预先设置的敏感词
    var minWords = ["习近平", "周永康", "中共", "6.4"];
    for (let i = 0; i < content.length; i++) {
        var reg = new RegExp(minWords[i], "ig");
        result = content.replace(reg, "");
    }
    return result;
}

4.JQuery 中 $.fn.extend 函数的实现（实现核心代码即可）

【答案】

先来看一下extend的用法，$.fn.extend 用于合并两个对象或多个对象到第一个对象上，它们的语法如下：

jQuery.extend([deep],target,object1,[...objectN])
jQuery.fn.extend([deep],target,object1,[...objectN])

以下是核心代码（从源码拷过来的）：

//关键：修正参数deep、target、源对象的起始下标 => 逐个遍历源对象    
jQuery.extend = jQuery.fn.extend = function() {
    /** 
     * options: 指向某一个源对象
     * name: 代表某个源对象里的某个属性名
     * src: 代表某个源对象里的某个属性的原始的值
     * copy: 表示某个源对象里的某个属性的值
     * copyIsArray: 表示变量copy是否为数组
     * clone: 表示进行深度复制时原始值的修正值
     * target: 指向目标对象
     * deep: 表示是否执行深度复制，默认为false不进行
     */
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    //如果第一个参数时布尔值，就把第二个参数当做是目标对象
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[ i ] || {};
        i++;
    }
    //如果目标对象不是对象或者一个函数，那就当作 空对象 处理
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }
    //没有传入源对象的情况（1,只有一个参数 2，第一个参数时deep值，第二个参数是参数）
    if ( i === length ) {
        target = this;
        i--;
    }

    for ( ; i < length; i++ ) {
        if ( (options = arguments[ i ]) != null ) {
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                if ( target === copy ) {
                    continue;
                }
                //覆盖掉同名属性
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    target[ name ] = jQuery.extend( deep, clone, copy );

                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }
    return target;
};

5.设计基于观察者模式的事件绑定机制

【答案】（此答案代码来自网络）

首先要明白什么是观察者模式，观察者模式简单的说，就是当一个对象被修改时，则会自动通知它的依赖对象。观察者模式其实就是发布-订阅的过程。

举个例子，我来公司面试的时候，完事之后每个面试官都会对我说：“请留下你的联系方式， 有消息我们会通知你”。 在这里“我”是订阅者， 面试官是发布者。所以我不用每天或者每小时都去询问面试结果， 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

以此为例，来编写代码，面试者把简历扔到一个盒子里， 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.

Events = function() {
    var listen, obj, one, remove, trigger, __this;
    obj = {};
    __this = this;
    listen = function(key, eventfn) { //把简历扔盒子, key就是联系方式.
        var stack, _ref; //stack是盒子
        stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
        return stack.push(eventfn);
    };
    one = function(key, eventfn) {
        remove(key);
        return listen(key, eventfn);
    };
    remove = function(key) {
        var _ref;
        return (_ref = obj[key]) != null ? _ref.length = 0 : void 0;
    };
    trigger = function() { //面试官打电话通知面试者
        var fn, stack, _i, _len, _ref, key;
        key = Array.prototype.shift.call(arguments);
        stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
        for (_i = 0, _len = stack.length; _i < _len; _i++) {
            fn = stack[_i];
            if (fn.apply(__this, arguments) === false) {
                return false;
            }
        }
    };
    return {
        listen: listen,
        one: one,
        remove: remove,
        trigger: trigger
    }
}