面试之旅-深圳 遇到的问题和一些自己的拓展以及答案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源码经典部分解析。