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

2018-06-14 admin

❤,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方法把执行上下文,和依赖列表传入函数并执行

参考:https://www.cnblogs.com/etoah… - ❤,讲一下你理解的promise。

❤,Babel是如何编译es6中的class的。

❤,ES6中数组和对象新增的常用操作方法。

❤,Jquery(或zepto)和Angular源码经典部分解析。

原文链接:https://segmentfault.com/a/1190000015282962

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34030.html

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

相关文章
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
回到顶部