前端面试题集锦
1.你用过微信小程序那些api？哪些钩子函数？（各五个）
2.微信小程序怎样拿到用户头像和openid？
3.小程序下拉刷新用什么属性？要注意什么？
4.在小程序中父子组件是如何传参的？
5. 数组去重方式(最少三个）
7.js数组或对象的深克隆，描述思路
8.写一个js排序，不用sort方法。（两种思路）
十大排序算法 https://www.cnblogs.com/beli/p/6297741.html
9.vue-router有哪几种导航钩子？
1.全局的钩子
2.单个路由独享的钩子
3.组件级的钩子
10.简述$ nextTick的使用场景和原理？
Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。$ nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$ nextTick，则可以在调整这样一种场景，你有一个jQuery插件，希望在DOM元素中某些属性发生变化之后重新应用该插件，这时候就需要在$ nextTick的回调函数中执行重新应用插件的方法。
11.简述vuex有哪几个模块，存取方式都有哪些？
12.简述vue中procide / inject的使用场景及工作方式
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
13.
14.JS如何判断数字？
15.前端跨域
16.vue的生命周期
17.vue双向绑定的原理
18.callee呼叫者状语从句：的区别
19.active-class是什么？
主动类是VUE路由器模块的路由器连接组件中的属性，用来做选中样式的切换
20.js节点操作
21本地存储的方式
22.浏览器的缓存机制
23.怎样封装VUE组件
24.promise的三个状态
一个承诺可能有三种状态：等待（待定），已完成（满足时），已拒绝（拒绝）
25.弹性盒子，两栏布局，三栏布局
26.未知宽高元素居中
详见https://blog.csdn.net/Web_J/article/details/84592827
27.js事件监听和JQ事件监听的写法
详见https://blog.csdn.net/Web_J/article/details/83900073
28.常见状态码
- 200 - 请求成功
- 301 - 资源（网页等）被永久转移到其它URL
- 404 - 请求的资源（网页等）不存在
- 500 - 内部服务器错误
29.页面渲染触发的事件
页面加载时，大致可以分为以下几个步骤：
- 开始解析HTML文档结构
- 加载外部样式表及的的JavaScript的脚本
- 解析执行的的JavaScript的脚本
- DOM树渲染完成
- 加载未完成的外部资源（如图片）
- 页面加载成功
触发的事件
- document readystatechange事件（ readyState 属性描述了文档的加载状态，在整个加载过程中document.readyState会不断变化，每次变化都会触发readystatechange事件。）
- document DOMContentLoaded事件（DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载.jquery中的ready事件就是同样的效果）
-
window load事件（所有的资源全部加载完成会触发window的加载事件。）
30.DocumentType有什么用？
31.原型链
32.P3P
P3P全称 隐私首选项对话对话平台个人文库个人文库，隐私设定平台规范。这个规范极其复杂，若要讲清楚，天都黑了一半。简言之，就是网站向浏览器声明自己的隐私政策，比如网站是否搜集访问者的个人信息，设置的cookie的用途等等浏览器会依据设置，决定在第三方请求的条件下是否接受网站的cookie的可以参考这篇文章：.https：//www.cnblogs.com / cheney256 / 文章/8942240.html
33.data-是什么？
HTML5中添加了数据 - *的方式来自定义属性，所谓数据 - *实际上上就是数据 - 前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用数据 - *可以解决自定义属性混乱无管理的现状。
34.map和的的的foreach的区别？
35.js如何读取二进制？
36.如何判断数组？
var is_array = (value)=>Object.prototype.toString.apply(value) === '[object Array]'
37.这
38.var / let / const的区别？
39.js桥接
40.如何实现继承？
41.vuex刷新页面后数据状态丢失怎么处理？
42.localStorage和的的的sessionStorage的区别？
-
localStorage的的的生命周期是永久，这意味着除非用户显示在浏览器提供的用户界面上清除的localStorage的的信息，否则这些信息将永远存在。
-
的的sessionStorage的生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过的的sessionStorage的存储的数据也就被清空了。
-
不同浏览器无法共享的localStorage的或的的sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage的的（页面属于相同域名和端口），但是不同页面或标签页间无法共享的的sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个IFRAME标签且他们属于同源页面，那么他们之间是可以共享的的sessionStorage的。
43.向数组制定位置插入一个元素？
使用JavaScript splice（）方法，array.splice（添加/删除的起始位，添加删除的个数（设置为0不会添加/删除），添加的数据（任选））
44.arr = [1,2,3,4]，如何得到arr.fn = [1,2,3,4,1,2,3,4]？
45.杨辉三角的JS实现
function compute(m, n) {
if (n == 0) {
return 1; //每行第一个数为1
} else if (m == n) {
return 1; //最后一个数为1
} else {
//其余都是相加而来
return compute(m - 1, n - 1) + compute(m - 1, n);
}
}
function yanghui(n) {
//杨辉三角,N为行数
for (var i = 0; i < n; i++) {
//一共N行
for (var j = 0; j <= i; j++) {
//每行数字的个数即为行号、例如第1行1个数、第2行2个数
document.write(compute(i, j) + " ");
}
document.write("
");
}
}
yanghui(15)
46.webpack如何分发多页面？
47.sass和less的区别？
48.js实现上拉加载，下拉刷新
49。
const a{
a=1;
b=2
}
a=2;
console.log(a)
50.给100个里绑定点击事件
详见我的另一篇博客：https：//blog.csdn.net/Web_J/article/details/83900073
51.require和进口的区别
1.遵循规范不同
要求是AMD规范引入式，本质是一个赋值的过程，需要的结果赋值给某个变量
进口是ES6的一个语法标准，如果要兼容浏览器，必须转化为ES5的写法就是被转成要求
2.调用时间不同
要求是运行时调用，所以需要可以放在代码的任何地方
进口是编译时调用，所以只能放在文件头部
52.浏览器的同源策略
53.css动画属性参数
54.webpack获取公共代码
的的WebPack内置了专门用于提取多个代码中公共部分的插件CommonsChunkPlugin
55.jQuery中上和绑定有什么区别？
56.Vue中V-if如果和V-show有什么区别？
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
57.怎样实现深浅拷贝？
58.vue插槽的原理及使用场景
59.vue同级组件怎样通信？
60.原型链继承的缺点
61.如何将函数promise？
62.jQuery和zepto的区别
简单来说就是zepto适用于移动端，而jQuery的的的适用于PC端.zepto的体积要比jQuery的的的小很多。区别详细看这篇文章https://blog.csdn.net/ningtt/article/详情/ 75137047
63.什么是函数的抖动和节流？
64.如何判断一个对象是否为空？
https://blog.csdn.net/Web_J/article/details/86476926
65.如何判断对象？
var is_obj = (value)=>Object.prototype.toString.apply(value) === '[object Object]'
66.link和@import的区别
1.从属关系区别@import是CSS提供的语法规则，只有导入样式表的作用，link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，相对连接属性等。
2.加载顺序区别
加载页面时，link标签引入的CSS被同时加载; @import引入的CSS将在页面加载完毕后被加载。
3.兼容性区别@import是CSS2.1才有的语法，故只可在IE5 +才能识别; link标签作为HTML元素，不存在兼容性问题。
4.DOM性可控性，区别
可以通过JS操作DOM，插入link标签来改变样式;由于DOM方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别（该项有争议）link引入的样式权重大于@import引入的样式。
67.清除浮动的方式，优缺点
68.常见浏览器兼容
69 $（“＃ID”）和document.getElemementById（“ID”）有什么区别？
的的的document.getElementById（）返回的是DOM对象，而$（）返回的是jQuery的的的对象（通过jQuery的的的包装DOM对象后产生的对象和jQuery的的对象是jQuery的的的独有的，其可以使用的的jQuery的里的方法）虽然jQuery的的的对象是包装DOM对象后产生的，但是jQuery的的的无法使用DOM对象的任何方法，同理DOM对象也不能使用的的jQuery的里的方法。
1，DOM对象转的jQuery的对象
普通的大教堂对象一般可以通过$（）转换成的jQuery的对象。
如：$（的的document.getElementById（“味精”））
返回的就是jQuery的的对象，可以使用的jQuery的的方法
。2，jQuery的的对象转DOM对象
由于jQuery的的对象本身是一个集合所以如果jQuery的的对象要转换为DOM的对象则必须取出其中的某一项，一般可通过索引取出。
如：$（“ #msg“中”[0]，$（“DIV”）。方程（1）[0]，$（“DIV”）。得到（）[1]，$（“TD”）[5]
70.块级元素和行内元素有什么区别？
71.原生AJAX写法
var Ajax={
get: function(url, fn) {
// XMLHttpRequest对象用于在后台与服务器交换数据
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
// 从服务器获得数据
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
// data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
post: function (url, data, fn) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
// 添加http头，发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
fn.call(this, xhr.responseText);
}
};
xhr.send(data);
}
}72.promise和AJAX结合写法
const ajaxPromise = param => {
return new Promise((resovle, reject) => {
var xhr = new XMLHttpRequest();
xhr.open(param.type || "get", param.url, true);
xhr.send(param.data || null);
xhr.onreadystatechange = () => {
var DONE = 4; // readyState 4 代表已向服务器发送请求
var OK = 200; // status 200 代表服务器返回成功
if(xhr.readyState === DONE){
if(xhr.status === OK){
resovle(JSON.parse(xhr.responseText));
} else{
reject(JSON.parse(xhr.responseText));
}
}
}
})
}
73.toString和的的的valueOf有什么区别？
共同点：在的的JavaScript中，的的toString（）方法和的的valueOf（）方法，在输出对象时会自动调用。
不同点：二者并存的情况下，在数值运算中，优先调用了的的的valueOf，字符串运算中，优先调用了的的的toString。
用法英语谚语详细看这篇文章：HTTPS：//blog.csdn.net/Web_J/article/details/84106129
74.
console.log(a);
var a=10;
console.log(b);
let a=10;
因为var定义的变量有变量提升，所有第一个输出undefind
第二个let定义的变量没有变量提升，所以第二个会报错75.
function print() {
let person1={
name:"小黄"
};
let person2=person1
console.log(person1.name)//小黄
let person3={
name:person1.name
};
person3.name="小张"
console.log(person1.name)//小黄
let person4=Object.assign({},person1)
person4.name="小强"
console.log(person1.name)//小黄
let person5=person2
person5.name="小马"
console.log(person1.name)//小马
}
print();76.vue路由如何传参？
77.捕获和冒泡的顺序
78.浏览器中哪些事件冒泡，哪些不冒泡？
79.
var count=10;//全局作用域 标记为f1
function add(){
var count=0;//函数全局作用域 标记为f2
return function(){
count+=1;//函数的内部作用域
alert(count);
}
}
var s=add()
s();//输出1
s();//输出2
详看：https：//blog.csdn.net/Web_J/article/details/84866582
80.
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //undefined says hi
详看：https：//blog.csdn.net/Web_J/article/details/84941963
81.倒计时10秒
window.onload = function(){
let i = 10;
let timer = setInterval(function(){
i<0 ? clearInterval(timer) : document.body.innerHTML = i--
},1000);
}