前端面试官提问



移动端meta

1
2
3
4
5
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

<meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">

<meta name="viewport" content="width=device-width,initial-scale=0.3333333333333333, minimum-scale=0.3333333333333333,maximum-scale=0.3333333333333333,user-scalable=no">

在移动端开发时,我们会发现手机的dpr可能都不一致,有些是1,chrome预览器就是1,有些手机是2,有些手机是3,这和手机的retina屏有关,所以我们不能单纯将scale值写死,应该根据dpr的值来设置,即用1.0 / dpr的值。

1
2
3
4
5
6
7
8
9
// 设置viewport属性,安卓4.5以下均设置为1.0,其余通过计算取得
var ua = window.navigator.userAgent.toLowerCase();
var dpr = window.devicePixelRatio;
var scaleValue = 1.0 / dpr;
var metaEl = document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
if (ua.substr(ua.indexOf('android') + 8, 3) < 4.5) metaEl.setAttribute('content', 'initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
else metaEl.setAttribute('content', 'initial-scale=' + scaleValue + ', maximum-scale=' + scaleValue + ', minimum-scale=' + scaleValue + ', user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(metaEl);

rem单位使用

  • head区脚本(最重要)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script>
    var html = window.document.documentElement;
    var sw = html.clientWidth;
    var sh = html.clientHeight;
    var rfs = sw * (32 / 640) + 'px';

    html.dataset.sw = sw;
    html.dataset.sh = sh;
    html.style.fontSize = rfs;
    </script>
  • 应用

    • 在css中设置
      font-size: 设计稿标注字号 / 32 + rem;
      font-size: 设计稿标注字号 / (设计稿宽 * 0.05) + rem;

    • 在scss中设置

      1
      2
      3
      4
      @function r($px) {
      @return $px / 32 + rem; // 32是针对640的设计稿
      @return $px / (设计稿宽 * 0.05) + rem; // 其他
      }
      1
      2
      3
      4
      5
      div{
      font-size: r(30);
      width: r(200);
      height: r(60);
      }

移动端单位使用详见

数组去重方法

  • 原数组

    1
    var myArray = [0, 1, 6, 9, 0, 2, 4, 5, 4];
  • 方法1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function aaa(){
    var newArray = []; //一个新的临时数组
    for(var i = 0; i < myArray.length; i++){ //遍历当前数组
    //如果当前数组的第i项已经保存进了临时数组,那么跳过,
    //否则把当前项push到临时数组里面
    if (newArray.indexOf(myArray[i]) == -1){ //在新数组中查找原数组的每一项是否存在
    newArray.push(myArray[i]); //如果不存在就加到新数组中
    }
    }
    // return newArray;
    alert("新的数组:" + newArray);
    }
    aaa();
  • 方法2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function bbb(){
    var n = {},r=[]; //n为hash表,r为临时数组
    for(var i = 0; i < myArray.length; i++){ //遍历当前数组
    if (!n[myArray[i]]){ //如果hash表中没有当前项
    n[myArray[i]] = true; //存入hash表
    r.push(myArray[i]); //把当前数组的当前项push到临时数组里面
    }
    }
    // return r;
    alert("新的数组:" + r);
    }
    bbb();
  • 方法3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function ccc(){
    var n = [myArray[0]]; //结果数组
    for(var i = 1; i < myArray.length; i++){ //从第二项开始遍历
    //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
    //那么表示第i项是重复的,忽略掉。否则存入结果数组
    if (myArray.indexOf(myArray[i]) == i){
    n.push(myArray[i]);
    }
    }
    // return n;
    alert("新的数组:" + n);
    }
    ccc();
  • 方法4(同时排序)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function ddd(){
    myArray.sort(); //数组排序
    var re = [myArray[0]]; //先提取最小的
    for(var i = 1; i < myArray.length; i++){
    if( myArray[i] !== re[re.length-1]){ //将不等于的放在新数组的后面,等于的跳过
    re.push(myArray[i]);
    }
    }
    // return re;
    alert("新的数组:" + re);
    }
    ddd();

数组乱序函数

1
2
3
4
5
6
7
8
9
function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

数组常见操作(push、pop、shift、unshift)

push:向数组的末尾添加一个或多个元素,并返回新的长度
pop:把数组的最后一个元素从其中删除,并返回最后一个元素的值
shift:把数组的第一个元素从其中删除,并返回第一个元素的值
unshift:向数组的开头添加一个或更多元素,并返回新的长度

ajax请求

  • 原生js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    if(window.XMLHttpRequest){
    var ajax = new XMLHttpRequest();
    }else{
    var ajax = new ActiveXObject(“Microsoft.XMLHttp”);
    }
    ajax.open(‘GET’,’***’,true);
    ajax.send();
    ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
    if(ajax.status == 200){
    alert(ajax.responseText);
    } else {
    alert(“失败!”);
    }
    }
    }
  • jquery

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    $.ajax({
    url: 'api.php',
    type: 'GET',
    dataType: 'json',
    timeout: 3000,
    data: {
    num1: num1,
    num2: num2
    },
    beforeSend: function(xhr, settings) {
    // 发送请求前
    console.log('beforeSend', xhr, settings);
    },
    success: function(data, status, xhr) {
    // 请求成功
    console.log('success', data, status, xhr);
    if (data.code === 0) {
    console.log('处理成功');
    $('#result').val(data.result);
    } else {
    console.log('处理失败');
    }
    },
    error: function(xhr, errorType, error) {
    // 请求失败
    console.log('error', xhr, errorType, error);
    alert('请求失败');
    },
    complete: function(xhr, status) {
    // 请求成功或失败都执行
    console.log('complete', xhr, status);
    }
    });

HTML5特性

简单易记的语言标签
简单易记的编码类型
不需要标签闭合
标签名不区分大小写
语义化的新增标签
表单增强
视频和音频
canvas绘画

其他专业技能

事件冒泡、委托等见web前端/常用资料/前端面试
html5 + css3
常见居中方法(定宽高和不定宽高)
cavas、svg
使用什么框架,喜欢它的哪些优点
同步工具:svn / git (svn是集中式管理系统、git是分布式管理系统)
公司使用:linux + node + git + jade + scss + es6 + vue
vue特点:mvvm
jquery:高效、快速处理一些简单的事情、很难处理麻烦的,比如渲染不固定数量的数组列表…

其他(思想、生活)

专业、居住地
是否单身、期望薪资等
对未来的想法、构思
业余活动
对待加班的看法
对待大企业和创业公司的看法
如果公司需要你去使用一些你之前未有过的技能或知识,你该怎么办
释放压力的方法

github面试题

https://github.com/cpm828/Front-end-Developer-Interview-Questions