ECMAScript面试（二）

最新推荐文章于 2022-08-11 14:49:59 发布

Lyrelion

最新推荐文章于 2022-08-11 14:49:59 发布

阅读量243

点赞数

分类专栏：初遇你文章标签： javascript

本文链接：https://blog.csdn.net/Lyrelion/article/details/107784980

版权

初遇你专栏收录该内容

30 篇文章 4 订阅

订阅专栏

1.事件循环，js执行机制，宏任务，微任务

(1) 事件循环、JS执行机制

JS是单线程语言，JS任务排队顺序执行，同步和异步任务分别进入不同的执行“场所”
同步进入主线程，异步进入Event Table，并注册函数
当指定的事情完成时，Event Table 会将这个函数移入Event Queue
主线程内的任务执行完毕为空，回 Event Queue 读取对应的函数，进入主线程

(2) 宏任务和微任务

宏任务: 整体script，setTimeout，setInterval
微任务：Promise，process.nextTick
console.log('1'); // 同步任务

// 宏任务 setTimeout
setTimeout(function () {
    console.log('2');//
    new Promise(function (resolve) {
        console.log('3');//
        resolve();
    }).then(function () {
        console.log('4');//
    })
});

// <script> 整体代码
new Promise(function (resolve) {
    console.log('5'); 
    resolve();
}).then(function () {
    console.log('6'); 
});

// 宏任务 setTimeout
setTimeout(function () {
    console.log('7');//
    new Promise(function (resolve) {
        console.log('8');//
        resolve();
    }).then(function () {
        console.log('9');//
    });
})
/1 5 6 2 3 7 8 4 9
2.浅拷贝，深拷贝

浅拷贝和深拷贝一般是对于 引用类型值（如对象）来讲的，而基本类型值（如undefined、null、number、string、boolean以及es6新增的Symbol），只要是复制，就一定是另开辟存储空间！
基本数据类型：名值都存在 栈内存 中

引用数据类型：名存在 栈内存 中，值存在于 堆内存 中，栈内存提供地址指向堆内存中的值

(1) 实现深拷贝: 用递归实现
function deepClone(obj){
        let objClone = Array.isArray(obj)?[]:{};
        for(let i in obj){
            objClone[i] = obj[i];
        }
        return objClone;
    }
    var a = [0,1,2,[3,4],5];
    var b = deepClone(a);

    var b = JSON.parse(JSON.stringify(a));
(2) 实现深拷贝: 用JSON实现
var b = JSON.parse(JSON.stringify(a));
3.模板字符串 ~ 和 '' 的区别，里面是否可以用$引用变量

const a = 'xxx';
`a=${a}`

4.object.prototype.tostring.call() 返回数据类型原理
1.判断基本类型：

Object.prototype.toString.call(null);//”[object Null]”
Object.prototype.toString.call(undefined);//”[object Undefined]”
Object.prototype.toString.call(“abc”);//”[object String]”
Object.prototype.toString.call(123);//”[object Number]”
Object.prototype.toString.call(true);//”[object Boolean]”

2.判断引用类型：

Function fn(){console.log(“test”);}
Object.prototype.toString.call(fn);//”[object Function]”

var date = new Date();
Object.prototype.toString.call(date);//”[object Date]”

var arr = [1,2,3];
Object.prototype.toString.call(arr);//”[object Array]”

var reg = /[hbc]at/gi;
Object.prototype.toString.call(arr);//”[object RegExp]”

var person = new Person("Rose", 18);
Object.prototype.toString.call(person); //”[object Object]”
很明显这种方法不能准确判断person是Person类的实例，而只能用instanceof 操作符来进行判断：
console.log(person instanceof Person);//输出结果为true

3.判断JSON对象：

var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON);
console.log(isNativeJSON);//输出结果为”[object JSON]”说明JSON是原生的，否则不是
5.防抖节流（应用场景区分不开，日常记混）

防抖：短时间内连续触发的事件，在某个时间期限内，事件处理函数只执行一次
节流：短时间内连续触发的事件，执行一次后，一段时间内不再执行
搜索输入 / 滚动条监听 / 页面resize

防抖：

节流：

浅谈js防抖和节流 https://segmentfault.com/a/1190000018428170

6.css正方形自适应（width：50%，padding-bottom：50%）

padding-bottom的属性值百分比是按照 父容器的宽度 来计算的
这里设置容器宽度为父容器的50%；padding-bottom也为50%；长宽就都是父容器宽度的50%

7.客户端发出请求到接到回应，期间浏览器做了什么

当我们在浏览器中输入一个URL后，发生了什么？
https://segmentfault.com/a/1190000015725567?utm_source=tag-newest
浏览器解析并查询缓存、进行DNS查询、建立连接（TCP三次握手）、发送HTTP请求、服务器响应、客户端接收到页面并进行页面渲染
页面渲染过程：构建渲染树（DOM/CSSOM）、布局、绘制、合成

8.csrf（xsrf）/xss/sql

XSS攻击，SQL注入攻击，CSRF攻击入门：https://blog.csdn.net/chen_victor/article/details/78992463
eggjs web安全：https://eggjs.org/zh-cn/core/security.html

xss攻击：跨站脚本攻击，Web页面或URL中插入恶意Script代码，用户浏览时，嵌入的Script代码会被执行
sql注入：把SQL命令插入到Web表单提交，得到存在安全漏洞的数据库
区分xss/csrf：xss利用站点内的信任用户，csrf则通过伪装来自受信任用户的请求（更危险）

10..leiming+div 和 .leiming>div 的区别

子元素选择器 >
相邻兄弟选择器+

11.如何对网站的文件和资源进行优化？

文件合并、压缩 / 使用 CDN缓存托管

12.script 放在 body 封闭之前和封闭之后的区别

放在body的封闭之前，会阻塞其他资源的加载
放在body封闭之后，不会影响body内元素的加载

13.Ajax和jsonp的原理？跨域？（JSONP和Ajax没有任何关系）

1.Ajax（asynchronous javascript and xml）

Ajax基于浏览器内置的 XMLHttpRequest(标准浏览器) 、 ActiveXObject(IE 浏览器) 与服务器进行异步通信

使用 open 方法与服务器建立连接
使用 send 方法向服务器发送数据
使用 onreadystatechange 方法监听服务器响应的回调
使用 responseText / responseXML 获取服务器响应的数据

2.JSONP

服务器不允许 ajax 跨域接收数据，但可以跨域获得文件内容
动态创建 <script> 向服务器发送请求，引入外部js文件，此文件内容是函数调用
服务器需要返回一段JS脚本（函数）给客户端，客户端在页面中定义回调函数，处理服务器返回的数据
为此，服务器应该设置响应头为 application/javascript

14.web storage 和 cookie 的区别

Cookies:服务器和客户端都可以访问，大小4kb，有有效期，过期删除
localstorage：只有本地浏览器可以访问，服务器不能访问，除非主动删除，否则永不过期
sessionStorage：同一会话才能访问数据，会话结束就销毁，会话级别存储
每次请求新的页面Cookie都会被发送过去，浪费带宽，cookie还需要指定作用域，不可以跨域调用
Web Storage拥有setItem,getItem,removeItem,clear等方法，cookie需要自己封装setCookie，getCookie
cookie作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage是为了本地“存储”数据而生

15.cookie 和 session 的区别

cookie 数据放在客户的浏览器上，session 数据放在服务器上
cookie 不是很安全，考虑到安全，应当使用 session
session 会在一定时间内保存在服务器上，考虑减轻服务器性能，应当使用 cookie
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个 cookie

17.promise的精髓，以及优缺点

18.如何解决跨域问题

19.vue, react, angular三大框架的基础和扩展知识