前端知识点归纳-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38824257/article/details/105596874

ES6相关

箭头函数的作用
最主要的目的就是解决this指针的问题。箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
箭头函数有几个使用注意点：
（1）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（3）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
Generator函数
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
https://es6.ruanyifeng.com/#docs/generator
async await的用法
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。
https://es6.ruanyifeng.com/#docs/async
promise的用法
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
https://es6.ruanyifeng.com/#docs/promise

javascript相关

js的异步操作
https://blog.youkuaiyun.com/qq_22855325/article/details/72958345
原型和原型链
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
闭包
函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
如何改变this指向
默认情况下this指向window。
我们可以使用bind方法改变this指向。
也可以使用call和apply改变，call和apply的区别是传递的参数形式不一样。
bind和call、apply，bind只改变this指向不会调用方法，call和apply在改变this指向的同时调用方法。
可以定义一个变量that做临时保存。
可以使用箭头函数。
对象和数组的常用方法，json字符串和js对象之间的转换
（1）for in与for of。
for in用于遍历对象属性
for in遍历数组的缺点。
1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。
所以for in更适合遍历对象，不要使用for in遍历数组。

for of遍历的只是数组内的元素（注意遍历的是元素而且是属性值），而不包括数组的原型属性。for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句。
for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法。

（2）json字符串和js对象之间的转换
json字符串转换为js对象：let obj = JSON.parse(str);
json对象转换为json字符串：let str= JSON.stringify(obj);

（3）slice与splice方法
slice可以用来从数组提取指定元素。该方法不会改变元素数组，而是将截取到的元素封装到一个新的数组中返回。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
正则表达式

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
Iterator接口
https://es6.ruanyifeng.com/#docs/iterator
设计模式
https://www.cnblogs.com/imwtr/p/9451129.html
布尔值Boolean
1.false、0、空字符串（""）、NaN、null 和 undefined 被转换为 false
2.所有其他值被转换为 true
==与===的区别
==在比较不同类型的值时，会进行强制类型转换。比如：
123 == “123” // true
1 == true; // true
===比较前不进行自动类型转换
1 === true; //false
123 === “123”; // false

css相关

一些面试题
https://blog.youkuaiyun.com/u014697639/article/details/80311559
css选择器
https://www.jianshu.com/p/1d6efea3db1c
BFC
https://blog.youkuaiyun.com/sinat_36422236/article/details/88763187

html5

浏览器

同源策略
https://wangdoc.com/javascript/bom/same-origin.html

什么是同源？
协议相同 && 域名相同 && 端口相同。

目前，如果非同源，共有三种行为受到限制。
（1）无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
（2）无法接触非同源网页的 DOM。
（3）无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。

有三种方法可以规避同源策略。
JSONP && WebSocket && CORS
浏览器存储方案
Cookie && LocalStorage && IndexedDB
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
IndexedDB ：https://wangdoc.com/javascript/bom/indexeddb.html