2019-07-27|2019-07-27 前端面试题
1.js的基础类型
js的基础类型包括Undefined , Null , String ，Number , Boolean.五种2.js的引用类型
基础数据类型的变量直接按值存放的，是存放在栈中，可以直接被访问。
js的引用类型包括：Function , Object ,两种。3.js的原型链是什么？
存放在堆内存中的对象，变量保存的是一个指针，这个指针指向另一个位置当需要访问引用类型（如对象，数组等）的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需要的数据。
当创建一个构造函数，就会产生一个原型，所谓的原型链就是，当一个查找一个函数的属性或者方法的时候，会先在当前的函数中进行查找，如果没有查找到，就继续向上一级的原型中查找，当原型中没有的话，就继续在原型中的原型中进行查找，直到找到属性或者方法为止，或者知道查找到最上一级的Object.prototype中返回值null为止。一级一级的查找就像一个链条，所以叫原型链4.除了原型链的继承，你还知道其他的继承方法吗
原型继承
文章图片
代码实例
打印结果：
文章图片
打印结果
child通过指针__proto__指向其原型对象（其原型对象又指向他的原型对象），其原型对象分为两部分，从构造函数中即成的实例属性color,和从原型对象中继承的。
补充：原型对象的构造函数是函数本身，因此每个构造函数的prototype对象可以看作一个实例化对象。
优点：可以继承构造函数的属性，也可继承原型属性。
缺点：
1.首先属性值为引用类型值的原型属性被修改后可能会影响到所有的实例，而该种继承方式中，构造函数中的属性会继承到子类型，成为子类的原型对象的属性。（这也是为什么要在构造函数中定义属性，在原型中定义公共方法）
2.在创建子类的实例时，不能向父类的构造函数中传递参数。
二，借用构造函数
文章图片
实例代码
文章图片
打印结果
优点：避免了原型继承中的两个缺点，可以向父类传参，且不会造成原型属性共享的问题（因为父类构造函数中的属性继承到子类构造函数中，而非原型对象中）。5.深拷贝和浅拷贝有什么区别
缺点：不能继承原型属性，无法实现函数复用，所有方法都只能放在构造函数中。
三，组合继承
四，原型链式继承
五，寄生式继承
六，寄生组合式继承
js存储对象都是存地址的，所以浅拷贝只是会拷贝带栈中的指针地址，比如obj1 和obj2，obj2对obj1进行浅拷贝，拷贝完之后，两者是指向同一个内存地址的，所以，当一方的的内存上进行了修改，就会影响另一方。6.es6中的Map和Set
深拷贝不光是拷贝了指针地址，同事在内存中开辟一个新的内存，所以两者指针指向不同的内存地址，也就是说，一方改变的时候，不会影响另一方
1浅拷贝实现：1.简单的引用复制
var arr1 = [1,2,3]; var arr2 = arr1[];
2.Object.assign(); 此方法可以吧任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。Object.assign()会跳过那些值为null或undefined的源对象
var x = { a: 1, b: { f: { g: 1 } }, c: [ 1, 2, 3 ]}; var y = Object.assign({}, x); console.log(y.b.f === x.b.f); // true
2.深拷贝的实现：
2.1.Array的slice和concat
2.2.Json对象的parse和stringifyparse将JSON字符串反序列化成JS对象，
Map对象保存键值对。
Map的属性：
（1）size：返回Map对象所包含的键值对的个数
Map对象的方法：
（1）set(key,val); 添加新元素
（2）get(key); 通过键值查找特定的数值并返回
（3）has(key); 判断Map对象中是否含有Key所对象的值
（4）delete(key)；通过key删除对应的数值
（5）clear(); 将Map中所有的元素都删除
遍历方法：
（1）keys(); 返回键名
（2）values(); 返回键值
（3）entries(); 返回键值对// for (let [key, value] of map.entries()) {
console.log(key, value)
}
（4）forEach(); 使用回调函数遍历每个成员
2。Set
Set对象允许存储任何类型的值，无论是原始值或者是对象引用。类似与数组，但是成员的值都是唯一的，没有重复的值
特殊值：+0-0和undefined和NaN
Set实例对象的属性
（1）size:返回Set实例的成员总数。
Set实例对象的方法
（1）add(value); 添加值，返回set结构本身
（2）delete(value)；删除某个值，成功返回true,否则发了
（3）has(value); 判断是否包含这个值，返回bool类型
（4）clear(); 清除所有成员，无返回值
const mySet = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(mySet) // {'a', 'b', 1, 2}
myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(mySet.size) // 6
mySet.has(2) // true
遍历方法(由于Set结构没有键名只有键值，所以keys方法和value方法行为完全一致)
（1）keys();
（2）values();
（3）entries();
（4）forEach();
【2019-07-27|2019-07-27 前端面试题】Set对象作用6.vue的几种指令
（1）数组去重（利用扩展运算符）
（2）合并两个Set对象
let a= new Set([1,2,3]); let b = new Set([2,3,4])
let union = new Set([...a,...b])//【1，2，3，4】
（3）交集
let a= new Set([1，2，3])let b = new Set([2，3，4])
let intersect = new Set([...a].filter(x=>b.has(x))); //{2，3}
（4）差集
let a = new Set([1，2，3])；let b = new Set([2，3，4])
let difference = new Set([...a].filter(x=>!b.has(x)))//{1}
v-ifv-showv-onv-bind7.v-show和v-if有什么区别
v-show是 dispaly属性的 none和block来控制的。其实一直是存在在DOM元素里的8.你还知道其他的几种dom元素的隐藏方式吗 9.vue路由的replace和push有什么区别
v-if 是不存在 当条件不成立的时候在DOM元素里边的，条件成立才会在DOM树里
push是以压栈的方式一直往里存，这个方法会像history中添加一个新的记录，当用户点击浏览器后退按钮是，则回到之前的url.10.说一下vuex
replace 是将history里的上一条记录直接替换掉，导航不会留下history记录，点击浏览器的后退按钮不会反悔上一页。
vuex是一个专门为vue.js开发的状态管理模式，集中管理存储所有组件的公共状态，以相应的规则保证状态以一种可预测的方式发生变化。11.mutation 为什么是同步的，知道原理吗
vuex包括state ,geeter, mutation , action .
state:Vuex的公共状态，所有组件的公共数据
getters:可理解为所有组件的comouted属性，也就是计算属性。getters的返回值会根据它的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算
mutation:可理解为store的methods.这个只能是同步的
action :类似于mutation，不同在于，action提交的是mutation而不是直接变更状态。action中包含异步操作，mutation绝不允许出现异步操作
Modules:vuex允许我们将store分割成模块。每个模块拥有state getteractionmutation.
之所以通过提交mutation的方式来改变状态数据，是因为想要更明确的追踪到状态的变化。所以必须是异步12.如何进行web前端性能优化
1.减少HTTP请求的次数；13.缓存有几种方式 14.浏览器的两种什么缓存是什么 15.了解webpack吗?说一下loader有哪几个？渲染vue页面的html的是哪个loader?
资源大小很重要，不仅关系到下载时间，还因为IPv4和IPv6协议规定一个IP包的最大只为65535字节，一个包是一次请求。 得到一个等式：服务器发送全部负载的响应次数=页面大小的总字节数除以IP包的字节数。我们可控制资源尽可能小，可采取使用Gulp等自动化构建工具进行自动合并js文件，压缩文件和图片等手段。2，避免重定向，重定向说明客户端采取进一步操作才能完成请求，，请求时间就会延长，所以，输入URL时应该使用最完整的最直接的地址，比如www.baidu.com而不是baidu.com
2,图片懒加载
页面图有很多的时候，可以使用懒加载，只加载第一屏的图片，当用户滚动是访问后边的内容的时在加载相应的图片。 方法是先用一张极小的占位图代替图片，占位图值下载一下，将原本图片的src存储在另一个属性里，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。
3.代码优化
1）页面结构，css放在HTML内容的上部，js放在HTML内容得下部。可以使用preload提前解析资源的DNS.由于浏览器是自上而下读取内容的，因为放置资源的位置会影响网站的访问速度。2）javascript优化：比如减少DOM的操作，减少重拍和重绘，减少作用域链查找，慎用eval函数等。3）css优化：比如减少使用通配符，提取公共样式增强可复用性选择器准确可减少匹配时间，适度使用内联样式。
webpack可以看作是模块打包机：她做的事情就是分析你的项目结构 ，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言，并将其转换和大宝成为核实的格式工浏览器使用。16.了解网络协议吗，网络协议有几层？http在第几次，tcp在第几层？ 网络体系结构分层 OSI七层模型。TCP/IP概念层模型四层。
常用的loader有以下几个：
css-loader,style-loaderimage-loaderfile-loadersass-loaderless-loaderbabel-loaderjsx-loaderraw-loader(处理html文件)url-loadereslint-loader
文章图片
网络分层 2.利用TCP/IP协议进行网路通信，会通过分层顺序与对方进行通信
文章图片
TCP/IP通信传输流 17.简述一下你理解的面相对象
万物皆对象，把一个对象抽象成雷，具体就是把一个对象的静态特征和的动态特征抽象成属性和方法，也就是把一类事物的算法和数据封装在一个类之中，程序就是多个对象和互相之间的通信组成的18.jq有几种选择器，分别是什么？
对象具有，继承性，多态性，和封装性。
封装：隐蔽了对象内部不需要暴露的细节，使得内部细节的变动跟外界脱离，只依靠借口进行通信。封装性降低了编程的复杂性，通过继承，使得新建一个类变得很容易，一个类从派生类哪里获得其非私有的方法和工友属性的繁琐工作交给了编译器，而继承和实现接口和运行时的类型绑定机制所产生的多态，使得不同的类所产生的对象能都对相同的消息做出不同的反应，极大提高代码的通用性。
19.什么是冒泡排序
20.数组去重（indexof<0）（set-->es6新特性，数据不重复）（双循环）
21.统计字符串中字母个数并统计最多字母数
布局中，造成盒子margin塌陷的原因是什么，怎么解决？
父元素包裹着子元素 *（都是块级元素），给子元素设置margin-top时，子元素没有位移，反而父元素位移了。给父元素加border父元素加浮动佛于是怒设置display：table
父元素 position:fixed子元素 dispaly:inline-block
层叠选择器，基本过滤选择器，内容过滤选择器，可视化过滤选择器，属性过滤选择器，子元素过滤选择器，表单元素过滤器，表单元素过滤选择器。
