前端常见面试题（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 对象的只读引用。

区别:
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVBgy4Ar-1570936189664)(d:W519LDesktop8c2dd16ea9e6ae9fa0b01128045ce3a2.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从中起到一个连接桥的作用。

1、实现数据与视图的分离
2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

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

1.网络通讯

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

2.页面渲染

基本过程

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

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

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

4．布局和绘制

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

1、工厂模式

2、构造函数模式

3、原型模式

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

1、创建一个新对象
2、将构造函数的作用域赋给新对象（this）
3、执行构造函数中的代码（为新对象添加属性）
4、返回该对象。

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

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

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

区别：

1、声明变量时内存分配不同

2、不同的内存分配带来不同的访问机制

3、复制变量时的不同

4、参数传递的不同（把实参复制给形参的过程）

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

箭头函数：

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

普通函数：

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

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

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

17.数组去重几种方法

1.定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
2.先排序在去重，先将原数组排序，在与相邻的进行比较，如果不同则存入新数组
3.利用对象的属性去重（推荐），每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复
4.利用下标查询
5、利用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→→模板编译→→编译，替换被绑定元素→→→编译，挂载→→→→→→组件更新之前→→→→→→组件更新之后→→→→→生命周期结束