js基本数据类型
Number,String,Boolean,null,undefined,object
数组去重
//方法1：es6
let arr = [1, 2, 3, 2, 1, 3];
let newArr=Array.from(new Set(arr))
console.log(newArr)//(3) [1, 2, 3]
//方法2使用filter过滤函数去重。
var arr = [1, 2, 3, 1, 2, 3];
var newArr=arr.filter((v, i, arr) => arr.indexOf(v) === i)
console.log(newArr)//(3) [1, 2, 3]
//方法3：遍历数组法。
function unique(array) {
var n = []; //一个新的临时数组
//遍历当前数组
for (var i = 0; i < array.length; i++) {
if (n.indexOf(array[i]) == -1)
n.push(array[i]);
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
}
return n;
}
console.log(unique([1, 2, 3, 1, 2, 3]))//(3) [1, 2, 3]
数组排序
//从小到大
arr.sort(function(a,b){
return a-b
})
//从大到小
arr.sort(function(a,b){
return b-a
})
//按照其中一个属性值排序
var arr1=[{name:"lee",age:2},{name:"lee",age:32},{name:"lee",age:12},{name:"lee",age:8},{name:"lee",age:52}]
arr1.sort(function(a,b){
if(a.age<b.age){
return -1;
}else if(a.age>b.age){
return 1;
}
return 0;
});
console.log(arr1)
cookie,localStorage,SessionStorage三者的区别
1.大小不同：
cookie 4kb，localStorage,SessionStorage都是5M
2.数据有效期不同：
cookie：一般由服务器生成，可设置失效时间，如果在浏览器端生成，默认是关闭后失效
localStorage：除非被永久清除，否则永久保存。
sessionStorage：仅在当前会话会有效，关闭页面或浏览器后被清除
3.与服务器端通信不同：
Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage 和 sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信
设计模式有哪些
1、js工厂模式
2、js构造函数模式
3、js原型模式
4、构造函数+原型的js混合模式
5、构造函数+原型的动态原型模式
6、观察者模式
7、发布订阅模式
网页从输入网址到渲染完成经历了哪些过程
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器端响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源
- 浏览器对页面进行渲染呈现给用户
MVVM和MVC的区别
MVC和MVVM的区别其实并不大。都是一种设计思想。
主要就是MVC中Controller演变成MVVM中的viewModel。
MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题，当Model频繁发生变化，开发者需要主动更新到View。
ViewModel，是把MVC里的controller的数据加载，加工功能分离出来
最大区别：实现了VIEW和MODEL的自动更新，也就是说，当MODEL的属性发生改变时，我们不再自己手动的操作DOM，而是改变之后的属性对应的VIEW层会自动的发生改变。
vue数据双向绑定原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter，在属性被访问和修改时通知变化。
vue与React区别
1.监听数据变化的实现原理不同
-Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
-React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染
2.数据流的不同
vue数据是双向绑定的
React是单向的
3.组件通信的区别
vue组件间传递消息一般用事件
React组件间传递消息用回调函数
4.模板渲染方式的不同
React 是通过JSX渲染模板
Vue是通过一种拓展的HTML语法进行渲染
说说对原型链的理解
原型链：用于查找引用类型的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。
原型：所有的函数都有一个特殊的属性prototype(原型)，prototype属性是一个指针，指向的是一个对象(原型对象)，原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象，这些对象实例都可以共享构造函数的原型的方法。
闭包概念
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
call和apply区别
接收的第一个参数都是要修改的this指向的对象，接收的第二个参数不同，call( )方法接受的是若干个参数的列表，apply( ) 方法接受的是一个包含多个参数的数组
减少页面加载时间的方法
1.文件拼合，减少http请求。
2.文件压缩：将需要传输的内容压缩后传输到客户端再解压
3.使用CDN
4.使用缓存，避免重复加载同意文件
5.css文件放置在head，js放置在文档尾部
vue的生命周期有哪些
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后
beforeCreate:实例刚被创建,el 和 data 并未初始化,可以在这加个loading事件
created：属性已经绑定，完成了 data 数据的初始化,watch/event事件回调,el还没有
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用，模板编译el,完成了 el 和 data 初始化 ，$el未编译已存在
mounted:此周期dom已经渲染完成
beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程
updated：当这个钩子被调用时，组件DOM已经更新，避免在此期间更改状态
beforeDestroy ：在这还可以访问实例的数据，清除定时器,事件监听等
destroyed
盒模型
标准：margin、border、padding、content，元素的宽度width=content的宽度
IE：margin、border、padding、content，元素的宽度width=border + padding + content
BFC（块格式化上下文）
特性:
1.BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
2.在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
3.BFC 区域不会和 float box 发生重叠。
4.BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
5.盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
创建BFC
1.根元素或包含根元素的元素
2.浮动元素 float ＝ left | right 或 inherit（≠ none）
3.绝对定位元素 position ＝ absolute 或 fixed
4.display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5.overflow ＝ hidden | auto 或 scroll (≠ visible)
为什么rem方式下的根字号要设置成62.5%，有没有更精准的方法
因为设了62.5%后就有1rem = 10px，便于用rem来指定元素的尺寸，这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。用rem定义尺寸的另一个好处是更能适应缩放／浏览器设置字体尺寸等情况（因为rem相对于字体大小，会同步改变）。
vue父子组件传值
父传子
父组件代码：
//子组件html
<Son :m="msg"><Son/>
//父组件data
data(){
return {
msg:"我是父组件要传递的值"
}
}
子组件代码：
<span>{{m}}<span/>
//子组件接收m
props:{
m:String
}
子传父
子组件代码：
//html
<input v-model="sonData" @change="setData"/>
//js
data() {
return {
sonData:"子组件要传递的值"
};
},
methods: {
//子传父
setData(){
this.$emit("msg",this.sonData)
}
}
父组件代码：
//html
<Son @msg="getData"/>
//js
data(){
return{
sonData:'',
}
},
methods:{
getData(data){
this.sonData=data
},
}
子组件调用父组件的方法
方法一：$parent
<child @click="childMethod()"/>
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
方法二：$emit
父组件
<child @father="fatherMethod"></child>//调用
methods: {
fatherMethod() {
console.log('今天是星期天')
}
}
子组件
<button @click="childMethod">点击</button>
methods: {
childMethod() {
this.$emit('father')
}
}
父组件调用子组件的方法
<button @click="clickParent">点击</button>
<child ref="mychild"></child>//mychild是子组件在父组件中的名字
methods: {
clickParent() {
this.$refs.mychild.childMethod("嘿嘿嘿");
}
}
自定义指令
Vue.directive('focus',{
inserted(el) {
el.focus()
}
})
vue-router动态路由
在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id。
vue-router有哪几种导航钩子
1.全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2.组件内的钩子；
3.单独路由独享组件
http状态码
2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，
客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求
http和https区别
http：超文本传输协议，端口80
https：具有安全性的 SSL 加密传输协议，端口443，一般是收费的，安全性更高
网友评论