前端常见问题

1.js常见的数据类型
基本数据类型
Number、String、Boolean、Null、Undefined、Symbol、bigInt
引用数据类型
object、Array、Date、Function、RegExp

2.js变量和函数声明的提升
在js中变量和函数的声明会提升到最顶部执行
函数的提升高于变量的提升
函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。
匿名函数不会提升。（没有定义函数名称的函数叫匿名函数）

3.闭包是什么？
闭包就是能够读取其他函数内部变量的函数
闭包基本上就是一个函数内部返回一个函数
好处
（1）可以读取函数内部的变量
（2）将变量始终保持在内存中
（3）可以封装对象的私有属性和私有方法
坏处
（1）比较耗费内存、使用不当会造成内存溢出的问题
写法：

4.this，什么this？为什么要改变this指向？改变this指向的方法都有哪些？
this：表示当前对象的一个引用。
this的指向：this不是固定不变的，是根据调用的上下文（执行时环境）改变而改变。
如果单独使用，this 表示全局对象。
在方法中，this 表示该方法所属的对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
严格模式下，函数中的this为undefined；
1）在全局作用域下直接调用函数，this指向window
2）对象函数调用，哪个对象调用就指向哪个对象
3）new实例化对象，构造函数中的this指向实例对象
4）事件中的this在HTML事件句柄中，this指向了接收事件的HTML元素
call() 方法
call() 方法的第一个参数必须是指定的对象，然后方法的原参数，挨个放在后面。
（1）第一个参数：传入该函数this执行的对象，传入什么强制指向什么；
（2）第二个参数开始：将原函数的参数往后顺延一位
apply() 方法
apply() 方法的第一个参数是指定的对象，方法的原参数，统一放在第二个数组参数中。
（1）第一个参数：传入该函数this执行的对象，传入什么强制指向什么；
（2）第二个参数开始：将原函数的参数放在一个数组中
bind() 方法
bind() 方法的用法和call()一样，直接运行方法，需要注意的是：bind返回新的方法，需要重新调用

5.map与forEach的区别
forEach 方法，是最基本的方法，就是遍历与循环，默认有 3 个传参：分别是遍历的数组内
容 item、数组索引 index、和当前遍历数组 Array
map 方法，基本用法与 forEach 一致，但是不同的，它会返回一个新的数组，所以 callback
需要有 return 值，如果没有，会返回 undefined

6.箭头函数与普通函数的区别?
函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象
不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误
不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替
不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

7.同源策略
同源指的是域名、协议、端口号相同

8.严格模式的限制
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用 with 语句
禁止 this 指向全局对象

9.es6新增
新增模板字符串
箭头函数
for-of（用来遍历数据—例如数组中的值。）
ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象。
增加了 let 和 const 命令，用来声明变量。
还有就是引入 module 模块的概念

10.数组(array)方法
map : 遍历数组，返回回调返回值组成的新数组
forEach : 无法 break ，可以用 try/catch 中 throw new Error 来停止
filter : 过滤
some : 有一项返回 true ，则整体为 true
every : 有一项返回 false ，则整体为 false
join : 通过指定连接符生成字符串
push / pop : 末尾推入和弹出，改变原数组， 返回推入/弹出项
unshift / shift : 头部推入和弹出，改变原数组，返回操作项
sort(fn) / reverse : 排序与反转，改变原数组
concat : 连接数组，不影响原数组， 浅拷贝
slice(start, end) : 返回截断后的新数组，不改变原数组
splice(start,number,value…): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex) : 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 两两执行，
prev 为上次化简函数的return 值，cur 为当前值(从第二项开始)

11.JavaScript 深浅拷贝?
浅拷贝
Object.assign
深拷贝
可以通过 JSON.parse(JSON.stringify(object)) 来解决
深拷贝的弊端:
会抛弃对象的constructor，也就是深复制之后，无论这个对象原本的构造函数是什么，在深复制之后都会变成Object。
另外 诸如 RegExp对象是无法通过这种方式深复制的。

12.什么是原型、原型链、继承？
所有的函数都有prototype属性（原型）
所有的对象都有__proto__属性
在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，
而由这个函数创建的对象也有一个proto属性指向这个原型，
而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，
这样逐层深入直到Object对象的原型，这样就形成了原型链

13.vue组件通信
父传子: props
子传父:$emit KaTeX parse error: Expected '}', got 'EOF' at end of input: … Vue.prototype.bus = new Bus()
}
export default { install };
第二步：在main.js中引入vueBus
// main.js
import vueBus from ‘@/utils/vueBus’;
Vue.use(vueBus);
第三步：在.vue文件中使用 $busB页面——A页面，B向A传递事件1.在B页面发送，在方法中$emit发送监听事件，并改变值
// this.$bus.$emit(‘事件名称’, 值)
this.$bus.$emit(‘updateShowSide’, false)
2. 在A页面 接收后，销毁事件，mounted中 $on接收数据，destroyed中$off销毁监听事件
mounted() {
this.$bus.$on(‘updateShowSide’, data => {
this.showSide = data
})
},
销毁
destroyed() {
this.$bus.$off(“updateShowSide”);
},
14.的作用是什么？
主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面

15.为什么用key？
给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速。

16.$nextTick的使用?在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面

17.vue组件中data为什么必须是一个函数？
因为javaScript的特性所导致，在component中，
data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都 有自己私有的数据空间，他们值负责各自维护数据，不会造成混乱。而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改。

18.vue在双向数据绑定是如何实现的？
vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，
也就是说数据和视图同步，数据发生变化，视图跟着变化，
视图变化，数据也随之发生改变
核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法

19.delete和Vue.delete删除数组的区别？
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。

20.Computed和Watch的区别?
computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,
只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是观察的作用,无缓存性,
类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。