阅读 8596

记录一次蚂蚁金服前端电话面试

坐标杭州,18年毕业,算上实习一年半开发经验。是外派的面试,后面两面都是阿里的面试官。

本来是给我发的在线测评,但是那边服务器出现问题,我一直打不开网页,最后只好以电话问答的形式。下面我写的大部分都是测评里的题目,部分是电话里新增的题目。。。

  1. 尽量使用尽可能多的方式实现子元素的垂直水平居中

    <div class="father">
        <div class="child">  
        </div>
    </div>
    
    <style>
        .father {
            width: 300px;
            height: 300px;
        }
        .child {
              
        }
    </style>
    复制代码

child分很多种情况,大致说一下

  • 行内元素:text-align + line-height
.father{
  text-align: center;
  line-height: 300px;
}
复制代码
  • 定宽定高:absolute + margin
.father{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
}
/* 或者 */
.child{
  position: absolute;
  left: 0;
  top: 0; 
  right: 0; 
  bottom: 0;
  margin: auto;
}
复制代码
  • 不定高:absolute + translate
.father{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
复制代码
  • 不定高:flex
.father{
  display: flex; 
}
.child{
  margin:auto;
}
/* 或者 */
.child{
  justify-content: center;
  align-items: center;
}
复制代码
  • table方式:
.father{
  display: table; 
}
.child{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
复制代码
  1. 尽可能多的方式实现如下三栏布局,要求 .main 在中间显示

<div class="container">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>
复制代码
  • 浮动
  • flex布局:利用order属性(排序,这个没答上来)
  • gird布局:grid-template-areas
  1. 执行下面的代码,输出结果是什么?

console.log(+false) // 0, 这里是一元运算符进行的弱类型转换,相对应的 +true 则返回 1
console.log('1' + 2 + '3' + 4) // '1234' 遇到字符串就会拼接
console.log(4 + 3 + 2 + '1')  // '91' 先加在一起再拼接
复制代码
  1. 运行下面的代码,输出什么?

var x = 3;
var foo = {
  x: 2,
  baz: {
    x: 1,
    bar: function() {
      return this.x;
    }
  }
}
var go = foo.baz.bar;

console.log(go());  // 3
console.log(foo.baz.bar()); // 1
复制代码

这题考的是this的指向:

this由调用者提供,由调用函数的方式来决定。如果是一个对象调用的函数,则this指向该对象,比如foo.baz.bar()。如果函数独立调用比如go(),那么该函数内部的this,则指向undefined。但是在非严格模式中,它会被自动指向全局对象window。

  1. 实现以下函数,使得输入的字符串逆序输出

function reverse(str) {
  let res = str.split('');
  return res.reverse().join('');
}

reverse('hello world!'); // output: '!dlrow olleh'
复制代码

进阶问题

'hello world!'.reverse();  // output: '!dlrow olleh'
复制代码
  • 这个问题需要给String的原型上添加方法,但是要考虑有一些改造:
String.prototype.reverse = function reverse() {
  let res = this.split('');
  return res.reverse().join('');
}
复制代码
  1. 实现sleep 函数

要求用法:

/**
- 使当前运行的异步操作(promise 或者 async)停止等待若干秒
- 
- @param ms */
(async () => {
  console.log('hello')
  await sleep(2000) // 等待两秒
  console.log('world')
})()
复制代码
const sleep = (ms) => {
  new Promise(resolve, reject) {
    setTimeOut(() => {
      resolve(); // 大致这样?
    }, ms)
  }
}
复制代码
  1. 实现throttle 节流函数

    用法:

    const throFun = () => console.log('hello');
    const thro = throttle(throFun, 300);
    document.body.onscroll = () => {
      thro();  // 调用至少间隔 300 毫秒才会触发一次
    }
    复制代码
    /**
    - 频率控制,返回函数连续调用时,action 执行频率限定为 1次 / delay
    - @param delay  {number}    延迟时间,单位毫秒
    - @param action {function}  请求关联函数,实际应用需要调用的函数
    - @return {function}    返回客户调用函数 */
    function throttle(action, delay) {
      var previous = 0;
      // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
      return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            action.apply(_this, args);
            previous = now;
        }
      }
    }
    复制代码
  2. 实现debounce 防抖函数

    用法:

    const throFun = () => console.log('hello');
    const thro = debounce(throFun, 300);
    document.body.onscroll = () => {
      thro();  // 若一直调用则不会执行,空闲时间大于 300 毫秒才会执行
    }
    复制代码
    /**
    - 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 delay,action 才会执行
    - @param delay   {number}    空闲时间,单位毫秒
    - @param action {function}  请求关联函数,实际应用需要调用的函数
    - @return {function}    返回客户调用函数 */
    function debounce(action, delay) {
      var timer; // 维护一个 timer
      return function () {
          var _this = this; // 取debounce执行作用域的this
          var args = arguments;
          if (timer) {
              clearTimeout(timer);
          }
          timer = setTimeout(function () {
              action.apply(_this, args); // 用apply指向调用debounce的对象,相当于_this.action(args);
          }, delay);
      };
    }
    复制代码
  3. 数组去重有哪些方法?

const arr = [1,2,3,4,4,3,2,1];
// 方法一:new Set ES6
return [...new Set(arr)]; // 这里又问到我...的用法

// 方法二:双层for循环 (然后说这样性能不好,让我只用一层for循环的方法)
function unique(arr){
  var res=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        ++ i;
        j = i;
      }
    }
    res.push(arr[i]);
  }
  return res;
}

// 方法三:单层for循环 + indexOf
function unique(array){
    var res = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的
        if (array.indexOf(array[i]) === i) {
            res.push(array[i])
        }
    }
    return res;
}
// 方法三点三:或者这样
function unique(array){
    let res = [];
    for(var i = 0; i < array.length; i++) {
        if (res.indexOf(array[i]) === -1) {
            res.push(array[i]);
        }
    }
    return res;
}

// 方法四:面试官说如果可以容忍改变原有数组的情况下,怎么改进性能更好
function unique(array){
    // 注意这里一定要倒叙for循环,否则会出现问题
    for(var i = array.length - 1; i > 0; i--) { 
        if (array.indexOf(array[i]) !== i) {
            array.splice(i, 1);
        }
    }
    // 因为少声明一个变量,节省了内存空间(虽然可以忽略不计,但是面试嘛~)
    return array;
}
复制代码
  1. 场景题,考察事件代理,事件监听,DOM自定义属性等

题目描述:

  • 网页中有一个元素A,它有个data-href属性,里面存放一个链接地址🔗
  • 实现一个函数,当任意点击时,如果点击的元素就是A或其上层节点中找到A,则进行链接跳转

实现思路:

  • 首先给window添加点击事件的监听,然后先声明一个中间变量targetNode记录节点
  • 然后循环判断当前节点targetNode是否存在data-href属性
  • 如果存在则进行跳转,break。不存在则将该节点的父节点赋值给targetNode
  • 一直循环到判断targetNode是最外层节点为止

面试过后整理的代码:

window.addEventListener('click', (e) => {
    let targetNode = e.target
    while (targetNode !== document) { // 只要当前节点不是最外层document
        console.log(targetNode)
        if (targetNode.getAttribute('data-href')) { //  其实用hasAttribute更合适
            window.open(targetNode.dataset.href)
            break
        } else { // 没找到就继续往上找
            targetNode = targetNode.parentNode
        }
    }
})
复制代码

总结:

  • 感觉这道题出的很好,回答过程中面试官也一直引导我的思路,比如最开始我想到判断节点是否为上下级关系的方法用DOM的contains()方法,然后面试官考虑性能,最好用原生api。然后我就说用parentNode。后来我查了一下MDN,发现contains这个方法就是原生的api,IE5以上就支持了:
    contains兼容性
    但是这也不是重点,重点是用contains这个方法不能实现这个场景,因为你需要父节点(上层节点)是已知的。但这个场景是通过已知子节点(点击事件返回的target)来向上寻找节点。
  • 我说到用dataset获取自定义属性的时候,面试官说考虑到兼容性,有没有别的方法。我回答getAttribute()
  • 在说怎么一层一层的往上找节点的时候,最开始我想到了用递归调用函数,面试官当即打断我说没有必要,而且浪费性能。然后提示我说有什么循环的方法。最后想到了while
  1. 其他问题

  • ES6数组有哪些方法
  • React使用中用过哪些状态管理工具,紧接着问了redux和mobx的区别,面试遇到三四次了,故总结一下:

1.Redux 鼓励一个应用只用一个 Store,Mobx 鼓励使用多个 Store; 2.Redux 是函数式编程,而Mobx的模式是面向对象的; 3.Redux 使用“拉”的方式使用数据,这一点和 React是一致的,但 Mobx 使用“推”的方式使用数据; 4.Redux 鼓励数据范式化,减少冗余,Mobx 容许数据冗余,但同样能保持数据一致。 5.Redux更严格,必须调用reducer触发action来改变state, Mobx 最初的一个卖点就是直接修改数据,但是实践中大家还是发现这样无组织无纪律不好,所以后来 Mobx 还是提供了 action 的概念。和 Redux 的 action 有点不同,Mobx 中的 action 其实就是一个函数,不需要做 dispatch。如果想强制要求使用 action,禁止直接修改 observable 数据,使用 Mobx 的 configure,如下:

import {configure} from 'mobx';

configure({enforceActions: true});
复制代码
  • 让讲了一下react的虚拟DOM,简单讲一下diff算法原理
  • React中key的作用
关注下面的标签,发现更多相似文章
评论