promise面试题（WEB前端面试题）

本文目录

• WEB前端面试题
• 学会使用async/await
• Vue面试题集锦
• Web前端企业面试题
• JS 烧脑面试题大赏
• Web 前端面试
• Node.js常见面试题
• 前端面试题之解决浏览器兼容性的方案
• 阿里前端面试题（1）——解构/异步/markdown语法解析
• 2020年Web前端面试题汇总(一)

WEB前端面试题

第二章 面试题基础篇 2.1 HTML面试题 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 面试题：页面导入样式时，使用link和@import有什么区别？ 面试题：title与h1的区别、b与strong的区别、i与em的区别？ 面试题：img标签的title和alt有什么区别？ 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？ 2.2 CSS面试题 面试题：css背景纹路 面试题：介绍一下CSS的盒子模型 面试题：CSS选择符有哪些？哪些属性可以继承？ 面试题：CSS优先级算法如何计算？ 面试题：用CSS画一个三角形 面试题：一个盒子不给宽度和高度如何水平垂直居中？ 面试题：display有哪些值？说明他们的作用。 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？ 面试题：清除浮动有哪些方式？ 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？ 面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。 面试题：什么是CSS reset？ 面试题：css sprite是什么,有什么优缺点 面试题：display: none;与visibility: hidden;的区别 面试题：position有哪些值?有什么作用? 【特别多公司问】 面试题：line-height和height有什么区别？ 面试题：opacity 和 rgba区别 2.3 JavaScript基础面试题 面试题：延迟加载JS有哪些方式？ 面试题：JS数据类型有哪些？ 面试题：null和undefined的区别 面试题：JS数据类型考题 面试题：==和===有什么不同 面试题：JS微任务和宏任务 面试题：JS作用域考题 面试题：JS对象考题 面试题：JS作用域+this指向+原型 考题 面试题：JS判断变量是不是数组，你能写出哪些方法？ 面试题：slice是干嘛的、splice是否会改变原数组 面试题：JS数组去重 面试题：找出多维数组最大值 面试题：给字符串新增方法实现功能 面试题：找出字符串出现最多次数的字符以及次数 2.4 真正移动端 —— H5/C3面试题 面试题：什么是语义化标签 面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 面试题：如何关闭iOS键盘首字母自动大写 面试题：怎么让Chrome支持小于12px 的文字？ 面试题：rem和em有什么样区别 面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 面试题：webkit表单输入框placeholder的颜色值能改变吗？ 面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片 面试题：禁止ios和android用户选中文字 面试题：自适应 面试题：响应式 第三章 面试题进阶篇 3.1 JavaScript进阶面试题 面试题：new操作符具体做了什么 面试题：闭包 【必须会】 面试题：原型链 【必须会】 面试题： JS继承有哪些方式 面试题：说一下call、apply、bind区别 面试题：sort背后原理是什么？ 面试题：深拷贝和浅拷贝 面试题：localstorage、sessionstorage、cookie的区别 3.2 ES6面试题 面试题：var、let、const区别 面试题：作用域考题 面试题：将下列对象进行合并 面试题：箭头函数和普通函数有什么区别？ 面试题：Promise有几种状态 面试题：find和filter的区别 【大厂】 面试题：some和every的区别 【大厂】 3.3 webpack面试题 面试题：webpack插件 3.4 Git面试题 面试题：git常用命令 面试题：解决冲突 面试题：GitFlow 第四章 面试题框架篇 4.1 区分初中高级的 —— Vue面试题 面试题：Vue2.x 生命周期有哪些？ 1.系统自带八个 2.当一旦进入到某个组件会执行哪些生命周期 3.$el和$data在哪个阶段有 4.如果使用keep-alive会多俩个生命周期 5.如果加入keep-alive第一次进入组件会执行哪些生命周期 6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期 面试题：谈谈你对keep-alive的了解 面试题：v-if和v-show区别 面试题：v-if和v-for优先级 2.x 面试题：ref是什么？ 面试题：nextTick是什么？ 面试题：Vue中如何做样式穿透 面试题：scoped原理 面试题：Vuex是单向数据流还是双向数据流？ 面试题：讲一下MVVM 面试题：双向绑定原理 面试题：什么是虚拟DOM 面试题：key是干什么？ 面试题：diff算法 面试题：Vue组件传值 面试题：props和data优先级谁高？ 面试题：computed、methods、watch有什么区别？ 面试题：Vuex 面试题：Vue路由 面试题：Vue项目打包后出现空白页 4.2 微信小程序面试题 面试题：如何自定义头部？ 面试题：如何自定义底部？ 4.3 uni-app面试题 面试题：生命周期 面试题：条件编译 第五章 面试题性能优化篇

学会使用async/await

有很多 async 的面试题，例如

等等，需要找出一个规律

用同步的方式，编写异步。

和 Promise 的关系

async 函数返回结果都是 Promise 对象（如果函数内没返回 Promise ，则自动封装一下）

await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行

await 后续跟非 Promise 对象：会直接返回

总结来看：

异步本质

await 是同步写法， 但本质还是异步调用 。

即，只要遇到了 await ，后面的代码都相当于放在 callback 里。

for...of

定时算乘法

执行 async 函数执行返回的是 Promise 对象

await 相当于 Promise 的 then

try...catch 可捕获异常，代替 Promise 的 catch

右上图解读： async返回Promise，await返回then，await后面报错会终止执行，可以用try...catch来捕获

Vue面试题集锦

原理：在创建Vue实例时，Vue会遍历data选项的属性，利用Object.defineProperty()为属性添加getter和setter对数据的读取进行劫持（getter用来依赖手机，setter用来派发更新），并且在内部追踪依赖，在属性被访问和修改时通知变化。每个组件实例会有相应的watcher实例，会在组件渲染过程中记录依赖的所有数据属性，之后依赖项被改动时，setter方法会通知依赖与此data的watcher实例重新计算（派发更新），从而使它关联的组件重新渲染。

一句话总结：vue.js采用数据劫持结合发布-订阅模式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发响应的监听回调。

我的理解：在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图。而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。

Vue实例从创建到销毁的全过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等一系列过程。

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

它可以分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。

第一次页面加载时会触发beforeCreate、created、beforeMounted、mounted

DOM渲染在mounted中就已经完成。

1、beforeCreate：可以在这加个loading事件，在加载实例时触发； 2、created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用； 3、mounted：挂载元素，获取DOM节点； 4、updated：如果对数据统一处理，在这里写上相应函数； 5、beforeDestroy：可以放一个确认停止事件的确认框； 6、nextTick：更新数据后立即操作DOM。

1、对象方法v-bind:class="{’orange’: isRipe, ’green’: isNotRipe}" 2、数组方法v-bind:class="" 3、行内v-bind:style="{color: color, fontSize: fontSize+’px’}"

1、router-link标签会渲染为标签，咋填template中的跳转都是这种； 2、另一种是式导航，也就是通过js跳转比如router.push(’/home’)

M- model ，model 表示数据模型，也可以在model中定义数据修改和操作的业务逻辑 V- view，view表示视图，它负责将数据模型转换为视图展示出来 VM- viewmodel，viewmodel是一个同步view和model的对象，连接view和model，用于监听数据模型的改变和控制视图行为

computed：computed是计算属性，也就是计算值，更多用于计算值的场景。它具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算。

watch：watch更多的是观察作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据变化时用来执行回调进行后续操作。它不具有缓存性，页面重新渲染时值不会变化也不会执行。

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，但是也得慎用，样式不易改变。 解决方法： ① 使用混合型的css样式，混合使用全局样式和私有样式。 ② 深度作用选择器：如果你希望scoped样式中的一个选择器能够作用的更深，可以使用》》》操作符。如：《style scoped》.a》》》.b{/ ... /}《/style》

一个元素绑定多个事件的写法有两种： 1、修饰符的使用

2、在method方法里分别写两个事件

Vue组件中的data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用，如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

原理：JS执行是单线程的，它是基于事件循环的。所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看那些对应的异步任务，等结束等待状态，进入执行栈，开始执行。主线程不断重复上面的步骤。主执行的执行过程就是tick，所有的异步结果都是通过任务队列来调度的。任务分为两大类：宏任务和微任务，宏任务包括：setTimeOut等，微任务包括promise.then。

Vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，nextTick把要执行的任务推入一个队列中，在下一个tick同步执行队列的所有任务，它是异步任务中的微任务。如果我们在更新了一个响应式数据后，需要同步拿到这个渲染后的DOM结果，就使用nextTick方法，异步拿这个结果。 使用方式： ① this. nextTick.then(cb); 异步

父组件调用子组件的方法 父组件： this.$refs.yeluosen.childMethod() 子组件向父组件传值并调用方法： $emit 组件之间： bus==$emit+$on

1、第一种方法是直接在子组件中通过this. emit向父组件触发一个事件，父组件监听这个事件就行了。 3、第三种都可以实现子组件调用父组件的方法。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用，你可以简单的监控watch $route对象：

is用来动态切换组件，DOM模板解析

全局的：前置守卫、后置钩子（beforeEach、afterEach）beforeResolve 单个路由独享的：beforeEnter 组件级的：beforeRouteEnter（不能获取组件实例this）、beforeRouteUpdate、beforeRouteLeave 这是因为在执行路有钩子函数beforeRouteEnter的时候，组件还没有被创建出来，先执行beforeRouteEnter，再执行周期钩子函数beforeCreate，可以通过next获取组件的实例对象，如：next((vm) =》 {})，参数vm就是组件的实例化对象。

缺点：

优点：

计算属性是需要复杂的逻辑，可以用方法method代替。

vue-cli提供的脚手架模板有browserify和webpack。

① 是什么？ Vue框架中的状态管理，分别是State、Getter、Mutation、Action、Module。 ② 怎么使用？ 新建一个目录store。 ③ 功能场景？ 单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车等。 ④ vuex的状态： a. State特性：vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。它通过mapState把全局的state和getters映射到当前组件的computed计算属性中。 b. Getter特性：getters可以对State进行计算操作，它就是store的计算属性。虽然在组件内可以做计算属性，但是getters可以在多组件之间复用。如果一个状态只在一个组件内使用，可以不用getters。 c. Mutation特性：改变store中state状态的唯一方法就是提交mutation，每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那我们需要执行一个相应的调用方法：store.commit。 d. Action特性：类似于mutation，不同点在于：Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation。或者通过context.state和context.getters来获取state和getters。Action通过store.dispatch方法触发：store.dispatch(’increment’)。 e. Module特性：Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分解为模块，每个模块中拥有自己的state、mutation、action和getter。

① 创建组件页面eg Toast.vue ② 用Vue.extend() 扩展一个组件构造器，再通过实例化组件构造器，就可以创造出可复用的组件。 ③ 将toast组件挂载到新创建的div上； ④ 将toast组件的dom添加到body里； ⑤ 修改优化达到动态控制页面显示文字跟显示时间；

修饰符分为：一般修饰符、事件修饰符、按键、系统 ① 一般修饰符：

② 事件修饰符

③ 按键修饰符

④ 系统修饰符（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念 在我看来，渐进式代表的含义是：主张最少。视图模板引擎每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。 渐进式的含义，我的理解是：主张最少，没有多做职责之外的事。

Web前端企业面试题

答：

一、display和visibility的相同与不同点

1、相同点：display和visibility都有讲元素隐藏的意思

2、不同点：display是元素隐藏，隐藏的元素不占文档流

而visibility隐藏的元素仍然占文档流

二、display和visibility的属性值

1、display

2、visibility

答：

在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点

for循环

其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组

for循环中可以使用return、break等来中断循环

结果：

forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。

输出结果：

for…in

循环遍历的值都是数据结构的键值

总结一句: for in也可以循环数组但是特别适合遍历对象

结果：

for…of

它是ES6中新增加的语法，用来循环获取一对键值对中的值

循环一个数组

循环一个普通对象（报错）

答：

px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。

所以相对于同一机型来说是一个绝对的长度单位。

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 。

以其父级元素为基准来变化长度。所以其算法不是一个固定的值。

rem：是CSS3新增的一个相对单位（root em，根em） 。

那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。

在移动设备上，我们常常设置

此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。

因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。

那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。

基础篇

1.shift

// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

2.unshift

// 将参数添加到原数组开头，并返回数组的长度

//注：此方法在ie6.0下

// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠

// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

4.push

// 将参数添加到原数组末尾，并返回数组的长度

5.concat

// 返回一个新数组，是将参数添加到原数组中构成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()

进阶篇

1.forEach

是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。

2.map

map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此

forEach和map对比

相同点

1）都是循环遍历数组中的每一项；

2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；

3）this都是指向调用方法的数组；

4) 只能遍历数组；

不相同点

1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。

2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。

3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。

3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。

理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据

4.find()

返回通过测试的数组的第一个元素的值,

理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法

array.find(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧

5.every

理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)

6.some

理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false

7.reduce

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback

他可以传四个参数:

1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)

2,currentValue:数组中当前被处理的元素

3,index:不啰嗦,自己顾名思义去吧

4,array:返回调用reduce的数组

彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

不同点： 第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；

substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾’）。

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。

所以，一般creadted钩子函数主要是用来初始化数据。

2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例

下面是结果

nihao

取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

总结： 通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。 methods:{}中的方法都需要主动去触发，比如点击click之类的 而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行 created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。 所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化

6、Vue中组件之间的传参方式有哪些方式？

Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、props 传参

子组件定义 props 有三种方式:

// 第一种数组方式

// 第二种对象方式

// 第三种对象嵌套对象方式

第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用

父组件传参的俩种方式

第一种静态属性传参

注意：

1、在不定义 props 类型的情况下 props 接受到的均为 String。

2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true

第二种动态属性传参

注意：

1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值

2、会保留传入值的类型

3、如果是表达式则获取到的是表达式的计算结果

二、attrs 和listeners

$attrs

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。

属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）

$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

三、$emit 通知

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值

四、v-model

这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

五、插槽

六、$refs, $root, $parent, $children

$root 获取根组件

$parent 获取父组件

$children 获取子组件(所有的子组件，不保证顺序)

$refs 组件获取组件实例，元素获取元素

七、project / inject

注意：注入的值是非响应的

八、Vuex

这个相当于单独维护的一组数据，就不过多的说了。

watch，computed和methods的关系

1.watch和computed都是以Vue的依赖追踪机制为基础的 ，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

watch和computed各自处理的数据关系场景不同

1. watch 擅长处理的场景： 一个数据影响多个数据

2. computed 擅长处理的场景： 一个数据受多个数据影响

watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值

结果：this.suoLong会变为 ’橡胶海贼团索隆’,以此类推

computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值

methods和computed的区别例子

注意两次点击computed返回的时间是相同的！！

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据 （不是放在data等对象下的实例数据） ，所以computed只提供了缓存的值，而没有重新计算

只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。

***隐藏网址***

***隐藏网址***

1、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

2、async await

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档

两者的区别

1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

2、async await与Promise一样，是非阻塞的。

3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。

JS 烧脑面试题大赏

答案

2、1

解析

首先基本类型数据是按值传递的，所以执行b函数时，b的参数a接收的值为1，参数a相当于函数内部的变量，当本作用域有和上层作用域同名的变量时，无法访问到上层变量，所以函数内无论怎么修改a，都不影响上层，所以函数内部打印的a是2，外面打印的仍是1。

答案

报错

解析

给函数多个参数设置默认值实际上跟按顺序定义变量一样，所以会存在暂时性死区的问题，即前面定义的变量不能引用后面还未定义的变量，而后面的可以访问前面的。

答案

10、20

解析

答案

undefined、{n: 2}

解析

恕笔者不才，这道题笔者做一次错一次。

反正按照网上大部分的解释是因为.运算符优先级最高，所以会先执行a.x，此时a、b共同指向的{n: 1}变成了{n: 1, x: undefined}，然后按照连等操作从右到左执行代码，a = {n: 2}，显然，a现在指向了一个新对象，然后a.x = a，因为a.x最开始就执行过了，所以这里其实等价于：({n: 1, x: undefined}).x = b.x = a = {n: 2}。

答案

解析

这题比较简单，arr等打印出来也确实是undefined，但是，这里其实涉及到ECMAScript版本不同对应方法行为不同的问题，ES6之前的遍历方法都会跳过数组未赋值过的位置，也就是空位，但是ES6新增的for of方法就不会跳过。

答案

Goodbye Jack

解析

答案

NaN、13、NaN、1、1

解析

这道题考察的显然是+号的行为：

1.如果有一个操作数是字符串，那么把另一个操作数转成字符串执行连接

2.如果有一个操作数是对象，那么调用对象的valueOf方法转成原始值，如果没有该方法或调用后仍是非原始值，则调用toString方法

3.其他情况下，两个操作数都会被转成数字执行加法操作

答案

456

解析

对象有两种方法设置和引用属性，obj.name和obj。

答案

25、20、20、25

解析

这道题考察的是this指向问题：

1.逗号操作符会返回表达式中的最后一个值，这里为inner.func对应的函数，注意是函数本身，然后执行该函数，该函数并不是通过对象的方法调用，而是在全局环境下调用，所以this指向window，打印出来的当然是window下的out

2.这个显然是以对象的方法调用，那么this指向该对象

3.加了个括号，看起来有点迷惑人，但实际上(inner.func)和inner.func是完全相等的，所以还是作为对象的方法调用

4.赋值表达式和逗号表达式相似，都是返回的值本身，所以也相对于在全局环境下调用函数

答案

1、2、3

解析

这题考察的是变量解构赋值的问题，数组解构赋值是按位置对应的，而对象只要变量与属性同名，顺序随意。

答案

解析

是不是从来没有用assign方法合并过数组？assign方法可以用于处理数组，不过会把数组视为对象，比如这里会把目标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了目标对象的值。

答案

4

解析

这题考查的是自增运算符的前缀版和后缀版，以及switch的语法，后缀版的自增运算符会在语句被求值后才发生，所以x会仍以1的值去匹配case分支，那么显然匹配到为1的分支，此时，x++生效，x变成2，再执行++x，变成3，因为没有break语句，所以会进入当前case后面的分支，所以再次++x，最终变成4。

答案

true、true

解析

2.typeof对函数使用返回’function’，class只是es6新增的语法糖，本质上还是函数，所以两者相等

答案

true、false

解析

1.没啥好说的，typeof对数字类型返回’number’。

2.这题考查的是运算符优先级的问题，逻辑非!的优先级比全等===高，所以先执行!!typeof count，结果为true，然后执行true === ’number’，结果当然为false，可以点击这里查看优先级列表： 点我 。

答案

2、2

解析

答案

1

解析

这道题考察的是作用域的问题，作用域其实就是一套变量的查找规则，每个函数在执行时都会创建一个执行上下文，其中会关联一个变量对象，也就是它的作用域，上面保存着该函数能访问的所有变量，另外上下文中的代码在执行时还会创建一个作用域链，如果某个标识符在当前作用域中没有找到，会沿着外层作用域继续查找，直到最顶端的全局作用域，因为js是词法作用域，在写代码阶段就作用域就已经确定了，换句话说，是在函数定义的时候确定的，而不是执行的时候，所以a函数是在全局作用域中定义的，虽然在b函数内调用，但是它只能访问到全局的作用域而不能访问到b函数的作用域。

答案

undefined

解析

这道题考察的是this的指向问题，箭头函数执行的时候上下文是不会绑定this的，所以它里面的this取决于外层的this，这里函数执行的时候外层是全局作用域，所以this指向window，window对象下没有name属性，所以是undefined。

答案

{a: {b: 1}}

解析

这道题很简单，因为assign方法执行的是浅拷贝，所以源对象的a属性会直接覆盖目标对象的a属性。

答案

undefined、1、2

解析

答案

undefined

解析

答案

打印出arr数组本身

解析

函数作为某个对象的方法调用，this指向该对象，数组显然也是对象，只不过我们都习惯了对象引用属性的方法：obj.fn，但是实际上obj引用也是可以的。

答案

1、b函数本身、b函数本身

解析

2.和第一题类似，只是b没有赋值操作，那么执行到这两行相当于都没有操作，b当然是函数。

答案

2、4、1、1、2、3、3

解析

1.执行Foo函数的静态方法，打印出2。

2.执行getName，当前getName是打印出4的那个函数。

3.执行Foo函数，修改了全局变量getName，赋值成了打印1的函数，然后返回this，因为是在全局环境下执行，所以this指向window，因为getName已经被修改了，所以打印出1。

4.因为getName没有被重新赋值，所以再执行仍然打印出1。

5.new操作符是用来调用函数的，所以new Foo.getName()相当于new (Foo.getName)()，所以new的是Foo的静态方法getName，打印出2。

6.因为点运算符（.）的优先级和new是一样高的，所以从左往右执行，相当于(new Foo()).getName()，对Foo使用new调用会返回一个新创建的对象，然后执行该对象的getName方法，该对象本身并没有该方法，所以会从Foo的原型对象上查找，找到了，所以打印出3。

7.和上题一样，点运算符（.）的优先级和new一样高，另外new是用来调用函数的，所以new new Foo().getName()相当于new ((new Foo()).getName)()，括号里面的就是上一题，所以最后找到的是Foo原型上的方法，无论是直接调用，还是通过new调用，都会执行该方法，所以打印出3。

答案

it’s Matthew, from England

it’s Bob, from England

解析

Object.create方法会创建一个对象，并且将该对象的__proto__属性指向传入的对象，所以p1和p2两个对象的原型对象指向了同一个对象，接着给p1添加了一个name属性，然后调用了p1的setCountry方法，p1本身是没有这个方法的，所以会沿着原型链进行查找，在它的原型上，也就是person对象上找到了这个方法，执行这个方法会给address对象的country属性设置传入的值，p1本身也是没有address属性的，但是和name属性不一样，address属性在原型对象上找到了，并且因为是个引用值，所以会成功修改它的country属性，接着对p2的操作也是一样，然后因为原型中存在引用值会在所有实例中共享，所以p1和p2它们引用的address也是同一个对象，一个实例修改了，会反映到所有实例上，所以p2的修改会覆盖p1的修改，最终country的值为England。

答案

2、3、5、4、1

解析

这道题显然考察的是事件循环的知识点。

js是一门单线程的语言，但是为了执行一些异步任务时不阻塞代码，以及避免等待期间的资源浪费，js存在事件循环的机制，单线程指的是执行js的线程，称作主线程，其他还有一些比如网络请求的线程、定时器的线程，主线程在运行时会产生执行栈，栈中的代码如果调用了异步api的话则会把事件添加到事件队列里，只要该异步任务有了结果便会把对应的回调放到【任务队列】里，当执行栈中的代码执行完毕后会去读取任务队列里的任务，放到主线程执行，当执行栈空了又会去检查，如此往复，也就是所谓的事件循环。

异步任务又分为【宏任务】（比如setTimeout、setInterval）和【微任务】（比如promise），它们分别会进入不同的队列，执行栈为空完后会优先检查微任务队列，如果有微任务的话会一次性执行完所有的微任务，然后去宏任务队列里检查，如果有则取出一个任务到主线程执行，执行完后又会去检查微任务队列，如此循环。

回到这题，首先整体代码作为一个宏任务开始执行，遇到setTimeout，相应回调会进入宏任务队列，然后是promise，promise的回调是同步代码，所以会打印出2，for循环结束后调用了resolve，所以then的回调会被放入微任务队列，然后打印出3，最后打印出5，到这里当前的执行栈就空了，那么先检查微任务队列，发现有一个任务，那么取出来放到主线程执行，打印出4，最后检查宏任务队列，把定时器的回调放入主线程执行，打印出1。

答案

1、7、6、8、2、4、9、11、3、10、5、12

Web 前端面试

博客园整理了一下，有好的面试题欢迎大家发在评论区哟 1. 闭包 2. 数组去重 3. 原型和原型链 4. call,apply,bind三者的区别？ 5. 请介绍常见的 HTTP 状态码(至少五个) 6. 深浅拷贝 7. 实现(5).add(3).minus(2)输出6 8. null和undefined区别 9. MVC和MVVC? 10. Vue生命周期 11. Vue数据双向绑定原理 12. Vue组件传参 13. 说说各浏览器存在的兼容问题 14. router和route 15. active-class属于Vue哪一个modules,有什么作用 16. v-if和v-show 17. computed和watch有什么区别 18.Vue 组件中 data 为什么必须是函数 19. vue中子组件调用父组件的方法 20. vue中 keep-alive 组件的作用 21. vue中如何编写可复用的组件？ 22. Vue 如何去除url中的 # 23. Vue 中 key 的作用 24. Vue 中怎么自定义指令 25. Vue 中怎么自定义过滤器 26. NextTick 是做什么的 27. Vue 组件 data 为什么必须是函数 28. 计算属性computed 和事件 methods 有什么区别 29. scoped（死够扑的） 30. vue如何获取dom? 31. promise 32. vue常用指令有哪些 33.vue-loader是什么?使用和用途？ 34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透

闭包指有权访问另一个函数中变量的函数，***隐藏网址******隐藏网址***

***隐藏网址***

***隐藏网址***

都是用来改变this指向的

call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的

一般情况下this指向其调用者（）

fun.call(thisArg,arg1,ary2,...) 主要作用可以实现继承 调用函数，改变this指向

继承

fun.apply(thisArg,)

作用：调用函数，改变函数内部this指向 参数必须是数组 apply主要应用于借助数学对象等

bind()方法不会调用函数，但可以改变函数内部this指向 fun.bind(thisArg,arg1,arg2,...) thisArg:在fun函数运行时指定的this值 arg1，arg2:传递的其他参数 返回由指定的this值和初始化参数改造的原函数拷贝

call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call

时间测试

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

***隐藏网址***

MVC 是后端中的概念

MVVC中 是前端概念

最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

active-class 属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式

使用有两种方法 routerLink标签内使用

在使用时会有一个Bug 首页的active会一直被应用 解决办法 为了解决上面的问题，还需加入一个属性exact,类似也有两种方式： 在router-link中写入exact

在路由js文件,配置active-class

还可以不用exact这种方法去解决，例如

首页 路由中加入重定向

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景 computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景 watch

watch更多的是的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作 无缓存性，页面重新渲染时值不变化也会执行 小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

去这里看一下​blog.csdn.net

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history

new Router({ mode: ’history’, routes: })

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

具体参考 官方API

参考 官方文档-自定义指令

过滤器也同样接受全局注册和局部注册

具体可参考官方文档 深入响应式原理

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

让css只在当前组件中起作用

Node.js常见面试题

Node.js常见面试题

　　Node、js常见面试题，如果面试紧张且不知道面试会问什么问题，那面试失败率会很高，但如知道面试大概会被问到哪些问题的话，那成功率自然会很高，来看Node、js常见面试题。

　　Node、js常见面试题1

　　在进入正文之前，需要提前声明两点：

　　这些问题只是Node、js知识体系的一个局部，并不能完全考察被面试者的实际开发能力。

　　对现实世界开发中遇到的问题，需要的是随机应变与团队合作，所以你可以尝试结对编程。

　　Node、js面试题列表

　　什么是错误优先的回调函数?

　　你如何避免回调地狱?

　　你如何用Node来监听80端口?

　　什么是事件循环?

　　什么工具可以用来保证一致的风格?

　　运算错误与程序员错误的区别?

　　为什么npm是有用的?

　　什么是stub?举个使用场景?

　　什么是测试金字塔?当我们谈到HTTP API时，我们如何实施它?

　　你最喜欢的HTTP框架，并说明原因?

　　现在，我们依次来解答这些问题吧。

　　什么是错误优先的回调函数?

　　错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象， 用于检查程序是否发生了错误。其余的参数用于传递数据。例如：

　　fs、readFile(filePath, function(err, data) {

　　if (err) { //handle the error } // use the data object});

　　解析：这个题目的主要作用在于检查被面试者对于Node中异步操作的一些基本知识的掌握。

　　如何避免回调地狱

　　你可以有如下几个方法：

　　模块化：将回调函数分割为独立的函数

　　使用Promises

　　使用yield来计算生成器或Promise

　　解析：这个问题有很多种答案，取决你使用的场景，例如ES6, ES7，或者一些控制流库。

　　在Node中你如何监听80端口

　　Node、js常见面试题2

　　 1、先来谈谈你自己吧?

　　您好!我叫×××，于今年毕业于杭州电子科技大学国际经济贸易专业，临海本地人。我的座右铭是“一分耕耘一分收获”，自己毕竟也年轻，所以有更大地发展空间去为自己心仪的工作所努力。

　　选择×××这一岗位也是在分析了自己的特长之后才慎重选择的，我的特长是交际，不论是大学还是临海，都有许多朋友。而且在大学实习时也接触过相关的工作，经济、法律、营销等专业基础知识也比较扎实，所以我相信自己的选择，也是对自己的一种考验与肯定。谢谢

　　 2、你大学从事过哪些工作?

　　 3、对你来说工作中最重要的是什么?

　　我觉得最重要的是处理好个人利益与企业利益的关系。自己一旦进入一个企业，就应该以企业利益为重，个人能力是个人在企业的一张名片，个人的价值在于你给企业带来的收益。

　　而处理好个人利益与企业利益的时候，还能兼顾到团队精神，并扎实自己的专业技能与培养恒心与信心。所以，我认为处理好两个利益关系是最重要的。

　　 4、你觉得×××(岗位)应该具备哪些素质?

　　①懂得推销自己，克服在客户面前的胆怯心理 ②在不伤及客户利益的基础上，尽量达到“双赢、互利”的目的 ③需具有广泛的多方协调能力，有敏锐的洞察力和市场分析预测能力 ④拥有扎实的专业知识和实践经验

　　⑤能分清主次客户，提高工作效率，能及时关注市场上柜卷烟的生命周期状况及重点品牌的市场走向 ⑥为客户补充货源，阻止外来卷烟上柜，若发现私、假卷烟，也需及时反馈给业务主管部门 ⑦及时检查自己任务的完成情况，指导客户合理安排卷烟库存量。

　　 5、你为什么愿意为本公司工作?

　　我觉得选择一份好的工作是实现自我价值的体现，烟草公司是属于国有烟草专卖专营的商业批发企业。

　　当然，自己选择这个公司，是坚信本公司的美好前景，也是为自己选择一个能充分发挥能力的舞台。

　　选择这个公司，我觉得不应该仅仅关注公司的薪水与福利，而应该往自我能力和竞争力上思考，毕竟年轻的自己还有许多东西需要汲取，所以选择了这个公司的这份工作，学习的过程任重道远。

　　 6、你认为公司为什么要聘用你?

　　第一、我有很高的热情去做好这个工作

　　第二、我有信心把这份工作做好

　　第三、我有一定的工作经验

　　 7、如果我们聘用你，你会待多久?

　　既然选择了这份工作，就没有想过一进来就考虑跳槽，应届生频繁地跳槽是一个社会现象，但我觉得，企业与自己是一个双向选择，但选择不能盲目，自己既然选择了企业，那表示对这份工作有意向，而企业聘用自己，说明企业有心栽培。

　　所以我不会考虑跳槽问题，而更多的思考是如何去做好一份工作，去实现企业与自己的价值。

　　 8、你的`长处是什么?

　　认识我的朋友都说我的长处是交际，自己也在这方面下了一些功夫，我坚信只要努力了即使达不到预计的成功都是一种收获。

　　其次，我还擅长书法、国画，在学生时代也获得过一些奖次。悠闲时也爱看些书籍，上上网，发表一些见解独特的文章。

　　 9、什么是你最大的弱点?

　　人无完人，我觉得自己的弱点是人事方面经验不是很丰富。相关的工作经验还处于培养时期，自己的一些独特想法与付诸实践所取得的效果还有一定的差距。并且一些情况下自信过于强烈，对失败的认识还不是很透彻。不过既然认识到这些缺点，我也会慢慢去修正。谢谢

　　 10、你的期望待遇是什么?

　　我个人不是很在意刚进去时候的待遇，当然，期待的待遇是高的，不过这要等未来才能实现，刚进一个企业应该更好的展现自我，去博得大家的信任，去做好自己的本职工作，待遇问题等以后用事实说话。谢谢

　　 11、先前你有没有落实工作了?

　　很遗憾，由于自己的原因，离开杭州后一直在找一份自己喜欢的工作，以前的工作应该算是一种实习，实习结束后就回来了。自己也打算在临海发展、

　　 12、你的工作中最令你喜欢的部分是什么?

　　我觉得最另自己喜欢的是完成了既定的工作任务，并给自己下达的第二天的任务也目标清晰，工作状态高涨。我是一个喜欢有计划性的人，喜欢把自己一段时间的工作计划列成表格，喜欢从事具有挑战性的工作。所以，可以说，最令我喜欢的部分是工作中的挑战。

　　 13、你找工作时最在乎的是什么?请谈一下你理性中的工作。

　　我觉得自己找工作最在乎的是能力的培养，主要包括团队能力、分析预测能力和自我竞争力。工作中的能力是给企业甚至自己带来惊喜的物质保证。我理性的工作就是有清晰的目标，有稳健的团队，有奋斗的激情。

　　 14、请介绍你的家庭

　　 15、请谈谈在工作时曾经令你感到十分沮丧的一次经验。

　　就是自己大二从事推广××××(某某卡)的时候我们按照自己的经验选择了一个不错的小区，但我们忽略了事前分析小区的人员分布，因为小区刚建不久，居住者大部分是租进来的外来务工人员，

　　他们自己没有时间利用网络学习，更很少有孩子在那小区留住，所以我们在那推广了一整天也才推出去一张卡。当时对自己的自信心有点打击。

　　 16、你曾经因为某一次特殊经验而影响曰后地工作态度吗?

　　我相信我不会，因为工作经验是在不断的积累，成功的工作经验可以用来推广到其他方面，失败的工作经验可以用于自己做更好的总结，“因为一棵树而放弃一片森林”，我觉得是不可取的，应该看得远一点。

　　 17、如果我雇用你，你觉得可以为部门带来什么样的贡献?

　　刚进来，我会虚心向老的员工学习，积累工作经验，当自己的专业技能达到一定程度的时候，我会尽最大的可能去拓展这一业务圈，让公司用最少的成本去博得最大的价值。争取为部门争光。

　　 18、你如何规划未来，你认为5年后能达到什么样的成就?

　　第一年是业务培训与起步时期，第二年开始是拓展时期，第三年在相关部门应该会有所建树，5年后争取在自己的岗位上做得最好。

　　 19、你如何克服工作的低潮期?

　　每个人都可能因为周围的变化而出现一定的心态波动，但这并不是影响工作的关键因素。记得《钢铁是怎样炼成》的男主人公说过“人应该支配习惯而非习惯支配人”，所以我觉得，在工作的低潮时期，更应该放轻松些，多想想为什么会造成这个原因，多去用实际行动来克服低潮时心情。

　　 20、谈谈你对加班的看法。

　　加班是因为自己的工作目标还没有完成或需要临时的补充，加班对一个公司还是自己来说都是突然的，如果既定的任务出色完成那加班的机会就少了。我觉得加班能充实自己，所以会一切服从公司的安排

前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。

一、样式初始化

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1.pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体，如果使用 rem 单位，则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色，将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none；

根据需要设置颜色和背景色。

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译无） 前缀：-webkit-

2.IE （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-ms-

3.Firefox （火狐浏览器） 内核：Gecko（中译壁虎） 前缀：-moz-

4.Opera （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o-

例：

-webkit-border-radius: 10px; / 谷歌浏览器 / -ms-border-radius: 10px; / IE浏览器 / -moz-border-radius: 10px; / 火狐浏览器 / -o-border-radius: 10px; / 欧朋浏览器 / border-radius: 10px; 1 2 3 4 5 三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE 浏览器使用 CSS hack（ 即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6 的 hack 符号：- 或 _

兼容 IE6 、7 的 hack 符号：` ~ ! @ # $ % ^ & * ( ) + = | 《 》 , . 任意一个符号

兼容 IE6、7、8 的 hack 符号：.

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8 的 hack 符号：\0/

兼容 IE8、9、10 的 hack 符号：\0

兼容 IE6、7、8、9、10 的 hack 符号：\9

例：

/ hack符号在前 / _border-radius: 10px; / IE6 / +border-radius: 10px; / IE6\7 / .border-radius: 10px; / IE6\7\8 /

/ hack符号在后 / border-radius: 10px\0/; / IE8 / border-radius: 10px\0; / IE8\9\10 / border-radius: 10px\9; / IE6\7\8\9\10 / 1 2 3 4 5 6 7 8 9 2.为不同的版本编写独立的样式，其他浏览器识别不到。

例：大于 IE9 的浏览器使用这个单独的 style9.css 样式

1 2 3 例：只有 IE6 浏览器使用的 style6.css 样式

1 2 3 四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题：firefox 浏览器不支持 hand 值，但其他浏览器均支持 pointer 值。 解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

解决: 可通过设置父级 text-align:center 实现。

3.属性值 “inherit”

问题：IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

解决：谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题：IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const，IE10 及以下不支持任何 ES6 语法。

解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。

解决：可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题：IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

解决：在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。

解决：obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题：IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法，而其他浏览器是 addEventListener() 方法。

解决：判断 IE 浏览器版本，如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法，注意 attachEvent() 方法的用法，第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

阿里前端面试题（1）——解构/异步/markdown语法解析

a. 不完全解构，也会成功，不会报错 b. 只要支持 Iterator 接口，都可以被解构赋值 c. null 可以替代默认值，而成功的解构赋值 d. 解构中不定参数可以出现在除第一个以外的其他位置 e. 解构是先找到同名属性，然后再赋给对应的变量 f. 默认值可以引用解构赋值的其他变量，但该变量必须已经声明

(d)

迭代一个对象的属性

不定参数只能放在最后一个位置

a. 在JavaScript中，任务被分为两种，一种宏任务（MacroTask），一种叫微任务（MicroTask），setTimeout 属于微任务 b. setTimeout(func, 500) 会精确的在 500ms 后执行 func c. Promise、generator、async/await 都是异步解决方案 d. process.nextTick、Promise 都属于 node 中的微队列 e. 浏览器的 Event Loop 和 node 的 Event Loop 是不同的，实现机制也不一样 f. 在 node 中setTimeout 和 setImmediate 执行阶段是一致的

(c,d,e) 解析：f 两者的执行顺序要根据当前的执行环境才能确定

（那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数）

***隐藏网址***

Markdown 是非常受技术人员喜欢的一种文本格式，请使用 JavaScript 来实现 marked 方法来进行 markdown 文本的 HTML 渲染，可以满足以下需求：

function marked(str) { // your code here }

marked(’@@whatever@@’).trim() // 《p》《blink》whatever《/blink》《/p 》 marked(’ abc @@def@@ ghi ’).trim() // 《p》《em》abc《/em》 《blink》def《/blink》 《strong》ghi《/strong》《/p 》 marked(’@@ cool @@’).trim() // 《p》《blink》《strong》cool《/strong》《/blink》《/p 》

可以实现题目中的要求，但是还不能满足“@@abc”这样缺少对应字符串的情况

2020年Web前端面试题汇总(一)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。1.说几条写JavaScript的基本规范?1)不要在同一行声明多个变量;2)请使用===/!==来比较true/false或者数值;3)使用对象字面量替代newObject这种形式;4)减少使用全局函数,全局变量;5)switch语句必须带有default分支;6)if语句必须使用大括号;7)for-in循环中的变量;应该使用var关键字明确限定作用域;从而避免作用域全局污染。2.说说平衡二叉树?平衡二叉搜索树(Self-balancingbinarysearchtree)又被称为AVL树。具有以下性质：1)它是一棵空树或它的左右两个子树的高度差的绝对值不超过1，并且左右两个子树都是一棵平衡二叉树。2)平衡二叉树必定是二叉搜索树，反之则不一定。3)平衡二叉树的常用实现方法有红黑树、AVL、替罪羊树、Treap、伸展树等。最小二叉平衡树的节点的公式如下：F(n)=F(n-1)+F(n-2)+1备注：1是根节点，F(n-1)是左子树的节点数量，F(n-2)是右子树的节点数量。3.清除浮动和解决垂直外边距重叠的解决方案?问题描述:1)父元素没有设置宽高，尺寸由子元素撑起;子元素一旦浮动，父元素高度会发生塌陷。2)子元素设置margin-top会作用的父元素的margin-top;此时会造成垂直外边距重叠。.clearfix::after,.clearfix::before{content:’’;display:table;clear:both;}4.sessionStorage、localStorage和cookie?相同点:都用于浏览器端存储的缓存数据;不同点:1)存储内容是否发送到服务器端当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费;xxxstorage则会将数据保存到本地，不会造成宽带浪费;2)数据存储大小不同Cookie数据不能超过4K，适用于会话标识;xxxstorage数据存储可以达到5M;3)数据存储的有效期限不同cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器;sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;4)作用域不同cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面;5.判断一个单词是否是回文?回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情景，叫做回文，也叫回环。比如cacac，redivider。letcheckPalindrom=(str)=》{returnstr===str.split(’’).reverse().join(’’);}6.不借助临时变量，进行两个整数的交换?输入a=3,b=1,输出a=1,b=3letswap=(a,b)=》{b=b-a;a=a+b;b=a-b;return;}7.请写出至少5个html5新增的标签，并说明其语义和应用场景?section：定义文档中的一个章节;nav：定义只包含导航链接的章节;header：定义页面或章节的头部;它经常包含logo、页面标题和导航性的目录。footer：定义页面或章节的尾部;它经常包含版权信息、法律信息链接和反馈建议用的地址。aside：定义和页面内容关联度较低的内容，如果被删除，剩下的内容仍然很合理。8.get和post请求在缓存方面的区别?get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。9.如何解决异步回调地狱?promise、generator、async/await10.图片的懒加载和预加载?预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。11.bind，apply，call的区别?通过apply和call改变函数的this指向，这两个函数的第一个参数都是一样的，表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。12.js怎么控制一次加载一张图片，加载完后再加载下一张?方法一:varobj=newImage();obj.src="#/21.jpg";obj.onload=function(){document.getElementById("pic").innnerHTML="";}

加载中