面试之旅-深圳 遇到的问题和一些自己的拓展以及答案1

❤,es6中的高级数据结构set和map的使用以及与es5中旧有的obj、array等结构的差别?
(1) Set构建函数可以接受一个数组作为初始化参数

var s = new Set([1,2,3,4,'1','2','3','4']);

(2) 有以下方法:add、delete、has、clear 作用如其名
(3) 可以用Array.from方法将Set结构转换为数组结构

var items = new Set([1,2,3,4,5]);
var new_array = Array.from( items );

(4) Set中每个元素只存在一个key
(4) es5中js对象只可以使用字符串充当key值,一定程度上有限制。而Map结构就是为了解决这一问题。
(5) 可以接受一个二维数组作为初始化参数

var s = new Map([["name","小明"],["title","Author"]])
//map.size //2
//map.has("name") //true
//map.get("name") //小明

❤,js中的this,比如es6箭头函数中的this
比较基础的来讲,就是“指函数执行时,它的上一级对象,如果没有上一级对象,则为最高层Window”。

当然1,需要区分strict模式,因为在strict模式中,this不会指到window,而是undefined。比如:

function abc(){
  console.log(this);
}
或
var abc = function (){
  console.log(this);
}

abc(); //非严格模式下返回 Window
       //严格模式下返回 undefined

2,es6中箭头函数会有所差异:”箭头函数中的this,继承父级执行上下文”。在定义的时候就已经被决定了,无论使用apply还是call都无法改变。(其实这个改变主要意义是为了向静态化靠拢,因为大多数语言,比如java、php中的this,即和箭头函数中的this指向一样,而es5中非new+构造函数创建的函数的this,太特殊了),例子:

es5中:
var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say(); //22

而在es6中
var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say(); //11

3,有一些方法可以改变this的指向,比如new+构造函数方式,比如apply与call等。比如:

var a=11
function test1(){
    a=22;
    let b=function(){
        console.log(this.a);
    };
    b();
}
var x = new test1();//22

如果不使用构造函数,则:
var a=11
var test1 = {
    a:22,
    b:function(){
        console.log(this.a);
    }
}
var x = test1.b;
console.log(x());//11
//call和apply是Function对象的方法,两个方法的作用是一样的:
//call谁,apply谁,就把this指向谁。
//call与apply的区别就在于call的参数需要一个个传,而apply接受一个数组作为参数。
window.color = 'red';
document.color = 'yellow';

var s1 = {color: 'blue' };
function changeColor(){
    console.log(this.color);
}

changeColor.call();         //red (默认传递参数)
changeColor.call(window);   //red
changeColor.call(document); //yellow
changeColor.call(this);     //red
changeColor.call(s1);       //blue

参考:https://www.cnblogs.com/pssp/…https://blog.csdn.net/liwusen…https://blog.csdn.net/ganying…

❤,前端开发几种设计模式的概念,及典型使用场景。参考:http://garychang.cn/2017/01/1…

1,单例模式:声明一个类,在其中使用闭包,那么这个类中的变量是一直存在于内存中的,每次实例化这个类,都会去判断内存中该类是否存在,即成为单例。参考,https://www.cnblogs.com/yongl…
2,观察者模式:设计该模式背后的主要动力是促进形成松散耦合。在这种模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。参考,https://www.cnblogs.com/haoyi…
3,工厂模式。
4,装饰者模式。
and so on..

❤,mvvm和mvc的架构模式的概念和区别
(1) mvc:Model-View-Controller。 model是数据,view是用户视图层,controller是逻辑处理层。
(2) mvvm:Model-View-ViewModel。彻底切断model和view层的联系,使用双向绑定进行交互,view层如果修改,model层会修改,反之也会发生修改。比如AngularJs

❤,请写出从”在浏览器输入域名”到”页面静态资源完全加载”的整个过程
https://www.cnblogs.com/daiji…https://segmentfault.com/a/11…

注:我注意到这里是问”页面静态资源完全加载”,而不是”浏览器接收数据”,所以需要把浏览器解析html代码的过程也详述进来,即引发面试官下一问题..

❤,浏览器加载文件的方式(js是在所有静态文件下载完之后运行,还是下载完js即刻运行?2,<img>加载方式和js、css等一样吗)
https://segmentfault.com/a/11…

❤,冒泡排序算法将以下数组 var a = [B,A,E,C,D] 排序成a = [A,B,C,D,E]
1,冒泡算法的思想是:每一次对比相邻两个数据的大小,小的排在前面,如果前面的数据比后面的大就交换这两个数的位置。
2,使用string.charCodeAt()方法来判断一个字符的ASCII码数值。从A-Z,依次增加。
3,本题提到了”冒泡算法”,那么就认为不是要使用javascript原生的sort()方法,要自己封装一个类似功能的方法或称函数。
4,封装冒泡算法如下:

function sortage (arr)
{
    for (let i = 0;i<arr.length-1;i++){
        for (let j = i + 1;j<arr.length;j++){
            if(arr[i].charCodeAt(0) > arr[j].charCodeAt(0)){
                let temp_l = arr[j];
                let temp_r = arr[i];
                arr[i] = temp_l;
                arr[j] = temp_r;
            }
        }
    }
    return arr;
}

let sampleArr = ['E','A','C','F','B','D'];

sortage(sampleArr);//['A','B','C','D','E','F']

❤,组件化思想是什么意思,实际应用场景如何?与之相对应的典型前端架构思想是什么?二者有何区别?
参考:https://www.jianshu.com/p/944…

❤,大概了解一下移动开发的几种css布局,比如css3新标准的flexible布局和grid布局等等
1,css2.1中的布局方式:

1)block布局:为了展示文档流。
2)inline布局:为了展示文本。
3)table布局:为了展示2D信息信息。
4)定位布局:为了非常直接地定位元素而设计出来的布局模式,定位元素基本与其他元素无关。

2,css3中引入了新的布局模式:伸缩布局,是为了呈现复杂的应用与页面而设计出来的。
3,一个伸缩布局,即Flexbox是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
4,常见属性:

1,flex-direction: row | row-reverse | column | column-reverse;决定浮动方向是横向还是纵向。
2,flex-wrap: nowrap | wrap 决定是否换行显示
3,flex-flow: <flex-direction> || <flex-wrap>
4,justify-content: flex-start | flex-end | center | space-between | space-around;项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了),
5,flex: 比例占用。举例:
    .main {
      width: 600px;
    }
    .left {
      flex: 1;
    }
    .right {
      flex: 2;
    }
    是表示中间宽度为定宽600px,.left与.right按照1:2的比例占用flex container的剩余全部空间

参考:https://www.cnblogs.com/xuyun…

❤,React组件的生命周期
总体上分为三个状态,以及分布于其中的钩子:

1,实例化(挂载)
    getDefaultProps
    getInitialState
    componentWillMount
    render
    componentDidMount
2,存在期(运行)
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate
3,销毁&清理期
    componentWillUnmount

参考:http://react-china.org/t/reac…

❤,React可控组件和非可控组件分别是什么区别,一般使用场景是什么

❤,页面加载速度优化方法。倘若有1000万用户反映网页显示很”卡”(大于3s),如何针对此情况立项排查?

❤,前端安全有了解吗。
常见的前端安全问题:

1,xss: 跨域脚本攻击
    a,反射形:主要依靠站点服务端返回脚本,在客户端触发执行从而发起Web攻击。前端应对方案主要就是要过滤转义后台传过来的标签,比如script标签,以及标签属性,比如onerror等属性。后端反向一致。
    b,存储型:https://segmentfault.com/a/1190000011459463#articleHeader3
2,csrf: 跨站请求伪造
    https://segmentfault.com/a/1190000011459463#articleHeader4
    

参考:https://segmentfault.com/a/11…

❤,AngularJs中双向绑定的实现原理?脏值检测呢?

双向绑定是mvvm框架的核心特点。angular作为经典mvvm框架,它内部封装了各种事件,例如click, settimeout,xhr response等。在其中触发$digest循环,这个循环里会遍历$watch列表,只要其中有值发生改变,$digest就会递归触发,比较旧值和新值,直到没有值发生改变,完成最后一次$digest循环。这个时候更新视图,使其与数据模型一致。脏值检测的实现原理也在其中,只要$digest循环在进行,那么就存在$dirty脏值。

❤,AngularJs中依赖注入的实现原理?html伪属性指令呢?
依赖注入(Dependency Injection,简称DI)是c#、java等语言框架设计原则中”控制反转”的典型案例。angular把它引入到js中。它实际工作的原理如下:

1,得到函数的依赖项(即参数)
    使用Function.prototype.toString,得到函数的源码字符串,然后解析其中的依赖项.
2,查找依赖项所对应的对象。
    在angular的一个对象数组中找到这个对象即可
3,执行时注入:
    通过 fn.apply方法把执行上下文,和依赖列表传入函数并执行
    

angular指令本质上是对html的补充扩展。在angular运行的过程中,会启动一个叫$compile的服务,这个服务会对dom树进行遍历,找到树上所有的指令名,并且对应运行。

参考:https://www.cnblogs.com/etoah…

❤,讲一下你理解的promise。
Promise的诞生其实一开始是为了加强node后台可读性的:因为nodeJs以丰富的异步处理而提高效率著称,但是过多的异步操作会降低代码的可读性,于是在es6版本中Promise应运而生。
一般表示形式:

new Promise(
    function(resolve, reject) {
        if (/* success */) {
            // ...执行代码
            resolve();
        } else { /* fail */
            // ...执行代码
            reject();
        }
    }
);

方法:

1,Promise.prototype.then()
2,Promise.prototype.catch()
and so on..

关于promise的resolve和reject以及promise状态:

如果then()方法中返回了一个参数值,那么返回的Promise将会变成接收状态。
如果then()方法中抛出了一个异常,那么返回的Promise将会变成拒绝状态。
如果then()方法调用resolve()方法,那么返回的Promise将会变成接收状态。
如果then()方法调用reject()方法,那么返回的Promise将会变成拒绝状态。
如果then()方法没有明确指定的resolve(data)/reject(data)/return data时,那么返回的新Promise就是接收状态,可以一层一层地往下传递。

❤,Babel是如何编译es6中的class的。
就是通过es5中 构造函数 + prototype原型链 继承的方式来实现的。
参考:https://segmentfault.com/a/11…

❤,ES6中数组和对象新增的常用操作方法。
❤,Jquery(或zepto)和Angular源码经典部分解析。

    原文作者:milobluebell
    原文地址: https://segmentfault.com/a/1190000015282962
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞