前端笔记（一）

一、原型 原型链

a.所有的引用类型都有隐形原型（__proto__）;
b.所有的函数都有原型（prototype）;
c.所有的引用类型的隐形原型（__proto__）属性执行它的构造函数的原型（prototype）;
d.当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

二、数组/string 方法

1、数组

a、对原数据产生影响：
	push（最后面，添加数据）,返回数组长度
	pop（最后面，删除数据），返回删除数据
	unshift（最前面,添加数据），返回数组长度
	shift（最前面,删除数据），返回删除数据
	reserse（翻转数组），返回翻转后数据
	sort（排序），返回排序后数据
	splice（删除数据），删除后数据
b、对原数据不产生影响：
	concat（数据拼接）
	slice（数据截取）
	join（串联数据），返回字符串
	indexOf（查找的元素在数组中的位置）
	includes（查找数组是否包含元素）
	find（查找数组元素），返回第一个匹配数据
	some（对数组每一项都运行传入的函数，如果有一项函数返回 true）
	every（对数组每一项都运行传入的函数，如果对每一项函数都返回 true）
	forEach（对数组每一项都运行传入的函数，没有返回值）
	map（对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组）
	filter（对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回）
	reduce（累加器，累加计算），返回新数据

2、string:

length()：计算字符串长度
indexOf()：返回指定字符的索引
charAt()：返回指定索引处的字符
replace()：字符串替换
trim()：去除字符串两端空白
split()：分割字符串，返回一个分割后的字符串数组
toLowerCase()：将字符串转成小写字母
toUpperCase()：将字符串转成大写字符
substring()：截取字符串
equals()：字符串比较

三、写防抖节流

1、防抖 ：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

let time = 0
function throttle(){
    let_currentTime = new Date().getTime();
    if(_currentTime - time > 1000) {
        console.log('throttle')
    }
    time = new Date().getTime();
}

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

let time = 0
function throttle(){
    let _currentTime = new Date().getTime();
    if(_currentTime - time > 1000) {
        console.log('throttle: 节流')
        time = new Date().getTime();
    }
}

四、bind、call、apply 区别

三者皆是修改this指向

call(thisArg, arg1, arg2, ...)

apply(thisArg, [arg1, arg2, ...])

bind(thisArg, arg1, arg2, ...)()

五、Vue生命周期

vue2:

beforeCreate/created；
beforeMount/mounted；
beforeUpdate/updated；
beforeDestory/destroyed

vue3:

beforeDestory/destroyed变为beforeDestory/destroyed

六、Vue中key的作用，以及不推荐使用index作为key的理由

key的作用：高效的更新虚拟DOM
index作为key时，容易在增删改数据时，index发生变化，影响所有元素key的变化

七、 Vue常用的事件修饰符

.stop  		阻止单击事件继续传播
.prevent  	提交事件不再重载页面
.captre  	加事件监听器时使用事件捕获模式.即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self  		只当在 event.target 是当前元素自身时触发处理函数
.once  		点击事件将只会触发一次
.passive	滚动事件的默认行为 (即滚动行为) 将会立即触发

八、vue-router路由模式

1.hash:

使用 URL hash 值来作路由, hash值只是客户端的一种状态，location.hash 的值就是 URL 中 # 后面的内容；
hash值变化会在浏览器的访问历史中添加一个记录，因此能通过浏览器的前进/后退进行hash切换；
能通过hashchange监听hash变化，从而进行页面渲染。

2.history:

依赖 HTML5 History API 和服务器配置，history.pushState()和history.replaceState()；
其中api可以在不进行刷新的时候，操作浏览器的历史记录；
history.pushState()：新增一个历史记录，window.history.pushState(null, null, path); 
history.replaceState()：替换当前历史记录，window.history.replaceState(null, null, path); 
使用 popstate  事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）；
跳转新 URL 可以是与当前 URL 同源的任意 URL。

3.abstract

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

九、浏览器运行机制

1、创建DOM树
2、构建渲染树，CSS渲染
3、布局渲染，每个元素的大小、位置
4、绘制渲染树、再画出来
重绘：改变元素的外观属性例如div的color、background-color、等属性发生改变时
重排（回流）：元素的规模尺寸、布局、隐藏改变时
代价：耗时，导致浏览器卡慢

十、浏览器缓存

内存中缓存：优化常见preloader
强缓存：通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
协商缓存：(Last-Modified / If-Modified-Since和Etag / If-None-Match)

十一、 vue-ssr

优点：更好的seo，更快的渲染时间
Demo项目gitHub地址：https://github.com/chenxje/vue-ssr.git

十二、虚拟DOM，算法

diff算法
pach算法

十三、深拷贝

Object.assign()和扩展符(...)，存在问题，如果对象的属性值为简单类型（string，number），通过 Object.assign() 得到的新对象为深拷贝；如果属性值为对象或其他引用类型，那对于这个对象而言其实是浅拷贝的；
JSON.parse(JSON.stringify())，存在问题，不能解析underfined/Sybmol；
$.extend(true, {}, obj1), 缺点，需要引入jquery；
loadsh函数 _.cloneDeep()