ES6常见面试题总结
1、es5和es6的区别，说一下你所知道的es6
1.let声明变量和const声明常量:,两个都有块级作用域,ES5中是没有块级作用域的,并且var有变量提升,
在let中,使用的变量一定要进行声明再使用
2.箭头函数:ES6中的函数定义不再使用关键字funtion(),而是利用()=>定义
3.模板字符串:是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串
4.解构赋值:允许按照一定模式,从数组和对象中提取值,对变量进行赋值
5.for of循环:可以遍历数组,Set和Map结构,某些类似数组的对象,对象,以及字符串
6.import,export导入导出:ES6标准中,JS原生支持模块module.将JS代码分割成不同的功能小块进行模块化,
将不同功能的代码分别写在不同的文件中,各模块只需要导出公共接口部分,然后通过模块的导入方式可以在其他地方使用
7.Set数据结构:类似数组.所有的数据都是唯一的,没有重复的值.它本身是一个构造函数
8）... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
9）修饰器 @decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念
11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
12）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
继承
在Javascript中虽然没有类的概念(ES6才新增，但也只是语法糖)，但是却能使用OOP编程模式，
这是因为JS中有面向对象编程的几点基本特征，即抽象、封装、继承、多态，这篇文章我们学习JS中的七种实现继承的方法。
原型模式创建对象的方法
构造函数实现继承,会引出构造函数创建对象的模式,使用new操作符调用构造函数会经历4个步骤
闭包
1.闭包指有权访问另一个函数作用域中的变量的函数,延长了变量的作用域,内部函数可以访问外部函数的变量。
2.闭包的应用一般分两种情况——函数作为返回值，函数作为参数传递。
3.闭包使用场景:setTimeout
for (var i = 0; i < 4; i++) {
setTimeout(function() {
console.log(i);
}, 300);
}
依次打印0,1,2,3 ？？？，然而打印的全都是4
原因:JS 执行的时候首先会先执行主线程,异步相关的会存到异步队列里,当主线程执行完毕开始执行异步队列, 主线程执行完毕后,此时 i 的值为 4,说以在执行异步队列的时候,打印出来的都是 4(这里需要大家对 event loop 有所了解(js 的事件循环机制))
要使其依次打印0,1,2,3，则可以考虑闭包：
//方法一:
//这个是通过自执行函数返回一个函数,然后在调用返回的函数去获取自执行函数内部的变量,此为闭包
for (var i = 0; i < 4; i++) {
setTimeout(
(function(i) {
return function() {
console.log(i);
};
})(i),
300
);
}
//方法二:
// 大部分都认为方法一和方法二都是闭包,我认为方法一是闭包,而方法二是通过创建一个自执行函数,使变量存在这个自执行函数的作用域里
for (var i = 0; i < 4; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 300);
})(i);
}
逻辑题
不使用全局变量,每次调用函数的时候返回值+1
2.Vue高频有关问题
kepp-alive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./lib/index.css" />
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 -->
<button v-for="tab in tabs" :key="tab" :class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button>
<keep-alive>
<component :is="currentTabComponent" class="tab"></component>
</keep-alive>
</div>
</body>
<script>
Vue.config.errorHandler = function (err, vm, info) {
// 捕获组件生命周期钩子里的错误
console.log(err,vm,info)
}
Vue.component('tab-posts', {
data: function () {
return {
posts: [
{
id: 1,
title: '文章一',
content: '<p>我是文章1</p>',
},
{
id: 2,
title: '文章二',
content: '<p>我是文章二.</p>',
},
{
id: 3,
title: '文章三',
content: '<p>我是文章三</p>',
},
],
selectedPost: null,
};
},
mounted() {
// abc
},
errorCaptured(){
},
template: `
<div class="posts-tab">
<ul class="posts-sidebar">
<li
v-for="item in posts"
:key="item.id"
:class="{ selected: item === selectedPost }"
v-on:click="selectedPost = item"
>
{{item.title }}
</li>
</ul>
<div class="selected-post-container">
<div
v-if="selectedPost"
class="selected-post"
>
<h3>{{ selectedPost.title }}</h3>
<div v-html="selectedPost.content"></div>
</div>
</div>
</div>
`,
// 被 keep-alive 缓存的组件激活时调用。
activated() {
console.log('keep-alive 缓存的组件激活时调用');
},
// 被 keep-alive 缓存的组件停用时调用。
deactivated() {
console.log(' keep-alive 缓存的组件停用时调用');
}
});
Vue.component('tab-archive', {
template: '<div>Archive组件</div>',
// 被 keep-alive 缓存的组件激活时调用。
// activated() {
// console.log(2);
// },
// // 被 keep-alive 缓存的组件停用时调用。
// deactivated() {
// console.log(1);
// },
});
new Vue({
data: {
currentTab: 'Posts', //默认值
tabs: ['Posts', 'Archive'], //显示的组件
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase();
},
},
}).$mount('#app');
</script>
</html>
路由两种模式
Vuex
参考文献：blog.csdn.net/lla520/arti…
前后端分离 ===> 利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。
