字节跳动面试（一面）

1、背景

　　2019.9.16参加了个人第一个前端面试，投递的公司是字节跳动（上海），简历投出一周后被通知参加视频面试，如下为部分面试题。

2、简答题

1.flex布局怎样实现页面固定？

容器属性

• • flex-wrap：nowrap | wrap | wrap-reverse
  • flex-direction：row | row-reverse | column | column-reverse
  • flex-flow：flex-wrap和flex-direction的简写属性
  • justify-content：flex-start | flex-end| center | space-between | space-around
  • align-items： flex-start |  flex-end | center | baseline | stretch
  • align-content：flex-start | flex-end | center | space-between | space-around | stretch

元素属性

 

1. • order：数值越小，排列越靠前，默认为0
   • flex-grow：属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。若是全部项目的flex-grow属性都为1，则它们将等分剩余空间（若是有的话）。若是一个项目的flex-grow属性为2，其余项目都为1，则前者占据的剩余空间将比其余项多一倍。
   • flex-shrink：属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。
   • flex-basis：属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。它能够设为跟width或height属性同样的值（好比350px），则项目将占据固定空间。
   • flex：flex-grow、flex-shrink和flex-basis的简写属性，默认值为 0 1 auto。
   • align-self：auto | flex-start | flex-end | center | baseline | stretch

 

Ajax是Asynchronous JavaScript and XML的缩写，意思就是用JavaScript执行异步网络请求。

参考连接：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

1. 1. new一个xhr对象。

      1 var xml=new XMLHttpRequest();

   2. 调用xhr对象的open方法。

      1 xml.open("Get/Post", "url", true/false);//true为异步，false为同步

       

   3. 调用xhr对象的send方法。

      1 xml.send(null);//GET请求
      2 xml.send(string);//POST请求

   4. 对服务器的响应过程进行监听，来知道服务器是否正确得作出了响应，接着就能够作一些事情。好比获取服务器响应的内容，在页面上进行呈现。
   • • responseText:得到字符串形式的相应数据
     • responsXML:得到XML形式的相应数据
     • status和statusText：以数字和文本形式返回http状态码
     • getAllResponseHeader()：获取全部的响应报头
     • getResponseHeader()：查询响应中的某个字段的值
     • readyState属性：响应返回成功的时候获得通知
       • 0：请求未初始化，open尚未调用
       • 1：服务器链接已创建，open已经调用了
       • 2：请求已经接收，也就是接收到头信息了
       • 3：请求处理中，也就是接收到响应主体了
       • 4：请求已完成，且响应已就绪，也就是响应完成了。

 1 var xml=new XMLHttpRequest(); // 新建XMLHttpRequest对象  2  3 xml.onreadystatechange = function () { // 状态发生变化时，函数被回调  4 if (xml.readyState === 4) { // 成功完成  5 // 判断响应结果:  6 if (xml.status === 200) {  7 // 成功，经过responseText拿到响应的文本:  8 return success(xml.responseText);  9 } else { 10 // 失败，根据响应码判断失败缘由: 11 return fail(xml.status); 12  } 13 } else { 14 // HTTP请求还在继续... 15  } 16 } 17 18 // 发送请求: 19 xml.open('GET', '/api/categories'); 20 xml.send(); 21 22 alert('请求已发送，请等待响应...');

　　追问：GET和POST的区别

　　　　参考连接：http://www.javashuo.com/article/p-yvklfivs-mw.html

 

1. 1. GET请求会将参数跟在URL后进行传递，而POST请求则是做为HTTP消息的实体内容发送给WEB服务器。固然在Ajax请求中，这种区别对用户是不可见的。
   2. 首先是"GET方式提交的数据最多只能是1024字节"，由于GET是经过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其余浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操做系统的支持。注意这是限制是整个URL长度，而不只仅是你的参数值数据长度。
   3. GET方式请求的数据会被浏览器缓存起来，所以其余人就能够从浏览器的历史记录中读取到这些数据，例如帐号和密码等。在某种状况下，GET方式会带来严重的安全问题。而POST方式相对来讲就能够避免这些问题。get请求和post请求在服务器端的区别。
   4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.HTTP标准包含这两种方法是为了达到不一样的目的。POST用于建立资源，资源的内容会被编入HTTP请示的内容中。例如，处理定货表单、在数据库中加入新数据行等。当请求无反作用时（如进行搜索），即可使用GET方法；当请求有反作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。然而，在如下状况中，请使用 POST 请求：没法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 。

 

3.JS经常使用事件有哪些？

参考连接：https://www.w3school.com.cn/jsref/jsref_events.asp

属性	当如下状况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素得到焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

 

4.怎样绑定和解绑事件？

　　　　参考连接：http://www.javashuo.com/article/p-riknxqwx-bv.html

 

1. 1. 绑定事件：
      • 在DOM元素中直接绑定

        1 <input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
        2 function myAlert(){ 3  alert("DOM元素中直接绑定"); 4 }

      • 在JavaScript代码中绑定

        1 <input  id="btn"  type="button"  value="点击我，弹出警告框" />
        2 document.getElementById("btn").onclick=function(){ 3     alert("JavaScript代码中绑定");   4 }

      • 绑定事件监听函数：elementObject.addEventListener(eventName,handle,useCapture)

        1 <input  id="btn"  type="button"  value="点击我，弹出警告框" />
        2 document.getElementById("btn").addEventListener("click",fun);
        3 function fun(){
        4     alert("绑定事件监听函数");  
        5 }

   2. 解除绑定：
      • onclick解绑：elementObject.onclick=false/null

        1 document.getElementById("btn").onclick=false/null;
        

      • 解除监听事件：elementObject.removeEventListener(eventName,handle,useCapture)

        1 document.getElementById("btn").removeEventListener("click",fun);

5.z-index的值能够取0或负数吗？

参考连接：https://blog.csdn.net/lhjuejiang/article/details/80945334

能够取0或负值。z-index负值能够隐藏元素，只须要层叠上下文内的某一个父元素加个背景色就能够。它与clip隐藏想必的一个优点是：元素无须绝对定位，设置position:relative就能够隐藏，另外一个优点是它对原来的布局以及元素的行为没有任何影响。而clip隐藏会致使空间focus的焦点发生细微的变化，在特定条件下是有体验问题的。它的不足之处就是不具备广泛适用性，须要其余元素配合进行隐藏。

 

6.px、em和rem的区别，rem怎样使用？

　　　　参考连接：https://blog.csdn.net/qq_36150631/article/details/80500770

1. 共同点：px、em和rem都是计量单位，都能表示尺寸。
2. 区别：
   • px表示“绝对尺寸”（并不是真正的绝对），实际上就是css中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。px的缺点是其不能适应浏览器缩放时产生的变化，所以通常不用于响应式网站。
   • em是一种相对长度单位，相对于自身元素的字号大小，若是没有设置即参照父容器的字号大小或浏览器默认字号大小。举例：

     1  #box{ 2 font-size:14px; 3  width:10em; 4  } 5 <div id="box">div的宽度为140px</div> 

   • rem是css3的新标准也是一种相对长度单位，其相对于HTML根标签的字号大小。举例：

     1  html{ 2 font-size:14px; 3  #box{ 4  width:10rem; 5  } 6 <div id="box">div的宽度为140px</div> 

3. rem的使用：

• • 移动端的UI设计稿的宽度分为不少种,可是要想使用一份代码就适配全部屏幕，就必须使用相对单位，这时候使用rem是最好的选择。使用方法：咱们将UI设计稿人为均分红几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其html根元素的字号大小设置为为均分后的每一等份的大小。如：UI设计稿宽度为640px,咱们将UI设计稿均分为20等份,那么咱们就能够经过媒体查询，给320px的屏幕设置HTML根元素的字号大小为16px（320/20）,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则咱们在后续书写代码的时候，ui设计稿上的一个div的盒子宽度为160px,咱们使用rem单位将其表示为width：5rem,则此盒子不管在320px的屏幕下仍是在640px的屏幕下都将显示为屏幕的四1/4的宽度。
  • 简便方法：咱们在使用rem时，每个元素的大小都将从设计稿的px转换为rem相对单位，很是麻烦。遇到不能整除的数值还会致使最后页面数值的不精确，在这种状况下咱们，可使用淘宝开发的flexible.js插件，配合开发工具vs code的cssrem插件，可避免作媒体查询与数值的转换。（前者避免媒体查询，后者避免作数值转换）。

 

3、笔试题

假定一个数组arr的元素从左到右依次是负数、零和正数。请打印出最后一个负数和第一个正数出现的位置。如arr=[-2,-1,0,0,0,0,1,2] 最后一个负数的位置是2，第一个正数的位置是7。如下是个人代码：

 1 var arr=[-2,-1,0,0,0,0,1,2];
 2 var a,b;
 3 for(var i=0;i<arr.length;i++){
 4   if(arr[i]<0){
 5       a=arr.indexOf(arr[i])+1;
 6   }else if(arr[i]>0){
 7       b=arr.indexOf(arr[i])+1;
 8       break;
 9   }
10 }
11 console.log('最后一位负数位置'+a+'第一位正数位置'+b);

面试官建议用二分法从中间开始查找，以减小for循环的次数

4、总结

多是我运气好，也多是面试官看我是零基础转行，因此出的题比较基本并不难。我回答错误的地方面试官很耐心地纠正，在这表示感谢。