前端面试题一

1、下面的输出结果是什么？有何不同？why?

var a=10+20+'30';
console.log(a);//3030
var b='10'+20+30;
console.log(b)//102030

从左向右执行，数字和字符串相加，数字会隐式转换为字符串类型

2、实现以下函数

 add(2, 5); // 7
 add(2)(5); // 7  

具体实现：第一个简单，第二个考察的是闭包

function add(a, b) {
    return a + b;
}
add(2, 5);

function add(a) {
    return function(b) {
        return a + b;
    }
}
add(2)(5);

3、写出下面题目的输出结果

var foo = '';
console.log(foo||(foo = "bar"));//"bar"

考察点：赋值语句的返回值就是赋的值

4、下面两个 alert 的结果分别是什么？

var foo = "Hello";
(function() {
    var bar = " World";
    alert(foo + bar); //hello World
})();
alert(foo + bar);//Uncaught ReferenceError: bar is not defined

考察点：作用域

5、 编码：input ‘abcdefg’，output ‘gfedcba’

法一：

var a = 'abcdefg';
var b = a.split('').reverse().join('');
console.log(b);

法二：

var str = 'abcdefg';
Array.prototype.map.call(str, function(x){
    return x;
}).reverse().join();

考察点：
1）split空字符串分割，stringObject 中的每个字符之间都会被分割；
2）reverse() 方法：颠倒数组中元素的顺序，改变原来的数组，而不会创建新的数组；
3）join():可以使用空字符串连接，默认逗号连接。

6、console.log([‘1’,‘2’,‘3’].map(parseInt)) 输出值？

[1, NaN, NaN]

考察点：map和parseInt方法
1）map 是ECMAScript 5 的一个内置数值方法，把函数作为它的参数，遍历数组中所有的元素，并且为每个元素调用一次这个传入map中的函数，当前元素作为参数传入该函数。函数调用完毕之后将返回结果存入一个新数组中，不会改变原始数组。不会对空数组进行检测。

函数定义：

arr.map(callback[,thisArg]);

callback函数需要以下3个值：
      currentValue：当前处理数值
      index：处理的数值的索引值
      array：map函数处理的函数值,即arr
thisArg可选. ，callback函数里的this值 默认是window对象
2）parseInt函数定义：parseInt(string, radix)
string: 需要转化的字符，如果不是字符串会被转换，忽视空格符。
radix：数字2-36之间的整型。默认使用10，表示十进制。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果radix在2-36之外会返回NaN。
那么根据上面的函数定义，这道题目即可转化为求下面这个数组的值：

[parseInt('1', 0),parseInt('2', 1),parseInt('3', 2)]

结果显而易见：[1, NaN, NaN]

7、find和filter的区别

A、find：返回符合测试条件的第一个数组元素索引值，如果没有符合条件的则返回 undefined。对于空数组，函数是不会执行的。没有改变数组的原始值。

array.find(function(currentValue, index, arr)[,thisValue])

callback函数需要以下3个值：
      currentValue：当前处理数值
      index：处理的数值的索引值
      arr：map函数处理的函数值
thisValue:可选
B、filter:创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。如果没有符合条件的元素则返回空数组。不改变数组的原始值。

array.filter(function(currentValue,index,arr)[, thisValue])

参数同find

8、出现下图这种情况的原因以及解决办法

行内div显示错位

html及css代码：

html及css

原因：

1、同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline；
2、对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就以元素的内部最后一行内联元素为基线,所以你看黄色的div和cxcx那一排字是对齐的。

解决方式：

1.float方式（考虑脱离流后后面元素不易控制，故不首选）
2.增加vertical-align属性，改成下面酱紫就可以了：

div {
    display: inline-block;
    vertical-align：bottom;//居中，顶部，底部都可以
}

9、使用原生js 实现下图中所示的input和p标签点击删除自己

删除自己

考察点：document.getelementsByTagName、document.querySelectorAll、onclick、DOM节点删除、
可以通过getelementsByTagName一个个获取标签节点，但是如果标签很多，还是用querySelectorAll吧。注意子节点的删除方式。

 var tags = document.querySelectorAll('input,p');
 for (var i = 0; i < tags.length; i++) {
       tags[i].onclick = function () {
           this.parentNode.removeChild(this);//首先要找到当前节点的父节点，然后删除父节点的子节点
      }
 }

10、使用原生js给动态生成的button添加click事件

考察点：委托、监听、冒泡
注意：addEventListener的最后一个参数，默认false,在冒泡阶段执行;true,捕获阶段执行。
具体实现：

        var myBody = document.getElementsByTagName("body")[0];
        AddButton();
        function AddButton() {
            var bt = document.createElement("button");           //createElement生成button对象
            bt.innerHTML = '删除';
            myBody.appendChild(bt);                         //添加到页面
        }
        function fnHandler(e) {
            e = e || window.event;
            var t = e.target || e.srcElement;  //t:目标对象
            var tagName = t.tagName;　//tagName标签名称
            if (tagName == 'BUTTON') {
                console.log('333333333333');
            }
        }
        function addEventHandler(oTarget, sEventType, fnHandler) {
            if (oTarget.addEventListener) {   //监听IE9，谷歌和火狐  
                oTarget.addEventListener(sEventType, fnHandler, false);
            } else if (oTarget.attachEvent) {  //IE  
                oTarget.attachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = fnHandler;
            }
        }
        addEventHandler(myBody, 'click', fnHandler);

11、禁止浏览器回退

A、回退后，产生一个前进事件。
window.history.forward(1);
B、禁用键盘的backspace键，繁琐且没有办法消除鼠标的误操作。
C、h5新增，可消除后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。

history.pushState(null, null, document.URL);//创建（添加）一个新的history实体,消除历史记录
window.addEventListener('popstate', function () {//监听
   history.pushState(null, null, document.URL);
});