前端常见面试题

最新推荐文章于 2024-07-22 15:19:55 发布

落千

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量151

点赞数

分类专栏：面试题文章标签：前端面试题常见

原文链接：https://blog.csdn.net/weixin_41018304/article/details/102530806

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.NaN的意思：
not a number，number类型。验证：isNaN

2. == 和 ===的区别：
== 代表相同， ===代表严格相同,。

双等号==：

（1）如果两个值类型相同，再进行三个等号(===)的比较
（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

如果一个是null，一个是undefined，那么相等
如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

三等号===:

（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>

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

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的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.原型链：构造函数、原型对象、实例化对象三者的关系：
在这里插入图片描述
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.页面渲染
基本过程

解析HTML文件，创建DOM树
解析CSS,形成CSS对象模型
将CSS与DOM合并，构建渲染树（renderingtree）
布局和绘制

13.创建一个对象有哪些方法？
1、工厂模式

<script type="text/javascript">
  function createPerson(name,age,job){
     var o=new Object();
     o.name=name;
     o.age=age;
     o.job=job;
     o.sayName=function(){
       console.log(this);
       alert(this.name);
       }
       return o;
     }
     var person1 = createPerson("nanshen",28,"ya");
     person1.sayName();
</script>

2、构造函数模式

<script type="text/javascript">
    function Person(name,age,job){
     this.name=name;
     this.age=age;
     this.job=job;
     this.sayName=function(){
       console.log(this);
       alert(this.name);
       }
    }
    var person1 = new Person("aaa",30,"打酱油");
    var person2 = new Person("nnn",19,"程序员");
    console.log(person1 instanceof Object);//true
    console.log(person1 instanceof Person);//true
</script>

3、原型模式

<script type="text/javascript">
    function Person(name,age,job){
     
    }
    Person.prototype.name = "Yvette";
    Person.prototype.age = 26;
    Person.prototype.job= "enginner";
    Person.prototype.sayName = function(){
        console.log(this.name);
      }
    var person1 = new Person();
     console.log(person1.name);//Yvette
    var person2 = new Person();
    console.log(person2.name);//Yvette
</script>

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.数组去重几种方法

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

落千

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见面试题

1.NaN的意思：not a number，number类型。验证：isNaN2. == 和 ===的区别：== 代表相同， ===代表严格相同,。双等号==：（1）如果两个值类型相同，再进行三个等号(===)的比较（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：如果一个是null，一个是undefined，那么相等如果一个是字符串，一个是数值，把字...
复制链接

扫一扫

专栏目录