前端面试题

之前总结的前端面试题一般大公司问的都特别基础分好几轮小公司基本你让面试官满意就可以

1.['1', '2', '3'].map(parseInt)的结果是什么？

parseInt(string, radix)

string：需要转化的字符串( a1,ask3,!1,12 1a )等。

radix：数字2-36之间的整型。默认10进制。

解析:parseInt('1', 0) // 1

        parseInt('2', 1) // NAN radix 须2-36！！

        parseInt('3', 2) // NAN 3不是二进制

答：[1,NAN,NAN]

2.输出什么？

var number = 10;

function fn() {

  console.log(this.number);

}

var obj = {

  number: 2,

  show: function(fn) {

    this.number = 3;

    fn();

    arguments[0]();

  }

};

obj.show(fn);//10

面试重点

0.new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

1.浏览器兼容性

1、各个浏览器的padding、margin差异较大解决方案:padding: 0; margin: 0;

2、图片默认有间距  解决方案：使用float属性为img布局

3、display:flex：IE10 也是支持部分功能。而 IE8 和 IE9 则完全不支持 flexbox4.css3各大浏览器都支持需要加上内核，ie9部分支持，10以上完全支持

( ie内核 Trident  火狐内核 Mozilla  谷歌/Safari 内核 WebKit  )

2.标准盒模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content

3.常见布局写法，2栏，3栏，双飞翼

https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

4.水平，垂直居中超过3种的写法

一、display:table-cell;text-align:center;vertical-align:middle;

二、flex布局,display:flex; justify-content:center; align-items: center;

三、 position:absolute; left:50%; top:50%;margin:盒子的宽高的一半

四、position:absolute; top:0; left:0; bottom:0; right:0; 设置宽高 margin:auto;

4_1.常见的状态码

404未找到

200成功

500服务器错误

403禁止访问

5.数据类型，函数，事件，事件代理

5种基本类型：布尔、number、字符串、undefind、null。混合类型 object

事件:bind()向匹配元素附加一个或更多事件处理器

delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器

live()为当前或未来的匹配元素添加一个或多个事件处理器

事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。

6.作用域链，原型链，闭包

作用域：作用域的范围是函数，函数嵌套函数，查找变量从内层函数向外层查找，最后找不到再window上找

闭包：在一个函数中返回另一个函数，里面的函数即成为闭包，闭包限制了一定的作用域，保持变量不被释放掉

闭包好处：避免污染全局环境，这样我们就可以在函数体外使用函数体中定义的变量

数据长期驻留在内存中，造成内存极大浪费，在IE浏览器上，特别容易崩溃。所以使用闭包需谨慎。

闭包的实际应用：例如游戏开发中，我们需要将游戏中角色的移动位置保护起来，不希望被其他函数轻易可以修改到，所以我们选择使用闭包操作

(内存泄漏:申请了内存空间，并让一个指针变量指向这个空间,使用完毕后不进行释放，就叫内存泄露)

7.js面向对象写法

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.getName = function () {

return this.name;

}

}

var person1 = new Person('Jack', 19, 'SoftWare Engineer');

var person2 = new Person('Liye', 23, 'Mechanical Engineer');

8.正则表达式

手机号：(/^1[3|4|5|8][0-9]\d{4,8}$/)

邮箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

9.跨域方式有几种

(协议、端口号、域名 都相同才是同一个域 只要有一个不同就算是跨域 )

1.jsonp跨域:利用script标签的src属性通过动态创建一个script标签，指定src属性为跨域的api，那么html会把返回的字符创当作javascript代码来进行解析，如果我们在返回的字符串中使用自定义函数形式包装起来，然后在html中调用自定义函数，即可拿到返回的字符串

2.后台代理

3.window.name + iframe:

利用同一个窗口中的代码共享window.name属性这一特点，将window.name属性值设置为要传输的值

比如想在a.html中载入data.html中的数据，就需要设置data.html的window.name

不能a自动打开一个date.html获取数据，所以需要在a.html中设置一个隐藏的iframe接收data.html中的数据，

iframe的src要和data.html一样

10.Array有哪些方法

push：向数组的末尾增加一项 返回值是数组的新长度

unshift：向数组开头增加一项 返回值是数组的新长度

pop:删除数组的末尾项 返回值是删除的数组项

shift:删除数组开头项 返回被删除的开头项目

splice：删除数组中的任意项 返回值是被删除的数组项

slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

拼接：

concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组

join:把数组中的每一项 按照指定的分隔符拼接成字符串

排序：

reverse:倒序数组 返回值倒序数组 原有数组改变

sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

11.字符串有哪些方法

toUpperCase()方法将字符串转换为大写

toLowerCase方法返回一个字符串，该字符串中的字母被转换成小写。

charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。

fromCharCode方法从一些Unicode字符串中返回一个字符串。

charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。

slice方法返回字符串的片段。 var str = "ABCDEF"; str.slice(2,4); 结果：CD

12.前端性能优化（pc，移动端）

13.浏览器的加载过程

14.设计模式

1.工厂模式：主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

构造函数模式

原型模式

混合构造函数和原型模式

动态原型模式

寄生构造函数模式

15.数组去重

Array.prototype.remove_arr = function(){

var res = [];

var json = {};

for(var i = 0; i < this.length; i++){

if(!json[this[i]]){

res.push(this[i]);

json[this[i]] = 1;

}

}

return res;

}

var arr = [1,2,3,4,5,6,7,8,9,1,2,3,4,5];

alert(arr.remove_arr());

16.冒泡排序

17.数组最大最小出现次数最多的数

18.用户从输入url地址到页面发生了什么

1.域名解析

2.tcp三次握手

3.浏览器发送http请求

4.浏览器发送请求头信息

5.服务器处理请求

6.服务器做出应答

7.服务器发送响应头信息

8.服务器发送数据

9.tcp连接关闭

19.tcp三次握手

1.请求建立连接，客户端A->服务器

2.验证客户端，服务器->客户端A

3.确认客户端，客户端A->服务器

为了保证服务端能收接受到客户端的信息并能做出正确的应答而进行前两次(第一次和第二次)握手，为了保证客户端能够接收到服务端的信息并能做出正确的应答而进行后两次(第二次和第三次)握手。

20.模块发开发好与坏

20_1你觉得jQuery或zepto源码有哪些写的好的地方

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jQuery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。

20_2ES6的了解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念

优点：

可维护性

1.灵活架构，焦点分离

2.方便模块间组合、分解

3.方便单个模块功能调试、升级

4.多人协作互不干扰

缺点：

性能损耗

1.系统分层，调用链会很长

2.模块间通信,模块间发送消息会很耗性能

21.内存泄漏与溢出

内存溢出 out of memory，是指程序在申请内存时，没有足够的内存空间供其使用，出现out of memory；比如申请了一个integer,但给它存了long才能存下的数，那就是内存溢出。

内存泄露 memory leak，是指程序在申请内存后，无法释放已申请的内存空间，一次内存泄露危害可以忽略，但内存泄露堆积后果很严重，无论多少内存,迟早会被占光。

22.面向对象

23.原型继承

将上级函数的实例赋值给下级函数的原型

24.原型继承和类继承区别

原型式继承是借助已有的对象创建新的对象，将子类的原型指向父类，就相当于加入了父类这条原型链

原型继承的缺点：字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

类式继承就像java的继承一样，思想也比较简单：在子类型构造函数的内部调用超类型构造函数。

类式继承：借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承

25.响应式和flex布局区别

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式

自适应:所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

26.AMD与CMD

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

27.左边固定宽度，右边自适应

div(d1)

div(d2)

.d1{ float:left; width:100px;}

.d2{ margin-left:100px; }

28.双飞翼

div(left)

div(main)

div(right)

.left{ position:absolute; top:0; left:0; }

.right{ position:absolute; top:0; right:0; }

.main{ margin:0 200px; }

29.判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';

var json = {};

for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}else{

json[str.charAt(i)]++;

}

};

var iMax = 0;

var iIndex = '';

for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIvndex = i;

}

}

alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

30.把字符串转换成驼峰式写法

var str = "border-left-color";

function change(str){

var arr =str.split(‘-‘);

for(var i=1; i < arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1)

}

return arr.join(‘‘);

}

console.log( change(str));

31.typescript的新特性

字符串新特新

1.多行字符串 用 ` ` 号隔开可以任意换行

2.字符串模板:例如根据数据字符串的拼接

3.自动拆分字符串

参数新特性

在参数名称后面使用冒号来指定参数类型  - - - var myName: string = "Mar.L"

var myName :any = "Mar.L" any类型可以为变量赋值任何值

函数新特性

1. Rest and Spread function test( ...args ){}  (..args)可以传任意数量参数

2.generator函数:控制函数的执行过程，手工暂停和恢复代码执行

32.Vue 配置

1、npm install -g vue-cli

2、vue init webpack my-project

3、cd my-project

4、npm install

5、npm run dev

( 路由 ) npm install --save vue-router

(  网路请求 ) npm install --save vue-resource

( vuex ) npm install --save vuex

33.vue各文件代表什么意思

1.build和config是webpack的配置文件

2.node_modules中存放的是npm install安装的文件依赖代码库

3.src文件是存放的是项目源码

4.static存放的是第三方的静态资源

5.index.html入口html文件

package.json项目的配置文件

33.vue2.0生命周期

beforeCreate：组件刚刚创建实例，组件属性计算之前

created：组件实例创建完成，属性已绑定，但dom还没生成

beforeMount：模板挂载之前

mounted：模板挂载之后

beforeUpdate:组件更新之前

Updated：组件更新之后

beforeDestorye：组件销毁前调用

destoryed:组件销毁后调用

1.0生命周期

34.路由传参

1.给路由命名，name:'history'

2.在路径中，要使用冒号开头的数字来接受参数 '/history/ deviceId: deviceId/:dataId'

35.vue传值

父给子传值  props

兄弟组件传值  bus

$on绑定  $emit触发

36.递归遍历数组

var returnedItem;

var find = function(arr, id){

arr.forEach((item) => {

if(item.id==id)

{

returnedItem = item;

return item;

}

else if(item.children.length > 0)

{

find(item.children, id);

}

})

}

var item = find(array, 7);

console.log(returnedItem);

37.随机打乱一个数组

var arr = [1,2,3,4,5,6];

arr.sort( function(){ return 0.5 - Math.random()} )

alert(arr);

38.Vue双向数据绑定的实现

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者（文本节点则是作为订阅者），在收到消息后执行相应的更新操作。