问面试官的问题

  • 公司做的项目中，前端主要使用的是什么框架？
  • 实习期后能不能转正？
  • 平时上下班的时间是什么时候？

模拟面试题

1. 什么是盒子模型？

css 中，盒模型分为 content、padding、border、margin四部分，又有两种盒模型，通过 box-sizing 切换：

标准盒模型

当设置为 content-box 时，属于标准盒模型，在设置宽度和高度时，只包含 content，不包含 padding 和 border；

IE盒模型(怪异模型)

而设为 border-box 时，属于 IE 盒模型，设置宽度和高度时，包含 content、padding 和 border。

2. 深克隆与浅克隆？

浅拷贝 ： 只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据。例如:Object.assign(),…扩展运算符
深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据

  1. 写一个deepClone函数，递归遍历数组或者对象中嵌套的每一个子数组和子对象 ```javascript

function deepClone(obj) { if(typeof obj == “object”) { var result = obj.constructor == Array ? []: {}; for(let i in obj) { result[i] = typeof obj[i] == “object” ? deepClone(obj[i]) : obj[i]; } } else { var result = obj; } return result; }

  2. 2. JSON.parse(JSON.stringify(object))
  4. <a name="b113327e"></a>
  5. ### 深拷贝中需要注意的问题
  1. 会忽略 undefined
  2. 会忽略 symbol
  3. 不能序列化函数
  4. 不能解决循环引用的对象
  5. 不能正确处理new Date()
  6. 不能处理正则 ```

3. 什么情况下会发生布尔值的隐式强制类型转换？

（1） if (..) 语句中的条件判断表达式。
（2） for ( .. ; .. ; .. ) 语句中的条件判断表达式（第二个）。
（3） while (..) 和 do..while(..) 循环中的条件判断表达式。
（4） ? : 中的条件判断表达式。
（5） 逻辑运算符 ||（逻辑或）和 &&（逻辑与）左边的操作数（作为条件判断表达式）。

其它

手写深克隆

手写Promise

轮播图

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.                 text-decoration: none;
  11.             }
  13.             body {
  14.                 padding: 20px;
  15.             }
  17.             #container {
  18.                 position: relative;
  19.                 width: 600px;
  20.                 height: 400px;
  21.                 border: 3px solid #333;
  22.                 overflow: hidden;
  23.             }
  25.             #list {
  26.                 position: absolute;
  27.                 z-index: 1;
  28.                 width: 4200px;
  29.                 height: 400px;
  30.             }
  32.             #list img {
  33.                 float: left;
  34.                 width: 600px;
  35.                 height: 400px;
  36.             }
  38.             #buttons {
  39.                 position: absolute;
  40.                 left: 250px;
  41.                 bottom: 20px;
  42.                 z-index: 2;
  43.                 height: 10px;
  44.                 width: 100px;
  45.             }
  47.             #buttons span {
  48.                 float: left;
  49.                 margin-right: 5px;
  50.                 width: 10px;
  51.                 height: 10px;
  52.                 border: 1px solid #fff;
  53.                 border-radius: 50%;
  54.                 background: #333;
  55.                 cursor: pointer;
  56.             }
  58.             #buttons .on {
  59.                 background: orangered;
  60.             }
  62.             .arrow {
  63.                 position: absolute;
  64.                 top: 180px;
  65.                 z-index: 2;
  66.                 display: none;
  67.                 width: 40px;
  68.                 height: 40px;
  69.                 font-size: 36px;
  70.                 font-weight: bold;
  71.                 line-height: 35px;
  72.                 text-align: center;
  73.                 color: #fff;
  74.                 background-color: RGBA(0, 0, 0, .3);
  75.                 cursor: pointer;
  76.             }
  78.             .arrow:hover {
  79.                 background-color: RGBA(0, 0, 0, .7);
  80.             }
  82.             #container:hover .arrow {
  83.                 display: block;
  84.             }
  86.             #prev {
  87.                 left: 20px;
  88.             }
  90.             #next {
  91.                 right: 20px;
  92.             }
  93.         </style>
  94.     </head>
  95.     <body>
  96.         <div id="container">
  97.             <div id="list" style="left: -600px;">
  98.                 <img src="img/5.png" alt="1" />
  99.                 <img src="img/1.png" alt="1" />
  100.                 <img src="img/2.png" alt="2" />
  101.                 <img src="img/3.png" alt="3" />
  102.                 <img src="img/4.png" alt="4" />
  103.                 <img src="img/5.png" alt="5" />
  104.                 <img src="img/1.png" alt="5" />
  105.             </div>
  106.             <div id="buttons">
  107.                 <span index="1" class="on"></span>
  108.                 <span index="2"></span>
  109.                 <span index="3"></span>
  110.                 <span index="4"></span>
  111.                 <span index="5"></span>
  112.             </div>
  113.             <a href="javascript:;" id="prev" class="arrow"><</a>
  114.             <a href="javascript:;" id="next" class="arrow">></a>
  115.         </div>
  116.         <script>
  117.             window.onload = function() {
  118.                 var list = document.getElementById('list');
  119.                 var prev = document.getElementById('prev');
  120.                 var next = document.getElementById('next');
  122.                 function animate(offset) {
  123.                     /*获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
  124.                     且style.left获取的是字符串，需要用parseInt()取整转化为数字。*/
  125.                     var newLeft = parseInt(list.style.left) + offset;
  126.                     list.style.left = newLeft + 'px';
  127.                     if(newLeft < -3000) {
  128.                         list.style.left = -600 + 'px';
  129.                     }
  130.                     if(newLeft > -600) {
  131.                         list.style.left = -3000 + 'px';
  132.                     }
  133.                 }
  134.                 /*需要定位到按钮的样式*/
  135.                 var buttons = document.getElementById('buttons').getElementsByTagName('span');
  136.                 var index = 1;
  138.                 function buttonShow() {
  139.                     /*console.log(buttons.length);*/
  140.                     /*清除之前的样式*/
  141.                     for(var i = 0; i < buttons.length; i++) {
  142.                         if(buttons[i].className === 'on') {
  143.                             buttons[i].className = '';
  144.                         }
  145.                     }
  146.                     /*数组从0开始，temp从-1开始*/
  147.                     buttons[index - 1].className = 'on';
  148.                 }
  149.                 /*上一步*/
  150.                 prev.onclick = function() {
  151.                         index = index - 1;
  152.                         if(index < 1) {
  153.                             index = 5;
  154.                         }
  155.                         buttonShow();
  156.                         animate(600);
  157.                     }
  158.                     /*下一步*/
  159.                 next.onclick = function() {
  160.                         index = index + 1;
  161.                         if(index > 5) {
  162.                             index = 1;
  163.                         }
  164.                         buttonShow();
  165.                         animate(-600);
  166.                     }
  167.                     /*自动循环播放*/
  168.                 var timer;
  170.                 function play() {
  171.                     timer = setInterval(function() {
  172.                         next.onclick();
  173.                     }, 1500)
  174.                 }
  175.                 play();
  176.                 /*鼠标放上（离开）对应轮播暂停（播放）*/
  177.                 var container = document.getElementById('container');
  179.                 function stop() {
  180.                     clearInterval(timer);
  181.                 }
  182.                 container.onmouseover = stop;
  183.                 container.onmouseout = play;
  185.                 /*小圆点的点击事件*/
  186.                 for(var i = 0; i < buttons.length; i++) {
  187.                     /*使用立即函数*/
  188.                     (function(i) {
  189.                         buttons[i].onclick = function() {
  190.                             console.log(i);
  191.                             /*偏移量的获取：获取鼠标的小圆点的位置，用this把index绑定到对象buttons[i]上*/
  192.                             /*由于index是自定义属性，需要用到getAttribute()这个dom的2级方法，去获取自定义的index属性*/
  193.                             var clickIndex = parseInt(this.getAttribute('index'));
  194.                             var offset = 600 * (index - clickIndex);
  195.                             animate(offset);
  196.                             index = clickIndex;
  197.                             buttonShow();
  198.                         }
  199.                     })(i)
  200.                 }
  201.             }
  202.         </script>
  203.     </body>
  204. </html>

AJAX

  1. <button id="btn">发送get请求</button>
  3. <body>
  4.   <script>
  5.     btn.onclick = function () {
  6.       // 1、创建 AJAX 对象；
  7.       var ajax = new XMLHttpRequest();
  8.       // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
  9.       ajax.open('get', 'http://kumanxuan1.f3322.net:8001/index/index');
  10.       // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
  11.       ajax.onreadystatechange = function () {
  12.         // console.log(ajax.readyState);
  13.         if (ajax.readyState == 4 && ajax.status == 200) {
  14.           // 此时获取服务器发过来的数据
  15.           console.log(ajax.responseText)  // 得到的是字符串对象，需要用JSON.parse(txt)转对象
  16.         }
  17.       }
  18.       // 4、发送请求。
  19.       ajax.send();
  20.     }
  21.   </script>
  22. </body>