『面试题』WEB前端常见面试题汇总：（一）程序题

文章目录

• 1.JS找字符串中出现最多的字符
• 2.JS实现九九乘法表
• 3.前端面试：这几道前端面试题很绕吗？做对了几道？
• 4.通过示例搞懂JS闭包
• 5.JS重复输出一个给定的字符串
• 6.函数声明相关
• 7.作用域范围（Scope）
• 8.创建 “原生（native）” 方法
• 9.变量提升（Hoisting）
• 10. 在javascript中，this是如何工作的
• 11.call() 和 apply()
• 12.闭包（Closures）
• 13.数据类型问题
• 14.事件循环
• 15.算法问题
• 16.记腾讯一次糟糕的笔试面试经历（转）
• 17.语义化标签
• 18.事件绑定相关
• 19.CSS选择器问题
• 20.一段关于JS中this应用奇葩代码引发的思考
• 21.列举你工作中遇到的IE6 BUG，谈谈解决方案
• 22.如何用CSS分别单独定义IE6、7、8的width属性
• 23.CSS中哪些属性不可以从父元素继承
• 24.你如何理解HTML结构的语意化
• 25.做好SEO需要考虑什么
• 26.我们知道可以以外链的方式引入CSS文件，请谈谈外链引入CSS有哪些方式，这些方式的性能有区别吗
• 27.CSS Sprite是什么，谈谈这个技术的优缺点
• 28.以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）
• 29.如何触发这Doctype的标准模式和混杂模式？区分它们有何意义?
• 30.行内元素有哪些？块级元素有哪些？CSS的盒模型？
• 31.前端页面有哪三层构成，分别是什么？作用是什么？
• 32.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
• 33.怎样添加、移除、移动、复制、创建和查找节点
• 34.面向对象编程:b怎么继承a
• 35.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
• 36.在工作中，对浏览器的兼容性怎么看待的
• 37.new 操作符具体干了什么？
• 38.[] 和 Array 调用 slice 方法引起的问题
• 39.使用localStorage存储数据，存储位置在哪里？
• 40.([] + {}).length ?
• 41.渲染优化
• 42.事件的各个阶段
• 43.快速的让一个数组乱序
• 44.最快捷的数组求最大值
• 45.更短的数组去重写法
• 46.变量提升与函数声明提升

1.JS找字符串中出现最多的字符


例如：求字符串'nininihaoa'中出现次数最多字符
方法一：
var str = "nininihaoa";
    var o = {};
    for (var i = 0, length = str.length; i < length; i++) {
        var char = str.charAt(i);
        if (o[char]) {
            o[char]++;  //次数加1
        } else {
            o[char] = 1;    //若第一次出现，次数记为1
        }
    }
              console.log(o);   //输出的是完整的对象，记录着每一个字符及其出现的次数
    //遍历对象，找到出现次数最多的字符的次数
    var max = 0;
    for (var key in o) {
        if (max < o[key]) {
            max = o[key];   //max始终储存次数最大的那个
        }
    }


    for (var key in o) {
        if (o[key] == max) {
            //console.log(key);
            console.log("最多的字符是" + key);
            console.log("出现的次数是" + max);
        }
    }





结果如图所示：



方法二，当然还可以使用reduce方法来实现：

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

2.JS实现九九乘法表


var sum=0;
var wite;
for (var i = 1; i < 10; i++){
        var div=$('<div class="class'+i+'"></div>');
        $("body").append(div);
        for(var j = i; j > 0; j--){
                sum = j * i;
                wite = (j+"X"+i+"="+sum);
                div.prepend($('<span style="padding-right:10px">'+wite+'</span>'));
        }
        
}

css代码：


html,body,ul,li {
    padding: 0;
    margin: 0;
    border: 0;
}
ul {
    width: 900px;
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px;
    line-height: 36px;
}
li {
    float: left;
    width: 90px;
    margin: 0 4px;
    display: inline-block;
    text-align: center;
    border: 1px solid #333;
    background:yellowgreen;
}

原生js实现方式：

for(var i = 1; i <= 9; i++){
    var myUl = document.createElement('ul');
    for(var j = 1; j <= i; j++){
        var myLi = document.createElement('li');
        var myText = document.createTextNode(j + " × " + i + " = " + i*j);
        myLi.appendChild(myText);
        myUl.appendChild(myLi);
    }
    document.getElementsByTagName('body')[0].appendChild(myUl);
}

3.前端面试：这几道前端面试题很绕吗？做对了几道？



var fun = function(){
    this.name = 'peter';
    return {
    name: 'jack'
    };
}


var p = new fun();
//请问p.name是：


每个函数都有返回值，如果使用了return语句，则返回return后跟的值，如果没有使用return，则默认返回undefined.
特别的，如果这个函数是构造函数，则默认返回this对象，如果构造函数内使用了return语句，并且return后跟的是一个对象，则这个构造函数返回的是这个对象，否则返回this.
所以1题中的p = {name: 'jack'}




第二题



var fun = function(){
    this.name = 'peter';


    return 'jack';    
 }


var p = new fun();
//请问p.name是：
答案：
2题中的p = {name: 'peter'}.




第三题


var fun = function(){}
fun.prototype = {    info : {    name : 'peter',    age : 25    }}
var a = new fun();var b = new fun();
a.info.name = 'jack';b.info.name = 'tom';
//请问a.info.name和b.info.name分别是：答案：
3.两个都输出tom。首先你要知道原型模式的执行流程：
1.先查找构造函数实例里的属性或方法，如果有，就立即返回。
2.如果构造函数的实例没有，就去它的原型对象里找，如果有，就立即返回




第四题


var fun = function(){
    this.info = {
    name : 'peter',
    age : 25
    }
}
var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';
//请问a.info.name和b.info.name分别是：

答案：

4 .a.info.name 为jack，b.info.name为tom。原因我想你从第三题已经得出来了。




第五题


var fun = function(){}

fun.prototype = {    
    name : 'peter',    
    age : 25    
}

var a = new fun();
var b = new fun();

a.name = 'jack';
b.name = 'tom';
//请问a.name和b.name分别是：

https://www.cnblogs.com/moqiutao/p/9872066.html