前端常见面试题（1）————前端

前端常见面试题（1）————前端

1.NaN的意思：

not a number，number类型。 验证：isNaN

2.==和===的区别：

== 表明相同， ===表明严格相同,。

　　双等号==：

　　（1）若是两个值类型相同，再进行三个等号(===)的比较

　　（2）若是两个值类型不一样，也有可能相等，需根据如下规则进行类型转换在比较：

　　　　1）若是一个是null，一个是undefined，那么相等

　　　　2）若是一个是字符串，一个是数值，把字符串转换成数值以后再进行比较

　　三等号===:

　　（1）若是类型不一样，就必定不相等

　　（2）若是两个都是数值，而且是同一个值，那么相等；若是其中至少一个是NaN，那么不相等。（判断一个值是不是NaN，只能使用isNaN( ) 来判断）

　　（3）若是两个都是字符串，每一个位置的字符都同样，那么相等，不然不相等。

　　（4）若是两个值都是true，或是false，那么相等

　　（5）若是两个值都引用同一个对象或是函数，那么相等，不然不相等

　　（6）若是两个值都是null，或是undefined，那么相等

3.null和undefined的区别：

null：Null类型，表明 “空值”，表明一个空对象指针，使用typeof运算获得 “object” ，因此能够认为它是一个特殊的对象值。

undefined：Undefined类型，当一个声明了一个变量未初始化时，获得的就是 undefined。

4.typeof bar ==="object"这个验证的风险有哪些：

null也是object,若是值为null就会出问题了！

JQ解决方法：(bar !== null) && (typeof bar === "object") && (! $.isArray(bar))

5.get和post的区别：

（1）.url可见性：get，参数url可见 post，url参数不可见

get把请求的数据放在url上，即HTTP协议头上，其格式为：以?分割URL和传输数据，参数之间以&相连；post把数据放在HTTP的包体内（requrest body）

（2）.传输数据的大小：
get通常传输数据大小不超过2k-4k
post请求传输数据的大小根据php.ini 配置文件设定，也能够无限大

（3）.数据传输上：
get，经过拼接url进行传递参数
post，经过body体传输参数

（4）.后退页面的反应：
get请求页面后退时，不产生影响
post请求页面后退时，会从新提交请求

（5）.缓存性：
get请求是能够缓存的
post请求不能够缓存

（6）.安全性：
都不安全，原则上post确定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩，浏览器还会缓存get请求的数据。安全性我的以为是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都同样。

（7）.GET请求只能进行url编码，而POST支持多种编码方式

（8）.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

（9）.GET只接受ASCII字符的参数的数据类型，而POST没有限制

6.use strict有什么用：

<script>  
  "use strict";  
  console.log("这是严格模式。");  
</script>

设立"严格模式"的优势：

1. 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;
2. 消除代码运行的一些不安全之处，保证代码运行的安全；
3. 提升编译器效率，增长运行速度；
4. 为将来新版本的Javascript作好铺垫。

注：通过测试 IE6,7,8,9 均不支持严格模式。

缺点：
如今网站的 JS 都会进行压缩，一些文件用了严格模式，而另外一些没有。这时这些原本是严格模式的文件，被 merge 后，这个串就到了文件的中间，不只没有指示严格模式，反而在压缩后浪费了字节。

7.什么是document对象，什么是window对象。区别？

document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。

若是文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档建立一个 window 对象，并为每一个框架建立一个额外的 window 对象。
全部的全局函数和对象都属于Window 对象的属性和方法。
document 对 Document 对象的只读引用。

区别:
一、window 指窗体。document指页面。document是window的一个子对象。
二、用户不能改变 document.location(由于这是当前显示文档的位置)。可是,能够改变window.location (用其它文档取代当前文档)window.location自己也是一个对象,而document.location不是对象

8.原型链：构造函数、原型对象、实例化对象三者的关系：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVBgy4Ar-1570936189664)(d:\W519L\Desktop\8c2dd16ea9e6ae9fa0b01128045ce3a2.jpg)]

9.apply和call的关系：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

区别:call和apply都是调用一个对象的一个方法，用另外一个对象替换当前对象。而不一样之处在于传递的参数，apply最多只能有两个参数——新this对象和一个数组argArray，若是arg不是数组则会报错TypeError；

10.替代图片的方法有哪些？

canvas绘图，FontAwesome图标库。

11.MVC，MVVM框架原理：

MVC:将整个前端页面分红View，Controller，Modal，视图上发生变化，经过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。

MVVM:分别指View，Model，View-Model，View经过View-Model的DOM Listeners将事件绑定到Model上，而Model则经过Data Bindings来管理View中的数据，View-Model从中起到一个链接桥的做用。

一、实现数据与视图的分离
二、经过数据来驱动视图，开发者只须要关心数据变化，DOM操做被封装了。

12.从输入网址到页面呈现都发生了什么？

1.网络通信

地址解析，解析出的域名进行dns解析，经过ip寻址和arp找到服务器，服务器与客户端（浏览器）进行tcp三次握手，创建连接。浏览器发送数据，等待服务器响应，服务器处理请求，并对请求作出相应。浏览器收到请求，获得html代码。↓

2.页面渲染

基本过程

1．解析HTML文件，建立DOM树

2．解析CSS,造成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制

13.建立一个对象有哪些方法？

一、工厂模式

二、构造函数模式

三、原型模式

14.new一个实例对象会发生什么 ：

一、建立一个新对象
二、将构造函数的做用域赋给新对象（this）
三、执行构造函数中的代码（为新对象添加属性）
四、返回该对象。

15.基本数据类型和引用数据类型有什么区别？

基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型能够直接操做保存在变量中的实际值。

引用数据类型：Object（在JS中除了基本数据类型之外的都是对象，数据是对象，函数是对象，正则表达式是对象）

区别：

一、声明变量时内存分配不一样

二、不一样的内存分配带来不一样的访问机制

三、复制变量时的不一样

四、参数传递的不一样（把实参复制给形参的过程）

16.箭头函数和普通函数的区别？

箭头函数：

let fun = () => {
    console.log('lalalala');
}

普通函数：

function fun() {
    console.log('lalla');
}

箭头函数是匿名函数，不能做为构造函数，不能使用new

• 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
• 普通函数的this指向调用它的那个对象

17.数组去重几种方法

1.定义一个新数组，并存放原数组的第一个元素，而后将元素组一一和新数组的元素对比，若不一样则存放在新数组中。
2.先排序在去重，先将原数组排序，在与相邻的进行比较，若是不一样则存入新数组
3.利用对象的属性去重（推荐），每次取出原数组的元素，而后再对象中访问这个属性，若是存在就说明重复
4.利用下标查询
五、利用ES6的set
   Set数据结构，它相似于数组，其成员的值都是惟一的。利用Array.from将Set结构转换成数组

18.使用ES6中的set的好处：

更简便的：数组去重，并集，交集，差集。

19.for循环能够用什么来代替:

// reduce写法
sum = arr.reduce(function (prev, cur, index, arr) {
 return  prev + cur;
});
console.log(sum);
//forEach写法
    sports.forEach(function (item) {
        item.sex = '男';
    })
    console.log(sports);

20.js遍历对象的几种方法

第一种： for......in

第二种：

1）、Object.keys（obj）

2）、Object.values（obj）

21.vue生命周期：

new vue→→初始化→→组件刚被建立→→导入依赖→→组件建立完成，属性已绑定→→检查vue配置→→检查配置中的template→→模板编译→→编译，替换被绑定元素→→→编译，挂载→→→→→→组件更新以前→→→→→→组件更新以后→→→→→生命周期结束