IT平头哥联盟程序员JQuery&JS&BootStrap

曾经面试踩过的坑，都在这里了～

2018-10-12  本文已影响363人  苏南South
本文由@IT·平头哥联盟-首席填坑官∙苏南 分享

前言

前段时间面试(包括阿里巴巴的电话面试)，遇到过一些面试题，且面试中出现机率较高的提问/笔试，有些答的不是很好挂掉了，今天终于有时间整理出来分享给大家，希望对大家面试有所帮助，都能轻松拿offer。

!> 主要分三部分：html、css、js；react/vue等都归类于js,内容来源于面试过程中遇到的、在复习过程中看到认为值得加深巩固、群友交流分享的；如有理解的错误或不足之处，欢迎留言纠错、斧正，这里是@IT·平头哥联盟，我是首席填坑官∙苏南(South·Su) _～

鲁迅说:世上本无路,只是走的人多了,也就成了路； 分享我们的点滴 尽绵薄之力 助他人成长

HTML

1、什么是盒子模型？

有些面试官会问你对盒子模型的理解，在我们平时看到的网页中，内部的每一个标签元素它都是有几个部分构成的：内容(content)、外边距(margin)、内边距(padding)、边框(border)，四个部分组成，当你说完这些面试官是不会满意这个答案的，因为还有一个重点（IE盒模型和标准盒模型的区别）———IE盒模型的content包括border、padding

IT@IT·平头哥联盟 主要分享前端、测试等领域的积累
2、页面导入样式时有几种方法，它们之间有区别？

小结：link页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载,且link是XHTML标签，无兼容问题; link支持动态js去控制DOM节点去改变样式，而@import不支持，

3、简单讲述一下块元素、内联元素、空元素有哪些，它们之间的区别？

小结：块元素总是独占一行，margin对内联元素上下不起作用;

4、说说 cookies，sessionStorage 、 localStorage 你对它们的理解？

1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;

2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;

3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较 详细可看我之前写的另一篇分享（小程序项目总结 ）。

5、简述一下你对HTML语义化的理解 ？

语义化是指根据内容的类型，选择合适的标签（代码语义化）,即用正确的标签做正确的事情; html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取; 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

CSS

1、position的static、relative、absolute、fixed它们的区别？
2、如何让一个元素垂直/水平（垂直水平）都居中，请列出你能想到的几种方式？
<div class="div-demo"></div>
<style>
    .div-demo{
        width:100px;
        height:100px;
        background-color:#06c;
        margin: auto;
        position:absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
</style>

<style>
    .div-demo{
        width:100px;
        height:100px;
        background-color:#06c;
        margin: auto;
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }
</style>

<body class="container">
    <div class="div-demo"></div>
    <style>

        html,body{
            height:100%;
        }
        .container{
            display: box;
            display: -webkit-box;
            display: flex;
            display: -webkit-flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .div-demo{
            width:100px;
            height:100px;
            background-color:#06c;
        }
    </style>

</body>
3、项目中有用纯CSS样式写过 三角形icon吗？
<body class="container">
    <div class="div-angles"></div>
    <div class="div-angles right"></div>
    <div class="div-angles bottom"></div>
    <div class="div-angles left"></div>
    <style>

        html,body{
            height:100%;
        }
        .container{
            display: box;
            display: -webkit-box;
            display: flex;
            display: -webkit-flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .div-angles{
            width: 0;
            height: 0;
            border-style: solid;
            border-width:30px;
            width:0px;
            height:0px;
            border-color: transparent transparent #06c transparent;
        }
        .right{
            border-color: transparent transparent transparent #06c ;
        }
        .bottom{
            border-color: #06c transparent transparent ;
        }
        .left{
            border-color: transparent #06c transparent transparent;
        }
    </style>

</body>
欢迎您加入我们，一起分享您过往的成长点滴，写下您的心灵历程
4、什么是外边距合并,项目中是否有遇到过?
5、:before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：
6、Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由(licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
7、浏览器的最小字体为12px，如果还想再小，该怎么做？
8、移动端的边框0.5px,你有几种方式实现？

贴上3、5两方案代码，也是目前公司一直在用的(预处理SCSS)：

//3、css3的background-image 本文由@IT·平头哥联盟-首席填坑官∙苏南分享
@mixin border($top:1, $right:1, $bottom:1, $left:1, $color:#ebebf0) {
  background-image:linear-gradient(180deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(90deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(0deg, $color, $color 50%, transparent 50%),
                  linear-gradient(90deg, $color, $color 50%, transparent 50%);
  background-size: 100% $top + px, $right + px 100%, 100% $bottom + px, $left + px 100%;
  background-repeat: no-repeat;
  background-position: top, right top, bottom, left top ;
}

@mixin borderTop($top:1, $color:#ebebf0) {
  @include border($top, 0, 0, 0, $color);
}
@mixin borderRight($right:1, $color:#ebebf0) {
  @include border(0, $right, 0, 0, $color);
}
@mixin borderBottom($bottom:1, $color:#ebebf0) {
  @include border(0, 0, $bottom, 0, $color);
}
@mixin borderLeft($left:1, $color:#ebebf0) {
  @include border(0, 0, 0, $left, $color);
}
@mixin borderColor($color:#ebebf0) {
  @include border(1, 1, 1, 1, $color);
}

//5、css3的transform:scale  本文由@IT·平头哥联盟-首席填坑官∙苏南分享
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
  position:relative;
    &:after{
       left:0px;
       top:0px;
       right:-100%;
       bottom:-100%;
       border-radius:$radius;
       border-style: $style;
       border-color: $color;
       border-width: $width+ px;
       position:absolute;
       display:block;
       transform:scale(0.5);
       -webkit-transform:scale(0.5);
       transform-origin:0 0;
       -webkit-transform-origin:0 0;
       content:'';
    }
}
8、display:none与visibility:hidden两者的区别？
9、CSS样式优先级排序如何计算的？
10、li与li之间有看不见的空白间隔是什么原因引起的？你是怎么解决的？

Javascript

1、请将下列b函数进行修改，保证每次调用a都能+1（考闭包）:
//本文由IT@IT·平头哥联盟-首席填坑官∙苏南分享,如有错误，欢迎留言
function b(){
    var a=1;
};

function b(){
    var a=1;
    return ()=>{
        a++;
        return a;
    }
};
let c = b();
c(); //2
c(); //3
c(); //4

####### 2、js有哪些基本数据类型：
ECMAScript 标准定义有7种数据类型：

3、用js将 386485473.88 转换为 386,485,473.88（千位分割符）：
//方法1:
var separator=(num)=>{
    if(!num){
        return '0.00';
    };
    let str = parseFloat(num).toFixed(2);
    return str && str
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
            return $1 + ",";
        });
}

separator(386485473.88) //"386,485,473.88"

//方法2：
(386485473.88).toLocaleString('en-US')  // "386,485,473.88" 由 (sRect)补充
4、js的 for 跟for in 循环它们之间的区别？
var southSu = ['苏南','深圳','18','男'];
for(var i=0;i<southSu.length;i++){
    console.log(typeof i); //number
    console.log(southSu[i]);// 苏南 , 深圳 , 18 , 男
}
var arr = ['苏南','深圳','18','男','帅气',"@IT·平头哥联盟-首席填坑官"];
for(var k in arr){
    console.log(typeof k);//string
    console.log(arr[k]);// 苏南 , 深圳 , 18 , 男 , 帅气,@IT·平头哥联盟-首席填坑官
}


Object.prototype.test = '原型链上的属性,本文由@IT·平头哥联盟-首席填坑官∙苏南分享';
var southSu = {name:'苏南',address:'深圳',age:18,sex:'男',height:176};
for(var i=0;i<southSu.length;i++){
    console.log(typeof i); //空
    console.log(southSu[i]);//空
}


for(var k in southSu){
    console.log(typeof k);//string
    console.log(southSu[k]);// 苏南 , 深圳 , 18 , 男 , 176 ,本文由@IT·平头哥联盟-首席填坑官∙苏南分享
}
5、给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：
<body class="container">
    <table id="table">
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        …………
    </table>
<script>
    let table =document.querySelector("#table");
    table.addEventListener("click",(e)=>{
        let {nodeName} = e.target;
        if(nodeName.toUpperCase() === "TD"){
            console.log(e.target);//<td>N</td>
        }
    },false);

</script>
</body>
6、js把一串字符串去重(能统计出字符重复次数更佳)，列出你的思路（两种以上）：
<script>
    let str = "12qwe345671dsfa233dsf9876ds243dsaljhkjfzxcxzvdsf本文由@IT·平头哥联盟-首席填坑官∙苏南分享";
    let array = str.split("");

    //方案一：
    array = [...new Set(array)].join("");
    array = ((a)=>[...new Set(a)])(array).join("");
    console.log(array);//12qwe34567dsfa98ljhkzxcv本文由@IT·平头哥联盟-首席填坑官∙苏南分享  只能过滤，不会统计

    //方案二：
    function unique (arr) {
        const seen = new Map()
        return (arr.filter((a) => !seen.has(a) && seen.set(a, 1))).join("");
    }
    console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv本文由@IT·平头哥联盟-首席填坑官∙苏南分享

    //方案三：
    function unique (arr) {
        let arrs=[];
        var news_arr = arr.sort();//排序能减少一次循环
        for(var i=0;i<news_arr.length;i++){
                if(news_arr[i] == news_arr[i+1] && news_arr[i]!= news_arr[i-1] ){
                        arrs.push(arr[i]);
                };
 
        };
        return arrs.join("");
    }
    console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv本文由@IT·平头哥联盟-首席填坑官∙苏南分享

    //方案四：
    function unique (arr) {
        let obj={};
        for(var i=0;i<arr.length;i++){
            let key = arr[i];
            if(!obj[key] ){
                    obj[key]=1;
            }else{
                obj[key]+=1;
            }
 
        };
        return obj;
    }
    console.log(unique(array)) // object 对应每个key以及它重复的次数 

</script>
7、项目上线前，你们做过哪些性能优化：
8、你对重绘、重排的理解？
8、有用过promise吗？请写出下列代码的执行结果，并写出你的理解思路：
setTimeout(()=>{
        console.log(1);
}, 0);

new Promise((resolve)=>{
        console.log(2);
        for(var i = 1; i < 200; i++){
                i = 198 && resolve();
        }
        console.log(3);
}).then(()=>{
        console.log(4);
});
console.log(5);

// 结果：2、3、5、4、1;

说细步骤如下：
setTimeout 是异步，不会立即执行，加入执行队列;
new Promise 会立即执行 输出 2、3，而在2、3之间执行了resolve 也就是微任务;
再到console.log(5)了，输出5;
然后异步里的微任务先出，那就得到4;
最后执行宏任务 setTimeout 输出 1;
如有错误欢迎纠正！

9、new SouthSu() 在这个过程中都做了些什么？
function SouthSu(){
        this.name = "苏南";
        this.age = 18;
        this.address = "深圳";
        this.address = "首席填坑官";
};

 let South = new SouthSu();
 console.log(South,South.__proto__ === SouthSu.prototype) //true 

执行过程：
创建一个空的对象
 let p1 = new Object();


设置原型链
    p1.__proto__ = SouthSu.prototype;

让 构造函数 的this 指向 p1 这个空对象

    let funCall = SouthSu.call(p1);

处理 构造函数 的返回值：判断SouthSu的返回值类型，如果是值类型则返回obj，如果是引用类型，就返回这个引用类型的对象;
10、工作中如果让你使用js实现一个持续的动画，你会怎么做(比如转盘抽奖)？？

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用,回调的次数通常是每秒60次，是大多数浏览器通常匹配 W3C 所建议的刷新频率。在大多数浏览器里，当运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会暂停调用以提升性能和电池寿命。

小结：以往项目开发中大数人可能都是第一时间选择JS定时器setInterval 或者setTimeout 来控制的动画每隔一段时间刷新元素的状态，来达到自己所想要的动画效果，但是这种方式并不能准确地控制动画帧率，因为这是开发者主动要求浏览器去绘制，它这可能会因为动画控制的时间、绘制的频率、浏览器的特性等而导致丢帧的问题; requestAnimationFrame 是浏览器什么时候要开始绘制了浏览器它自己知道，通过requestAnimationFrame告诉我们，这样就不会出现重复绘制丢失的问题。

//一个持续旋转的正方形，
<div class="angle-div"></div>
<script>
    let timer = null;
    let Deg = 0;
    let distance = 360;
    var _requestAnimationFrame_ = window.requestAnimationFrame || window.webkitRequestAnimationFrame;//本文由@IT·平头哥联盟-首席填坑官∙苏南分享
    let angleDiv = document.querySelector(".angle-div");
    cancelAnimationFrame(timer);
    let fn = ()=>{
        if(Deg < distance){ 
            Deg++;
        }else{
            Deg=0;
        };
        angleDiv.style.transform = `rotateZ(${Deg}deg) translateZ(0)`; 
        angleDiv.style.WebkitTransform = `rotateZ(${Deg}deg) translateZ(0)`;
        timer = _requestAnimationFrame_(fn);
    }
    timer = _requestAnimationFrame_(fn);
</script>
`蜜獾`(huan),绰号 `平头哥` 被称为最无所畏惧的动物
11、如何设置http缓存？

1)、Expires

2)、Cache-Control

总结:——几者之间的关系

  • 当Cache-Control设置为max-age=xx并且同事设置Expires时，Cache-Control的优先级更高
  • 当ETag和Last-Modified同时存在时，服务器先会检查ETag，然后再检查Last-Modified，最终决定返回304还是200
  • 该题由 本文由@IT·平头哥联盟-成员(ZodiacSyndicate )补充
12、随机打乱一个数组
//该题由 本文由@IT·平头哥联盟-成员(ZodiacSyndicate )补充
const shuffle = arr => {
  let end = arr.length - 1
  while(end) { // 当end为0时不需要交换
    const index = Math.floor(Math.random() * (end + 1))
    [arr[index], arr[end]] = [arr[end], arr[index]]
    end -= 1
  }
  return arr
}
13、用React实现一个显示鼠标位置的高阶组件
//该题由 本文由@IT·平头哥联盟-成员(ZodiacSyndicate )补充
const mousePosition = Component => class extends React.Component {
  state = {
    x: 0,
    y: 0,
  }

  handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  render() {
    const { x, y } = this.state
    return (
      <>
        <div onMouseMove={this.handleMouseMove}>
          <Component {...this.props} />
        </div>
        <span>x: {x}</span>
        <span>y: {y}</span>
      </>
    )
  }
}

文本将持续更新，整理收集自己/群友的面经分享给大家，觉得不错记得 Star、Star、Watch 哦，感谢！

作者：苏南 - 首席填坑官
来源：@IT·平头哥联盟
链接：https://honeybadger8.github.io/blog/
交流群：912594095[资源获取/交流群]、386485473(前端) 、260282062(测试)
本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。

上一篇下一篇

猜你喜欢

热点阅读