js，vue基础面试题（持续更新中）

1.定时器设置与清空
设置：setInterval(function(){
console.log("这是一个setInterval定时器！");
}, 1000);
清除：var intervalBox = setInterval(function(){
console.log(intervalBox);//打印interval定时器，查看interval定时器效果
}, 1000);
clearInterval(intervalBox);//清除interval定时器
面试问题：一个按钮，一个数字，点击按钮，数字开始倒计时。
2.由A复选框控制其他复选框的选中状态，其他复选框有一个未选中，A复选框也应该未选中，反之选中
html部分

js部分省略（有待完善）
3.arr=[1,2,3,1,3,5,6,1];找出数组中重复的数字以及出现的次数

            var obj={};
            arr.forEach((key)=>{
                if(obj[key]){
                    obj[key]++;
                }else{
                    obj[key]=1;
                }
            })
            console.log(obj);

4.箭头函数和普通函数的区别
1）this指向不同，在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。
2）箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。
具体的this指向，根据实例分析。。
（1）.箭头函数不能Generator函数，不能使用yeild关键字。
（2）.箭头函数不具有prototype原型对象。
（3）.箭头函数不具有super。
（4）.箭头函数不具有new.target。

5.this.$nextTick()的使用，作用以及运用场景

6.map,set的使用
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

（1）　var data = new Set([1,2,3]);
　　　　//Set {1, 2, 3}
　　　　console.log(data);

　　（2）.添加: add
　　　　data.add(4);
　　　　//Set {1, 2, 3, 4}
　　　　console.log(data);
　　　　//Set不会重复添加成员
　　　　data.add(4);
　　　　//Set {1, 2, 3, 4}
　　　　console.log(data);

　　（3）.成员个数：size
　　　　//4
　　　　console.log(data.size);

　　（4）.删除：delete
　　　　data.delete(1);
　　　　//Set {2, 3, 4}
　　　　console.log(data);

　　（5）.查找：has
　　　　//true
　　　　console.log(data.has(2));

　　（6）.遍历: forEach
　　　　//2
　　　　//3
　　　　//4
　　　　data.forEach(d=>{
　　　　　　console.log(d);
　　　　});

ES6提供了Map数据结构。它类似于对象，也是键值对的集合
也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

（1）　var data = new Map();
　　　　//Map {}
　　　　console.log(data);

　　（2）.添加 set(key,value)
　　　　data.set('a',1);
　　　　data.set('b',2);
　　　　data.set('c',3);
　　　　//Map {"a" => 1, "b" => 2, "c" => 3
　　　　console.log(data);

　　（3）.获得: get(key)
　　　　//1
　　　　console.log(data.get('a'));

　　（4）.成员个数： size
　　　　//3
　　　　console.log(data.size);

　　（5）.删除：delete
　　　　data.delete('a');
　　　　//Map {"b" => 2, "c" => 3}
　　　　console.log(data);

　　（6）.查找：has
　　　　//true
　　　　console.log(data.has('b'));

　　（7）.遍历：forEach
　　　　//b=2
　　　　//c=3
　　　　data.forEach((value,key)=>{
　　　　　　console.log(key+'='+value);
　　　　});

7.watch和computed的区别以及使用场景
watch：一对多，一个数据影响多个数据
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
computed：一对一，一对多；一个数据受多个数据的影响
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化

8.vue生命周期，created和mounted的区别
9.变量提升的理解

10.封装my-input的组件可以清空value

**11.prototype和proto **
prototype是函数才有的属性
proto_是每个对象都有的属性

12.v-if和v-show的区别
v-show相当于 display的block和none，
v-if是直接去掉该元素

13.axios和promise，feach的区别
promise
Promise主要用于解决异步回调嵌套的问题。promise是一个对象可以获取异步操作的消息，可以避免多层异步调用嵌套的问题(回调地狱)，提供了简洁的API 使得控制异步操作更加容易，基于promise发送ajax请求
使用场景: 主要用于保证多个异步请求都完成以后，再进行后续的业务。
resolve成功状态
reject拒绝状态
then是前面返回promise的处理

1】.实例方法
.then() 得到异步任务的正确结果
.catch() 得到异常信息
.finally() 成功与否都会执行

2】.对象方法
Promise.all() 并发处理多个异步任务所有任务都执行完成才能得到结果
Promise.race() 并发处理多个异步任务只要有一个任务完成就能得到结果

axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

fetch
fetch优势：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式

二、fetch存在问题
fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
fetch没有办法原生监测请求的进度，而XHR可以

14.移动端滚动监听
window.addEventListener
15防抖节流
防抖（debounce）：
　　在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新出发定时器。
this.$nettick
keep-alive
webpact配置打包
vue的响应原理
在浏览器输入url后发生了什么
1.DNS域名解析；
2.建立TCP连接；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP连接；
7.浏览器解析HTML；
8.浏览器布局渲染；

js，vue基础面试题（持续更新中）

你可能感兴趣的:(js，vue基础面试题（持续更新中）)