这是博主自己整理的一些前端所需要掌握的知识点，若有错，请评论指出。觉得博主需要补充的也可以留言哦，另外，我记录的有一些比较精简，在你没有学ES6之前，可能有一些看的有点懵哦。

文章目录

1.引用类型和基本类型
2.JavaScript中的堆和栈
3.var与let、const的区别
4.JavaScript 严格模式(use strict)
5.严格模式的限制
6.JavaScript this 关键字
7.箭头函数（注意点）
8.解构赋值（注意点）
9.Set 和 Map 数据结构
10.Proxy
11.promise
12.new一个对象的过程
13.常见的不支持冒泡事件
14.说几个如何解决跨域的问题
- （1）CORS（跨域资源共享）
- （2）图像ping
- （3）jsonp
- （4）Web Sockets
- （5）fetch()
15.ajax的两个属性
16.get和post区别
17.说一说seo（搜索引擎优化）

1.引用类型和基本类型

js中的数据类型有以下几种：

Number Boolean undefined Object String Null ；（es6：Symbol）（es2020：bigInt）

基本类型：Number Boolean String undefined null

引用类型：Object Function Array（说到底都是Object ）

基本类型的数据是存放在栈内存中的，而引用类型的数据是存放在堆内存中的

2.JavaScript中的堆和栈

栈(stack): 由操作系统自动分配内存空间，自动释放，存储的是基础变量以及一些对象的引用变量，占据固定大小的空间。
堆(heap)：由操作系统动态分配的内存，大小不定也不会自动释放，一般由程序员分配释放，也可由垃圾回收机制回收
javascript的基本类型就5种:Undefined、Null、Boolean、Number和String，它们都是直接按值存储在栈中的，每种类型的数据占用的内存空间的大小是确定的，并由系统自动分配和自动释放。
javascript中其他类型的数据被称为引用类型的数据 : 如对象(Object)、数组(Array)、函数(Function) …，它们是通过拷贝和new出来的，这样的数据存储于堆中。其实，说存储于堆中，也不太准确，因为，引用类型的数据的地址指针是存储于栈中的，当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址指针，然后，在通过地址指针找到堆中的所需要的数据。参考博客

3.var与let、const的区别

什么是变量提升？
JavaScript 中（es6之前），函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中（es6之前），变量可以在使用后声明，也就是变量可以先使用再声明。

var声明变量存在变量提升，let和const不存在变量提升

当然，提升是提升声明，并不意味着赋值,理解下列代码：

function fn() {//var aif (true) {console.log(a + ' now')}else {var a = 1console.log(2)}
}fn() // a -> undefined

let、const都是块级局部变量

{let a = 1
}
console.log(a) // undefined

4.JavaScript 严格模式(use strict)

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

5.严格模式的限制

不允许使用未声明的变量，对象也是一个变量
不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
禁止this关键字指向全局对象

function f(){return !this;
}
// 返回false，因为"this"指向全局对象，"!this"就是falsefunction f(){ "use strict";return !this;
}
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

保留了一些关键字

为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字，

implements，interface，let，package，private，protected，public，static，yield

“use strict” 指令只允许出现在脚本或函数的开头。

6.JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

7.箭头函数（注意点）

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

8.解构赋值（注意点）

解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

例子：

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

9.Set 和 Map 数据结构

set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
weakset
- WeakSet 的成员只能是对象，而不能是其他类型的值。
- WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
map

值—值对应的关系。“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键

如果 Map 的键是简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键
weakmap

WeakMap与Map的区别有两点：
- 首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
- 其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。
注意：WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

10.Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

this 问题：

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

例子：
```
const target = {m: function () {console.log(this === proxy);}
};
const handler = {};const proxy = new Proxy(target, handler);target.m() // false
proxy.m()  // true
```

11.promise

Promise 是异步编程的一种解决方案，Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

局限性：

首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。
其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

12.new一个对象的过程

创建一个新对象
this指向这个新对象
执行构造函数里面的代码
返回新对象

13.常见的不支持冒泡事件

①focus
②blur
③mouseenter
④mouseleave
⑤load
⑥unload
⑦resize

14.说几个如何解决跨域的问题

（1）CORS（跨域资源共享）

基本思维就是使用自定义的http头部让浏览器和服务器沟通，从而决定请求或者响应是否成功。比如再头部添加Origin，包含协议域名端口号。

（2）图像ping

我们知道一个网站加载图片，不用担心跨域问题，使用img标签，利用onload和onerror方法进行相应的处理。

（3）jsonp

通过动态的script元素，使用时，为src设置指定为跨域url。但是因为是其他域加载的代码，所以在确保跨域的服务器是安全的情况下，才建议使用。

（4）Web Sockets

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 属性readyState：

0 - 表示连接尚未建立（正在连接）。
1 - 表示建立连接。
2 - 表示连接正在进行关闭。
3 - 表示连接关闭。

（5）fetch()

Fetch 的核心在于对 HTTP 接口的抽象，除此之外，它是基于 Promise 的。

fetch()**可以接受跨域 cookies；**你也可以使用fetch()建立起跨域会话。其他网站的Set-Cookie` 头部字段将会被无视。
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

15.ajax的两个属性

readyState:

0: 请求未初始化（未调用open()方法）
1: 服务器连接已建立（已调用open()方法）（未调用send()方法）
2: 请求已接收（已调用send()方法）
3: 请求处理中
4: 完成

status:

200: “OK”
404: 未找到页面

document.style操作的是行间样式，无论读还是写

16.get和post区别

GET产生一个TCP数据包；POST产生两个TCP数据包。并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET是表单提交的默认方法。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET的参数放在url中的吗，然而post是放在请求体中的。

17.说一说seo（搜索引擎优化）

对于自身网页而言：

网页头部添加TDK，即 title、description、keywords 这三个标签。
使用语义化的标签。如main,article,header,footer,nav,aside,section,time,mark,video,audio等。符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
重要的内容不要放在js代码中，搜索引擎不会爬取js代码。
提高网站性能（又会涉及到很多，见18点）。

其他的一些方面：

使用https协议–安全小绿锁。
网址静态化，短网址，伪静态。
增加网站外链。
全站地图sitemap，即告诉搜索引擎怎么爬取你的网站。
以百度为例，主动提交百度收录，添加robots机器人（其实也就是一个txt文件，告诉百度引擎想让他爬什么，不能爬什么。）

2020年最新前端面试题（包含ES6+）相关推荐

最新前端面试题整理和答案（全）一直更新
最新前端面试题整理和答案(全) 参考地址:https://blog.csdn.net/wdlhao/article/details/79079660 javascript: JavaScript中如何 ...
2022 最新前端面试题汇总
VUE面试题 1.v-show 和 v-if的区别,v-show 和 keep-alive 的区别答案: v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁,而 ...
2022最新前端面试题（vue方向）
前言:又到了跳槽旺季,经过几天的收集,整理出了2022年后最新的面试题及答案,坐标武汉,期望薪资15k+的.持续更新,也欢迎各位大佬的评论区补充 1.vue的运行机制 1.初始化调用vue原型上的_ ...
2020年Web前端面试题及答案----ES6篇
前言失踪博主终于找回自己的账号密码了0V0,这次给大家带来的是Es6的一些的面试问题,不知道看过前面文章的小伙伴们有没有找到心仪的工作呢? ES6添加了一系列新的语言特性,其中一些特性比其它更具有开 ...
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
一阶段面试题: CSS浮动怎么理解的浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,也就是脱离文档流,所以文档的普通流中的块框表现得就像 ...
2021年最新前端面试题（js,vue,webpack,css,react）总结
欢迎大家留言补充面试题,或更改我的题目错误,我会根据大家意见给补充上,谢谢! 这边文章主要是最近面试加上同事的面试总结出来的,包含了大多数公司的面试题目,有些答案有出入,请多多包涵,欢迎留言一起探讨. ...
2022年最新前端面试题、高频面试题、面试题总结
文章目录 html面试题 js面试题 css面试题 vue面试题 react面试题浏览器.项目优化.等其他类型高频面试题 html面试题 Doctype 作用声明文档类型 HTML5 新增的内容有 ...
2023年最新前端面试题
HTML 一.HTML5标记 <header></header> 头标记<nav></nav> 导航标记,表示页面中导航链接部分<!--main标 ...
2022年最新前端面试题，持续更新
[js面试题] 1.js数据类型基本数据类型 Number.String.Boolean.Null.Undefined.Symbol.bigInt 引用数据类型 object.Array.Date. ...

2020年最新前端面试题（包含ES6+）