- N +

js相关的一些问题及面试遇到过的

原标题:js相关的一些问题及面试遇到过的

导读:

1、深拷贝与浅拷贝的区别深拷贝:创建一个新的对象、属性中引用的其它对象也会被克隆、不在指向原有对象地址(JSON.parse()、JSON.stringify())浅拷...

文章目录 [+]

1、深拷贝与浅拷贝的区别

深拷贝:创建一个新的对象、属性中引用的其它对象也会被克隆、不在指向原有对象地址(JSON.parse()、JSON.stringify())

浅拷贝:只是拷贝了基本类型的数据,如果原地址中对象被改变了、那么通过浅拷贝出来的对象也会相应改变

2、闭包

闭包:一个函数可以访问另一个函数的局部变量

闭包的作用:把数据保护及缓存起来

闭包的缺点:会让局部变量无法被垃圾回收机制回收、一直活跃在内存中、占用内存,并不知道何时该回收、直到浏览器关闭

3、原型和原型链

原型:当函数经过new的调用,这个函数就成为了构造函数,返回一个全新的实例对象,这个实例对象有一个__proto__属性,指向构造函数的原型对象;

原型链:对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制,如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束,最终会返回undefined

原型图:

image.png

原型链图:


image.png

4、session、cookie、localStorage的区别

相同点:都是保存在浏览器端,且同源的。

不同点:
cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。

存储大小限制不同:cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

数据有效期不同:sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
                 cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
                 
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的


5、从输入url地址到页面相应都发生了什么?

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接(三次握手)。
5、HTTP发起请求。
6、服务器处理请求,浏览器接收HTTP响应。
7、渲染页面,构建DOM树。
8、关闭TCP连接(四次挥手)

6、前端优化页面的几种方法

1.减少 HTTP请求数
2.从设计实现层面简化页面
3.合理设置 HTTP缓存
4.资源合并与压缩
5.合并 CSS图片,减少请求数的又一个好办法。
6.将外部脚本置底(将脚本内容在页面信息内容加载后再加载)
7.多图片网页使用图片懒加载。
8.在js中尽量减少闭包的使用
9.尽量合并css和js文件
10.尽量使用字体图标或者SVG图标,来代替传统的PNG等格式的图片
11.减少对DOM的操作
12.在JS中避免“嵌套循环”和 “死循环”
13.尽可能使用事件委托(事件代理)来处理事件绑定的操作

7、同步和异步

同步:在同一时间内做一件事情

异步:在同一时间内做多个事情 JS是单线程的,每次只能做一件事情,JS运行在浏览器中,浏览器是多线程的,可以在同一时间执行多个任务。

js中的异步任务:定时器、ajax、事件绑定、回调函数、async await、promise


8、js中的数据类型

基本数据类型(Undefined、Null、Boolean、Number、String)

复杂数据类型 (Object)

判断数据类型:typeof()、instance of、constructor(constructor不能判断undefined和null,并且使用它是不安全的,因为contructor的指向是可以改变的)、
              Object.prototype.toString.call、jquery中的$.type($.type()内部原理就是用的Object.prototype.toString.call())

9、JavaScript获取时间戳与时间戳转化

第一种方法:Date.parse( new Date())

结果如图:

image.png

第二种方法:new Date().valueOf()

结果如下图:

image.png

第三种方法:new Date().getTime()

结果如图:

image.png

第一种获取的时间戳是精确到秒,第二种和第三种是获取的时间戳精确到毫秒。

获取指定时间的时间戳:new Date("2016-08-03 00:00:00").getTime()

时间戳转化成时间:
function timetrans(date){
    var date = new Date(date*1000);//如果date为13位不需要乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());   
    return Y+M+D+h+m+s;
}

10、splice和slice、map和forEach、 filter()、reduce()的区别

1.slice(start,end):方法可以从已有数组中返回选定的元素,返回一个新数组,
 包含从start到end(不包含该元素)的数组方法
	注意:该方法不会更新原数组,而是返回一个子数组
	
 2.splice():该方法想或者从数组中添加或删除项目,返回被删除的项目。(该方法会改变原数组)
	splice(index, howmany,item1,...itemx)
		·index参数:必须,整数规定添加或删除的位置,使用负数,从数组尾部规定位置
		·howmany参数:必须,要删除的数量,
		·item1..itemx:可选,向数组添加新项目
		
3.map():会返回一个全新的数组。使用于改变数据值的时候。会分配内存存储空间数组并返回,forEach()不会返回数据

4.forEach(): 不会返回任何有价值的东西,并且不打算改变数据,单纯的只是想用数据做一些事情,他允许callback更改原始数组的元素

5.reduce(): 方法接收一个函数作为累加器,数组中的每一个值(从左到右)开始缩减,最终计算一个值,不会改变原数组的值

6.filter(): 方法创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。它里面通过function去做处理	


11、连接两个数组,push和concat的区别

// 使用push,代码及结果如下(从下图发现:push方法会把数组原原本本的输出):
var arr1 = [1,2,3,4]
var arr2 = [4,5,6,7]
arr1.push(arr2)

image.png

// 使用concat,代码及结果如下(从下图发现:concat方法会把数组解析之后再输出):
var arr1 = [1,2,3,4]
var arr2 = [4,5,6,7]
arr1.concat(arr2)

image.png

有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

0

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共105人参与)参与讨论

    还没有评论,来说两句吧...