第一套面试题

1) 定义一个函数spacify， 将一个字符串作为参数传入，然后返回一个字符串，不过该字符串相对原有传入参数的变化是字母与字母之间多了一个空格。

传入的参数是一个字符串，返回的参数也是一个字符串。

String.prototype.spacify = function () {
    //return this.split('') //返回的是一个数组 [ '1', '2', '3' ]
    return this.split('').join(' ')  //返回的是一个字符串 1 2 3
};

 

---

 

2) 如何将上面这个函数直接作用在一个字符串对象上。

var str = '123';
console.log(str.spacify());  //1 2 3
console.log(typeof str.spacify());  //string

 

---

 

3) 重新定一个 mylog 函数，函数类似实现一个简单的控制台输出，在控制台输出传入的字符串，传入的字符串参数不固定。

要用到arguments对象。

arguments是一个对应于传递给函数的参数的类数组对象。arguments对象不是一个Array。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。

自定义方法替代控制台输出console.log()。

var mylog = function () {
    console.log.apply(console, arguments);
};
mylog('1','2')   //1 2
mylog(1,2,3)     //1 2 3

 

---

4) 写出以下代码的输入，如有错误，该如何改正。  (构造函数)

var User = {
    count: 1,
    getCount: function() {
        return this.count;
    }
};
console.log(User.getCount());   //1
var func = User.getCount;
console.log(func());            //undefined

 

简单分析：

以上代码创建了一个包含count属性的对象， 这个对象还包含一个方法--getCount()，它返回this.name。

调用object.getCount()，执行getCount函数，函数里面的this指向User，所以，输出 1。

而var func = User.getCount，只是保存了函数体，是字符串。

最后，func()是执行这个函数体，是在全局环境下调用，this指的是Window，而Window下没有count变量，所以输出undefined。

 

---

 

4) 下面来看另一个例子：

var name = "The Window";

var object = {
    name: "My Object",

    getNameFunc: function () {
        return function () {
            return this.name;
        };
    }
};

console.log(object.getNameFunc()());   //"The Window" (在非严格模式下)

 

 

简单分析：

以上代码先创建了一个全局变量name， 又创建了一个包含name属性的对象，这个对象还包含一个方法--getNameFunc()，它返回一个匿名函数，而匿名函数又返回this.name。由于getNameFunc()返回一个函数，因此调用object.getNameFunc()()就会立即调用它返回的函数，结果就是返回一个字符串。然而，这个例子返回的字符串是"The Window"，即全局name变量的值。

 

---

 

5) 实现一个弹窗，内容居中，点击遮罩层，可以关闭；实现弹窗时，使用 position:absolute 和 position: fixed有什么区别。 (CSS布局)

 

最简单的弹窗：

    <style>
        * {margin:0;padding:0;}
        .mask {
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            z-index: 98;
            background-color: #000;
            opacity: 0.75;
            filter: alpha(opacity=75);
        }
        .dialog {
            width: 20%;
            height: 20%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: blue;
            z-index: 99;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

　　　 <div class="mask"><div class="dialog">xxx</div></div>

　　  <script>

　　　　//点击遮罩层，可以关闭弹窗

　　　　document.querySelector('.mask').addEventListener('click', (e) => {

　　　　　　e = e || window.event;

　　　　　　e.target = e.target || e.srcElement;

　　　　　　console.log(e.target);

　　　　　　if (e.target.className == 'mask') {

　　　　　　　　document.querySelector('.mask').style.display = 'none';

　　　　　　}

　　　　}, false);

　　  </script>

 

 

第一种解决方案：

js中用单例模式创建一个弹窗。

    <style>
        * {margin:0;padding:0;}
        .mask {
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            z-index: 98;
            background-color: #000;
            opacity: 0.75;
            filter: alpha(opacity=75);
        }
        .dialog {
            width: 20%;
            height: 20%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: blue;
            z-index: 99;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

    <button id="btn1">点击创建新窗口</button>

    <!-- <div class="mask"><div class="dialog">xxx</div></div> -->

    <script>
        const btn1 = document.querySelector('#btn1');
        const createMask = (() => {
            let oDiv;
            return (text) => {
                if (!oDiv) {
                    console.log('重新创建');
                    oDiv = document.createElement('div');
                    oDiv.innerHTML = text || '<div class="dialog">我是默认的语句</div>';
                    oDiv.className = 'mask';
                    oDiv.style.display = 'none';
                    document.body.appendChild(oDiv);
                }
                return oDiv;
            }

        })();

        //创建
        btn1.addEventListener('click', () => {
            let box = createMask(`<div class="dialog">我是xxx ${Date.now()}</div>`);
            box.style.display = 'block';
        }, false);


        //点击遮罩层，可以关闭弹窗（事件代理，代理到document上）
        document.body.onclick = function (e) {
            e = e || window.event;
            e.target = e.target || e.srcElement;

            console.log(e.target);
            console.log(e.target.className);

            if (e.target.className == 'mask') {
                e.target.style.display = 'none';
            }
        };

    </script>

 

 

第二种解决方案：

遮罩层用单例模式来解决。

 

 

 

总结：

创建遮罩的函数createMask的几种写法。

jQuery版：

function createMask() {
    var mask;
    return function () {
        if (mask) {
            return mask;
        } else {
            mask = $('<div/>').addClass('mask').appendTo($(document.body));
            return mask;
        }
    }
}

 

对这个代码进行优化。如果多个功能都要用到单例模式，该如何解决？

其实，这里又要用到另一种设计模式--桥接模式。

function singleton(fn) {
    var res;
    return function() {
        return res || (res = fn.apply(this, arguments))
    }
}

var createMask = singleton(function () {
    return $('<div/>').addClass('mask').appendTo($(document.body));
});

 

 

 

---

 

6) 假设有一个池塘，里面有无穷多的水，现有2个空水壶，容积分别为5升和6升。问题是如何只用这2个水壶从池塘里取得3升的水。

---

 

7) 两个数组，元素都为整数，求交集数组（值相等的元素组成的新数组） (算法)

这是一个算法题。

 

第一种解决方案： ES6语法求两个数组的交集。

使用filter过滤：

[1,2,3,4,5,6,7].filter(item => [2,3,5,6,8].indexOf(item) > -1)

 

另一种表示方式

var arr3 = arr2.filter(function (v) {
    return arr1.indexOf(v) !== -1  //利用filter方法来遍历是否有相同的元素
})

 

第二种解决方案：使用each

 

转载于:https://www.cnblogs.com/still1/p/10788027.html