360商业产品事业部（上海）前端开发一二面面经2018-08-21

网速确实不是很好，两个面试官都断断续续的，后面几乎都变成了电话面试了

一面：

自我介绍、学习经历

代码题一

编写一个flatten函数，使得输入 数组维度降低一级


例如  输入 [2, [3], 'ss', [8, 4, [9]]]  

输出 [2,3,‘ss’,8,4,[9]]

我的答案

function flatten(arr){
    let result = [];
    for(let i = 0; i< arr.length;i++){
        if(Object.prototype.toString(arr[i]) == 'Array'){
            //result.concat(arr[i]);
            for(let j = 0;j < arr[i].length;j++){
              result.push(arr[i][j]);  
            }
        }
        else{
            result.push(arr[i]);
        }
    }
}
flatten([2,[3],'ss',[8,4,[9]]);

面试官提示说，可以用concat函数对数组进行拼接，那么就可以将我的第二层遍历进行直接替换成concat，同时我又想，那么这样就不用判断是否是数组类型了，不管是什么类型，都直接拼接呗，简单类型直接拼接， 复杂类型拼接到结果集中

function flatten(arr){
    let result = [];
    for(let i = 0; i< arr.length;i++){
       //因为concat返回的是一个新的数组，所以要赋值给原数组才能进行接下来的操作
       result = result.concat(arr[i]);
    }
}
flatten([2,[3],'ss',[8,4,[9]]);

这里插入一个数组扁平化操作的方法

/**
 * 第一种方法，核心方法，递归
 * @param arr
 * @returns {Array}
 */
function bianpinghua(arr) {
    let result = [];
    arr.forEach(function (item) {
        if(item instanceof Array){
            result = result.concat(bianpinghua(item));
        }else{
            result.push(item);
        }
    });
    return result;
}
//console.log(bianpinghua([[1,2,[3,4],5],[6,7],8]));

/**
 * 第二种方法：reduce
 */
function fun2(arr) {
    return arr.reduce((result,item) => {
        return result.concat(Array.isArray(item) ? fun2(item) : item);
    },[]);
}

/**
 * 第三种方法：toString（）
 * @param arr
 */
function fun3(arr) {
    return arr.toString().split(",").map(function (item) {
        return Number(item);     //数组中的每一项是一个字符串，要转换成为数字
    });
}
console.log(fun3([[1,2,[3,4],5],[6,7],8]));

/**
 * 第四种方法：join(),将数组转换成字符串，然后对字符串分割成数组，在对数组中的每一项进行转换成数字
 */
function fun4(arr) {
    return arr.join(",").split(",").map(function (item) {
        return Number(item);
    });
}

第二题：不算手撕代码吧，讲一下代码输出，为什么？

Event loop相关，宏任务和微任务

setTimeout(() => {

  console.log(1);

}, 0);

 

Promise.resolve().then(() => {

  console.log(5);

})

 

var promise = new Promise((resolve, reject) => {

 console.log(2);

 resolve();

})

 

console.log(3);

 

promise.then(() => {

  console.log(4);

});

2——>3——>5——>4——>1

第一次循环：

宏任务队列：1

微任务：5，4

先直接输出2，3

再执行微任务：5，4

第二次循环：

宏任务：1

• 对CSS有什么了解？浮动，定位，flex，布局，。。。
• GET请求和PUT（POST）请求有什么区别？
• JS请求方式有哪些？（没听懂）
• 发送一个请求，在JS代码中应该怎么做？（后来才知道面试官意思是要JSONP）
• 所有的请求都会有影响吗？什么样的请求有影响？获取图片为什么可以呢？
• cookie，DOM，Ajax受限制
• Ajax请求的处理，嗯，面试官的问题在这里。。。。啊
• java了解到什么程度

——————————————————————end——————————————————————————

十分钟后，二面

继续写题

写一函数实现如下功能：假设两个字符串中所含有的字符和个数都相同我们就叫这两个字符串匹配，
比如：abcda和adabc,由于出现的字符个数都是相同，
只是顺序不同，所以这两个字符串是匹配的,要求高效.

我的答案

function test(str1,str2){
    //两个对象存放每个字符串中出现的字符的次数
    let obj1 = tongji(str1);
    let obj2 = tongji(str2);
    for(let i in obj1){
        if(obj2[i]){
            if(obj2[i] == obj1[i]){
                return true;
            }
            else{
                return false;
            }
        }
        else{
            return false;
        }
    }
    
}
function tongji(str){
    let obj = {};
    for(let i = 0;i < str.length;i++){
        if(!obj[i]){
            obj[i] = 1;
        }else{
            obj[i]++;
        }
    }
    return obj;
}

//第二种方法：对一个字符进行对象存储，另一个字符串进行遍历，如果对象中有这个字符的话，值减1；
//最后如果对象中的每个键的值都为0就是一样的

这个时候面试官掉线了好久，所以我就自己在这写，他回来的时候刚准备开始写第二种方法，说了下思路就说不用写了

• 事件委托
• 事件触发阶段（事件捕获——事件处理——事件冒泡）
• 事件委托阻止冒泡？
• 普通的阻止冒泡《StopProgation？》
• ES5实现class？（不会）
• 盒子模型（频率最高的问题）
• 定位
• fixed的兼容性
• this的指向
• 能实习吗？？很直接就说了不能
• （原本在上面的，为了下面的知识点补充挪下来）对象的复制，深拷贝的实现，这个时候又写了一个深拷贝的实现代码

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    if (typeof initalObj[i] === 'object') {
      obj[i] = (initalObj[i].constructor === Array) ? [] : {};            
      arguments.callee(initalObj[i], obj[i]);
    } else {
      obj[i] = initalObj[i];
    }
  }    
  return obj;
}

这里我在写的时候，我写了Object.prototype.toString（arr[i]）,应该没错吧

特意查了一下，数组类型的判断方法

1、instanceof

2、从原型入手：Array.prototype.isPrototypeOf(obj);

3、Object.prototype.toString.call()   [object  Array]/[object Object]/[object Null]

4、Array.isArray()