本文主要是介绍前端常见面试题（VUE/CSS/JS/JQuery/微信小程序），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

• 一、Vue面试题
• • 1.vue的特点是什么
  • 2.vue父与子如何传值
  • • Vue父组件传给子组件
    • Vue子组件给父组件传值需要使用自定义事件
  • 3.v-show和v-if指令的共同点和不同点?
  • • 共同点：
    • 区别：
  • 4.vue当中的指令和它的用法?
  • 5.vue-loader是什么?使用它的用途有哪些?
  • • 用途
  • 6.axios是什么?怎么使用?
  • 7.单页面应用和多页面应用区别及优缺点
  • 8.npm install常用的-S.-D、-g有什么区别?
  • 9.谈谈你对MVVM开发模式的理解
  • • MVC模式（Model-View-Controller）
  • 10、前端如何优化网站性能?
  • • 1、减少 HTTP 请求数量
    • 2、控制资源文件加载优先级
    • 3、利用浏览器缓存
    • 4、减少重排（Reflow）
    • 5、减少 DOM 操作
    • 6、图标使用 IconFont 替换
  • 11.vue中样式绑定语法
  • 12、如何避回调地狱?
  • • 1.promise
    • 2.async/await 方案
    • 3.模块化:将回调函数转换为独立的函数
    • 4.使用流程控制库，例如[aync]
  • 13、使用NPM有哪些好处?
  • 14、简述每个周期具体适合哪些场景
  • 15、一次完整的HTTP事务是怎样的一个过程?
  • 16、写一个function,清除字符串前后的空格。(兼容所有浏览器)
  • 17、如何消除一个数组里面重复的元素?
  • 18、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。
  • 19、常用的es6的功能
  • 20、link和@import的区别
  • 21、请描述一下cookies,sessionstorage和localStorage的区别?
  • 22、VUE事件修饰符
  • 23、npm命令（部分）
  • 24、vue中的ref和$refs的含义和用法
• 二、CSS面试题
• • 1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
  • • • IE盒模型和W3盒模型的区别：
  • 2、 CSS选择器有哪些?哪些属性可以继承?
  • • CSS选择符：
  • 3、CSS3有哪些新特性?
  • 4、px和em的区别
  • 5、如何使一个不定宽高的元素实现垂直水平居中
  • • 1.实现绝对定位元素的水平方向居中：margin: auto;
    • 2.让父盒子为flex容器：
    • 3.使用css3的 transform：
    • 4.使用css方法：
• 三、JS面试题
• • 1、JavaScript 的typeof 返回哪些数据类型?
  • 2、例举至少3种强制类型转换和种隐式类型转换?
  • • 1.强制类型转换:
    • 2.隐式类型转换:
  • 3、JavaScript的事件流模型都有什么?
  • 4、BOM对象有哪些，列举window对象?
  • 5、请简述AJAX及基本步骤
  • • 步骤
  • 6、HTTP状态消息200 302 304 403 404 500分别表示什么?
  • 7、GET和POST的区别，何时使用POST?
  • • GET和POST的区别
    • 何时使用POST
  • 8、js 字符串操作函数?
  • 9、怎样添加、移除、移动、复制、创建和查找节点?
  • • 1）创建新节点
    • 2）添加、移除、替换、插入
    • 3）查找
    • 4）属性操作
    • 5）复制
  • 10、3个使用this的典范型应用
  • • • 1、在HTML元素事件属性中使用
      • 2、构造函数中使用
      • 3、input点击，获取值
  • 11、js中数组常用的方法总结、包括ES6
  • • • 11.1ES6新增的方法
  • 12.JS中的call()和apply()方法和区别
  • 13.闭包是什么，有什么特性，对页面有什么影响?
  • • 闭包的特性：
    • 有什么特性？
    • 对页面有什么影响？
  • 14.js中的正则表达式(记住常用符号和方法，会写简单的正则表达式即可，不用深究)
  • 15、let 和 const 命令
  • • let命令
    • const命令
  • 16.变量的解构赋值
  • • 1.变量解构赋值
    • 2.数组解构
    • 3.对象解构赋值
    • 4.方法解构
    • 注意点
    • 5.字符串解构
    • 6.函数参数的解构赋值
  • 7.用js递归的方式写1到100求和
• 四、JQuery面试题
• • 1.jQuery库中的$()是什么？
  • 2.如何找到所有HTML select 标签的选择项
  • 3.$(this) 和 this 关键字在jQuery中有何不同
  • 4.jquery怎么移除标签onclick属性
  • 5、JQuery有几种选择器
  • 6、JQuery中的delegate()函数有什么作用？
  • 7、$(document).ready()方法和window.onload有什么区别？
• 五、微信小程序笔记
• • 1、简单描述下微信小程序的相关文件类型?
  • 2.请谈谈wxml与标准的html的异同?
  • 3.请谈谈WXSS和CSS的异同?
  • 4、小程序和Vue写法的区别?
  • 5、小程序页面间有哪些传递数据的方法?
  • 6、请谈谈小程序的生命周期函数?

一、Vue面试题

1.vue的特点是什么

1.国人开发的一个轻量级框架。
2.双向数据绑定，在数据操作方面更为简单。
3.视图，数据,结构分离,不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
4.组件化，方便封装和复用
5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作

2.vue父与子如何传值

Vue父组件传给子组件

第一步:父组件在引用组件是，通过属性绑定(v-bind: ) 的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用
第二步:把父组件传递过来的数据，在props数组中定义一下
1.组件中的所有props 中的数据，都是通过父组件传递给子组件的
2. props中的数据都是只读的，无法重新赋值
第三步:在该子组件中使用props数组中定义好的数据

Vue子组件给父组件传值需要使用自定义事件

流程:
1.子组件创建并监听自定义事件，
2.在事件函数里面执行emiti函数，通过emit把想传的值传给父组件
3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。

3.v-show和v-if指令的共同点和不同点?

共同点：

v-if 和 v-show 都是动态显示DOM元素。

区别：

1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性display。
2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。
v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3、性能消耗： v-if有更高的切换消耗。
v-show有更高的初始渲染消耗。
4、应用场景： v-if适合运行时条件很少改变时使用。
v-show适合频繁切换。

4.vue当中的指令和它的用法?

1. v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2. v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3. v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4. v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5. v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6. v-model：实现表单输入和应用状态之间的双向绑定
7. v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8. v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

5.vue-loader是什么?使用它的用途有哪些?

它就是webpack的一个加载器，主要作用就是解析和转换.vue文件，提取vue中的逻辑代码，style样式和html模板，再分别交给对应的loader去处理，
简单来说，就是把你写的vue代码转换成浏览器能识别的，然后还包含了一些打包和编译的功能

用途

template

1. 默认语言 HTML
2. 每个.vue文件最多包含一个
3. 内容被提取为成字符串，可以加jade(简化代码的书写方式),

script

1. 默认语言 JS
2. 每个文件最多包含一个
3. 可以写es6

style

1. 默认语言 css
2. 一个vue文件可以包含多个style标签
3. 可以写scss和less,还能用stylus写样式

6.axios是什么?怎么使用?

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

1. 在脚手架使用

npm install axios

1. 在脚手架的main.js中配置

import axios from 'axios'
//配置访问服务器基础路径
axios.defaults.baseURL="服务器地址";
//保存session信息
axios.defaults.withCredentials=true;
//将axios注册到vue中
Vue.prototype.axios=axios;

1. 利用qs发送axios请求

axios.post("url",Qs.stringify({参数:值,参数:值}))
.then(res=>{....})

7.单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的
页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1. 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2. 前后端分离
3. 页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1. 不利于seo
2. 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3. 初次加载时耗时多
4. 页面复杂度提高很多

8.npm install常用的-S.-D、-g有什么区别?

npm i module_name -S 即 npm install module_name --save写入dependencies，发布到生产环境

npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies，发布到开发环境

npm i module_name -g 即 global全局安装(命令行使用)

npm i module_name 即 本地安装(将安装包放在./node_modules下)
注:使用npm install(简写npm i) ---->使用cnpm更快!

9.谈谈你对MVVM开发模式的理解

MVM分为Model、View、ViewModel三者。

1. Model:代表数据模型，数据和业务逻辑都在Model层中定义;
2. View:代表U视图，负责数据的展示;
3. ViewModel:负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作;
   Model和view并无直接关联，而是通过viewModel来进行联系的，Model和viewNode1之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在Mode1中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

MVC模式（Model-View-Controller）

三个基本部分：模型 （Model）、视图（View）和控制器（Controller）

• （控制器Controller）- 负责转发请求，对请求进行处理。
• （视图View） – 界面设计人员进行图形界面设计。

• （模型Model） – 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

10、前端如何优化网站性能?

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换

11.vue中样式绑定语法

1.对象方法v-bind:class=" { 'orange ' :isRipe， 'green ':isNotRipe}”
2.数组方法v-bind: class=" [class1,c1ass2]"
3.行内v-bind : style="{color : color , fontsize:fontsize 'px '}”

12、如何避回调地狱?

1.promise

promise只有两个状态resolve和reject

如果已经有了状态(resolve或者reject)，则立刻调用回调函数

在异步事件状态pendding->resolve回调成功时，通过调用resolve函数返回结果；当异步操作失败时，回调用reject函数显示错误信息。

New Promise( function(resolve, reject) {...} /* executor */  );

调用then方法获取执行结果

promise.then((resolve) => {
        console.log(resolve);
}, (err) => {
        console.log(err);
});

2.async/await 方案

关键字：async：async关键字用于修饰function

关键字：await：：await关键字只能在async函数中才能使用

async function fn(){
    await sayhello();
    return 0;
}

async表示函数里有异步操作，

await表示让出当前线程,紧跟在后面的表达式需要等待结果。返回值是 Promise

async函数内部return语句返回的值，会成为then方法回调函数的参数。

3.模块化:将回调函数转换为独立的函数

4.使用流程控制库，例如[aync]

13、使用NPM有哪些好处?

1、通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。

2、对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本

3、npm install xx -S：发布到生产环境

 npm install -D的命令含义：发布到开发环境

4、npm uninstall xx是：卸载npm包

5、项目转换的时候，不会把node_modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来(npm install安装所有的依赖)

  初始化：npm init -y

14、简述每个周期具体适合哪些场景

beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created（）被创建 data 和 methods都已经被初始化好了，可以调用了

beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和

methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

15、一次完整的HTTP事务是怎样的一个过程?

基本流程:
a.域名解析
b.发起TCP的3次握手
C.建立TCP连接后发起http请求
d.服务器端响应http请求,浏览器得到htm|代码
e.浏览器解析html代码，并请求html代码中的资源
f.浏览器对页面进行渲染呈现给用户

16、写一个function,清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {
    if (str & typeof str === "string") {
        return str .replace(/(^s*)I(s*)$/g,""); //去除前后空白符
    }
}

17、如何消除一个数组里面重复的元素?

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

18、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

//1、条件Hack
<! --[if IE]>
<style>
.test{color : red; }</style>
<! [endif]-->

// 2、属性Hack
.test{
color : #0909;  /*t For IE8+*/
*color : #f00;  /*For IE7 and earlier */
_color : #ff0;  /*For IE6 and earlier */}

//3、选择符Hack
 *htm1 .test{color : #090; }   /*iFor IE6 and earlier * /
 *+ html .test{color : #ff0;}  /*For IE7*/

19、常用的es6的功能

箭头函数 promise this 指向 解构赋值

20、link和@import的区别

两者都是外部引用CSS的方式，但是存在—定的区别:
(1) link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务;

@import属于CSS范畴，只可以加载CSs。

(2) link引用CSS时，在页面载入时同时加载;

@import需要页面完全载入以后再加载。

(3) link是XHTML标签，无兼容问题;

@import则是在CSS2.1提出的，低版本的浏览器不支持。

(4) link支持使用Javascript控制DOM改变样式;

@import不支持。

21、请描述一下cookies,sessionstorage和localStorage的区别?

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小

cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

22、VUE事件修饰符

   <!--阻止事件冒泡.stop-->
    <div id="div1" class="stop" @click.stop="event1(1)">
    
    <!--使用事件捕获模式.capture-->
    <div id="div4" class="stop" @click.capture="event1(4)">
    
    <!--事件只作用本身.self，类似于已阻止事件冒泡-->
    <div id="div7" class="stop" @click.self="event1(7)">
    
    <!--阻止浏览器默认行为.prevent-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent="prevent">dk's github</a>
    
    <!--只作用一次.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.once="prevent">dk's github</a>
    
    <!--修饰符可以串联.click.prevent.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent.once="prevent">

23、npm命令（部分）

• npm install 安装模块
• npm uninstall 卸载模块
• npm update 更新模块
• npm outdated 检查模块是否已经过时
• npm ls 查看安装的模块
• npm init 在项目中引导创建一个package.json文件
• npm help 查看某条命令的详细帮助
• npm root 查看包的安装路径
• npm config 管理npm的配置路径
• npm cache 管理模块的缓存
• npm start 启动模块
• npm stop 停止模块
• npm restart 重新启动模块
• npm test 测试模块
• npm version 查看模块版本
• npm view 查看模块的注册信息
• npm adduser 用户登录
• npm publish 发布模块
• npm access 在发布的包上设置访问级别
• npm package.json的语法

24、vue中的ref和$refs的含义和用法

1. ref:用在DOM层给dom元素或子组件信息绑定注册信息，引用信息会注册到父组件的$refs属性上面，如果在普通DOM上使用在代表的是DOM元素，如果是在子组件上使用，则代表的是组件实例
2. $refs:用来在Vue对象中引用注册了ref的元素

**ref有什么作用呢：**只要是想要在Vue中使用DOM元素，则必须在元素上用ref注册引用信息，之后再Vue中用$ref.注册名字引用该元素

二、CSS面试题

1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

IE盒模型和W3盒模型的区别：

（1）IE盒模型的width包含：content+border+padding

（2）W3C盒模型的width只包含：content

（3）用来控制元素的盒子模型的解析模式，默认为content-box
（4）context-box: W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
（5）border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

2、 CSS选择器有哪些?哪些属性可以继承?

CSS选择符：

1. id选择器(#myid)
2. 类选择器(.myclassname)
3. 标签选择器(div, h1, p)
4. 相邻选择器(h1 + p)
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=”external”]）
9. 伪类选择器（a:hover, li:nth-child）

可以继承的：

1. 字体相关：font-family、font-style、font-size、font-weight 等；

2. 文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；

3. 列表相关：list-style、list-style-image、list-style-type、list-style-position 等；

4. 其他属性：visibility、cursor 等；

   不能继承的：

5. border

6. padding

7. margin

8. width

9. height

3、CSS3有哪些新特性?

1. CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image

2. 文字阴影:text-shadow: 5px5px 5px#FF0000;(水平阴影，垂直阴影，模糊距离，阴影颜色)

   强制文本换行（word-wrap），线性渐变（linear-gradient）

3. 旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

4. 增加了更多的CSS选择器、多背景、rgba()；

5. 在CSS3中唯一引入的伪元素是 ::selection ；

6. 媒体查询(@media)，多栏布局（flex）

4、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em

5、如何使一个不定宽高的元素实现垂直水平居中

以此为例：

<div class="father">
    <div class="son"></div>
</div>

1.实现绝对定位元素的水平方向居中：margin: auto;

.father {
      width: 300px;
      height: 100px;
      background-color: aquamarine;
      position: relative;
}

.son {
      width: 46px;
      height: 40px;
      background-color: bisque;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}

2.让父盒子为flex容器：

.father {
      width: 200px;
      height: 100px;
      background-color: antiquewhite;
      /* 设置父项 */
      display: flex;
      /* 设置子元素在主轴上的排列方式 */
      justify-content: center;
      /* 设置子元素在侧轴的排列方式(单行排列方式) */
      align-items: center;
}
 .son {
     width: 100px;
     height: 40px;
     background-color: bisque;
}

3.使用css3的 transform：

父盒子设置：dispaly: relative;

子盒子设置：transform: translate(-50%,-50%); position: absolute; top:50%; left:50%;

.father {
    dispaly: relative;
    background-color: antiquewhite;
}
.son {
   position: absolute; 
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);  
   background-color: bisque;
}

4.使用css方法：

.father  {
      display:tbale-cell; 
      text-align:center;
      vertical-align:middle;
       background-color: antiquewhite;
}
.son {
      dislplay: inline-block;  
      vertical-align:middle;
      background-color: bisque;
}

属性：display:tbale-cell;

1. 使元素表现出类似td的效果，可以使不固定大小的元素出现垂直居中的效果
2. 不要与 float:left; position:absolute;一起使用
3. magin设置无效，可以响应padding设置
4. 该属性对宽度和高度比较敏感
5. 不要对display:tbale-cell使用百分比设置宽度和高度

三、JS面试题

1、JavaScript 的typeof 返回哪些数据类型?

<script>
    console.log(typeof 123);             //number
    console.log(typeof '123');           //string
    console.log(typeof function);        //报错 function是关键字
    console.log(typeof string);          //undefined
    console.log(typeof undefined);       //undefined
    console.log(typeof null);            //object 较为特殊
    console.log(typeof isNaN);           //function 是个判断函数
    console.log(typeof isNaN(123));      //boolean
    console.log(typeof []);              // object 数组也是对象
    console.log(Array.isArray);          //ƒ isArray() { [native code] }
    console.log(Array.isArray());        //false
    console.log(toString.call([]));      //[object Array]
    console.log([].constructor);         //ƒ Array() { [native code] }
</script>

总结出来

1. undefined
2. string
3. boolean
4. number
5. Object
6. Function

2、例举至少3种强制类型转换和种隐式类型转换?

1.强制类型转换:

明确调用内置函数，强制把一种类型的值转换为另一种类型。

强制类型转换主要有:

1. Boolean()
2. Number()
3. String()
4. parselnt()
5. parseFloat()

2.隐式类型转换:

在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。

1. == 之间发生的隐式类型转换；
2. +*/- 操作符的隐式类型转换；
3. || && 辑运算符；
4. ± ! 一元运算符

3、JavaScript的事件流模型都有什么?

**事件流：**当你在页面触发一个点击事件后，页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件，因为元素是在容器中的。事件发生的顺序就是事件流，不同的浏览器对事件流的处理不同。

1. **事件捕捉阶段:**事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素;
2. **处于目标阶段:**处在绑定事件的元素上;
3. **事件冒泡阶段:**事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素;

4、BOM对象有哪些，列举window对象?

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

5、请简述AJAX及基本步骤

简述AJAX: AJAX即"Asynchronous Javascript And XML”(异步JavaScript和XML)，

是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

步骤

1. 创建一个XMLHttpRequest对象，也就是创建一个异步调用对象。
2. 创建一个新的HTTP请求，并指定该HTTP请求方式，URL和验证信息。
3. 设置响应HTTP请求状态变化的函数。
4. 发送HTTP请求
5. 获取异步调用返回的数据。
6. 使用JavaScript和DOM实现局部刷新。

// 实例化一个xhr对象
let xhr = new XMLHttpRequest()
// 监听状态的变化
xhr.onreadystatechange = () =>{
    // 监听数据请求完毕  readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
    if(xhr.readyState === 4){
      // 判断状态码
      if( xhr.status === 200 ){
         //将数据转化成json对象
          alert(JSON.parse(xhr.responseText)) 

      }                                       
    }
}
// 设置请求  GET是请求方式(要传递的参数可以写在url后面)  url是网址  true是异步请求数据改为false就是同步
xhr.open("GET",url,true);
// 发送数据 也可以发送post请求要传递参数
xhr,send(null)

get 请求

1. 创建一个XMLHttpRequest对象
2. 调用该对象的open方法
3. 如果是get请求，设置回调函数onreadystatechange = callback
4. Send

post 请求

1. 创建一个XMLHttpRequest对象
2. 调用该对象的open方法
3. 调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
4. 设置回调函数onreadystatechange = callback
5. Send

6、HTTP状态消息200 302 304 403 404 500分别表示什么?

**200：**请求已成功，请求所希望的响应头或数据体将随此响应回。

**302：**请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。

**304：**如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

**403：**服务器已经理解请求，但是拒绝执行它。

**404：**请求失败，请求所希望得到的资源未被在服务器上发现。

**500：**服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

7、GET和POST的区别，何时使用POST?

GET和POST的区别

（1）get是从服务器上获取数据，post是向服务器传送数据。

（2）get是将参数数据加到URL中，用户可以看到。post是将内容放置在http请求信息体内传送，用户看不到这个过程。

（3）对于get方法，服务器端是用Request.QueryString获取变量的值，对于post方法，服务器端用Request.Form获取提交的数据。

（4）get传送的数据量较小，不能大于2kb。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80kb，IIS5中为100kb。

（5）get安全性非常低，post安全性较高。但是执行效率却比post方法好。

何时使用POST

1.无法使用缓存文件；

2.向服务器发送大量数据；

3.发送包含未知字符的用户输入时，post比get更稳定也更可靠

8、js 字符串操作函数?

1、charAt(索引值) //查找具体的位置

"tian-qin-bai".charAt(0);  //返回t

2、indexOf(searchValue[,fromIndex]) //返回字符串中一个子串第一处出现的索引，找不到时返回-1

"tian-qin-bai".indexOf("-");  //返回4
"tian-qin-bai-lucky".indexOf("-");  //返回4
"tian-qin-bai".indexOf("qin");  //返回5,即查找字符串的第一个位置
"micromajor".indexOf("-");  //返回-1

3、search(regexp) 返回匹配的位置，找不到返回-1

"tianbaiqin123".search(/[0-9]/);  //返回10
"tianbaiqin123".search(/[A-Z]/);  //返回-1

4、match(regexp) 返回匹配到的字符，以数组形式返回;找不到返回null

"tianbaiqin123".match(/[0-9]/);  //返回["1"]
"tianbaiqin123".match(/[0-9]/g);  //返回["1","2","3"]
"tianbaiqin123".match(/[A-Z]/);  //返回null

5、replace(regexp|substr,newSubstr) //找到并替换成相应 的字符串

"tianbaiqin123".replace("123","###");  //返回"tianbaiqin###"
"tianbaiqin123".replace(/[0-9]/,"#");  //返回"tianbaiqin#23"
"tianbaiqin123".replace(/[0-9]/g,"#");  //返回"tianbaiqin###"
"tianbaiqin123".replace(/[0-9]/g,"");  //返回"tianbaiqin"

6、substring(indexA,indexB) //字符串截取准确的字符，indexA首位置（包含），indexB末尾位置（不包含）

"tianbaiqin".substring(5,7);  //返回"ai"
"tianbaiqin".substring(5);  //返回"aiqin"

7、slice(beginSlice,endSlice) //字符串截取，首末位置，与subString()大同小异，然后不同的是可以传入负值（负值是从末尾数负数）

"tianbaiqin".slice(5,7);  //返回"ai"
"tianbaiqin".slice(5);  //返回"aiqin"
"tianbaiqin".slice(1,-1);  //返回"ianbaiqi"
"tianbaiqin".slice(-3);  //返回"qin"

8、substr(index,length) //返回匹配的字符串

"tianbaiqin".substr(5,2);  //返回"ai"
"tianbaiqin".substr(5);  //返回"aiqin"

9、slipt(separator[,limit]) //分隔符函数，以数组方式返回分隔后的字符串

"tian qin".split(" ");  //返回["tian","qin"]
"tian qin".split(" ",1);  //返回["tian"]
"tian1qin2bai".split(/[0-9]/);  //返回["tian","qin","bai"]

10、toLowerCase() //将所有的字符串都转换为小写字母

"TianBaiQin".toLowerCase();   //返回"tianbaiqin"

11、toUpCase() //将所有的字符串都转换成大写字母

"TianBaiQin".toUpperCase();   //返回"TIANBAIQIN"

12、String() //转字符串

String(123);   //"123"
String(null);   //"null"

9、怎样添加、移除、移动、复制、创建和查找节点?

1）创建新节点

1. createDocumentFragment() //创建一个DOM片段
2. createElement() //创建一个具体的元素
3. createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

1. appendChild() //添加
2. removeChild() //移除
3. replaceChild() //替换
4. insertBefore() //插入
5. insertAfter() //添加

3）查找

1. getElementsByTagName() //通过标签名称
2. getElementsByName() //通过元素的Name属性的值
3. getElementById() / /通过元素Id，唯一性
4. getElementsByClassName() //通过元素class
5. querySelector() //获取指定元素
6. querySelectorAll() //获取所有元素

4）属性操作

1. getAttribute(key) //通过名称获取属性的值
2. setAttribute(key,value) //创建或改变某个新属性
3. hasAttribute(key) // 判断是否有指定的属性存在，如果存在返回 true，否则返回 false
4. removeAttribute(key) //删除指定的属性

5）复制

1. Node.cloneNode() //浅克隆，只复制标签本身
2. Node.cloneNode(true) //深克隆，复制标签本身以及所有后代

10、3个使用this的典范型应用

1、在HTML元素事件属性中使用

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

2、构造函数中使用

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

3、input点击，获取值

<input type="button" id="text" value="点击一下" />

<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

11、js中数组常用的方法总结、包括ES6

**1.push() 后增 **

push()方法可以向数组后添加一个新的元素，并返回新数组的长度。

末尾添加，返回长度，改变原数组

var a = [1,2,3]
var b = a.push(4)
 
console.log(a)  // [1,2,3,4] 
console.log(b)  // 4

2.unshift() 前增

unshift()可以向数组前添加一个或多个元素，并返回新的长度

首部添加，返回长度，改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)
 
console.log(a)  // [0,1,2,3,4]
console.log(b)  // 5

3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除，返回被删除的元素，改变原数组

var a = [1,2,3]
var b = a.pop()
 
console.log(a) // [1,2]
console.log(b) // 3

4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素，返回被删元素，改变原数组

var a = [1,2,3]
var b = a.shift()
 
console.log(a) // [2,3]
console.log(b) // 1

5.splice() 修改删除

plice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素，并从index开始新增元素1~N，放回被删除的元素组成的数组

对数组进行删除修改，返回被删除的元素组成的数组，改变原数组

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
 
console.log(a)  // [1,3,[2,3,4],5,3]
console.log(b)  // [2]

6.concat() 拼接

concat() 方法用来合并两个或多个数组

合并两个或多个数组，返回新数组，不会改变原数组

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)
 
console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5]

7.slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组

返回新数组，不改变原数组

var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组  
var c = a.slice() 
console.log(a) // [1,2,3] 
console.log(b) // [1]
console.log(c) // [1,2,3]    
console.log(a===c)  // false // 注意 a !== c 
 
// 负数表示从后往前数
var d = a.slice(-1,-2)   
console.log(d) // []   从左向右截取，所以说为[]
 
var e = a.slice(-1)  
console.log(e)  // [3]

8.join()

join() 方法用来将数组转换为字符串

不改变原数组，返回转换后的字符串

var a = [1,2,3,4,5]
 
console.log(a.join(','))  // 1,2,3,4,5
console.log(a)  // [1,2,3,4,5]

9.sort() 排序

按ascii码排序

改变原数组，返回排序后的数组

var a = ['a','b','d','c']
 
console.log(a.sort())  // ['a','b','c','d']
console.log(a)  // ['a','b','c','d']

10.reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。

返回的是颠倒后的数组，会改变原数组。

var a  = [1,3,2,7,6]
 
console.log(a.reverse())  // [6,7,2,3,1]
console.log(a)  // [6,7,2,3,1]

11.indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询

不会改变原数组，返回找到的index,否则返回-1

若不使用下标，则一般通过includes()方法代替indexOf()

var a = [1,2,4,3,4,5]
 
console.log(a.indexOf(4))  // 2
console.log(a.indexOf(4,3)) // 4

12.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变

filter()的参数是一个方法

var a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]

13.map() 格式化数组

map() 方法来根据需求格式化原数组，返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

14.every()

对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5]
 
var b = a.every(function(current,index,array){
       return current < 6
})
 
var c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false

15.some()

对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5]
 
var b = a.some(function(current,index,array){
       return current > 4
})
 
var c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false 

16.forEach() 数组遍历

遍历整个数组，中途不能中断

var arr = ['a','b','c']
var copy = []
arr.forEach(function(item){
     copy.push(item)   
})
console.log(copy)

11.1ES6新增的方法

**1.find() **

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，

一般在需要使用找到的元素时，用find()方法

2.findIndex()方法

findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

3.includes()

includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。

对于复杂数组，则可以使用some()方法替代includes()方法

4.Array.isArray()方法

用来判断一个元素是否为数组

12.JS中的call()和apply()方法和区别

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

**call **：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

call 与 apply 的相同点：

• 方法的含义是一样的，即方法功能是一样的；
• 第一个参数的作用是一样的；

call 与 apply 的不同点：两者传入的列表形式不一样：

• call可以传入多个参数；
• apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

13.闭包是什么，有什么特性，对页面有什么影响?

闭包就是能够读取其他函数内部变量的函数。

闭包的特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

有什么特性？

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在
系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

对页面有什么影响？

• 通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅、更简洁的表达出代码；在某些方面提升代码的执行效率。

优点

• 逻辑连续，当闭包作为另一个函数调用参数时，避免脱离当前逻辑而单独编写额外逻辑。
• 方便调用上下文的局部变量，减少全局变量。
• 加强封装性，可以达到对变量的保护作用。

缺点

• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
• 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

14.js中的正则表达式(记住常用符号和方法，会写简单的正则表达式即可，不用深究)

符号

字符	说明
^	匹配输入字符串的开始位置。要匹配 “^” 字符本身，请使用 “/^”
$	匹配输入字符串的结尾位置。要匹配 “ " 字 符 本 身 ， 请 使 用 " / " 字符本身，请使用 "/ "字符本身，请使用"/”
( )	标记一个子表达式的开始和结束位置。要匹配小括号，请使用 “/(” 和 “/)”
[ ]	用来自定义能够匹配 ‘多种字符’ 的表达式。要匹配中括号，请使用 “/[” 和 “/]”
{ }	修饰匹配次数的符号。要匹配大括号，请使用 “/{” 和 “/}”
.	匹配除了换行符（/n）以外的任意一个字符。要匹配小数点本身，请使用 “/.”
?	修饰匹配次数为 0 次或 1 次。要匹配 “?” 字符本身，请使用 “/?”
+	修饰匹配次数为至少 1 次。要匹配 “+” 字符本身，请使用 “/+”
*	修饰匹配次数为 0 次或任意次。要匹配 “" 字符本身，请使用 "/”
|	左右两边表达式之间 “或” 关系。匹配 “|” 本身，请使用 “/|”

方法

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

**exec() **一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）

search() 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。

**match()**一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。

15、let 和 const 命令

let命令

1.ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

2.不存在变量提升

1. var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。
2. let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

**3.暂时性死区 **

let在for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

4.let不允许在相同作用域内，重复声明同一个变量。

const命令

1.const声明一个只读的常量。一旦声明，常量的值就不能改变。

**2.const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。 **

3.const的作用域与let命令相同：只在声明所在的块级作用域内有效。

**4.const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。 **

5.const声明的常量，也与let一样不可重复声明。

16.变量的解构赋值

1.变量解构赋值

**ES6中，按照一定的模式，从数组或对象中提取值，对变量进行赋值。这个过程叫做解构赋值。 **

ES6 变量的解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined。

2.数组解构

// ES6 之前的写法
 const arr = ["元素一", "元素二", "元素三", "元素四", "元素五"];
 let one = arr[0];
 let two = arr[1];
 let three = arr[2];
 let four = arr[3];
 let five = arr[4];

 console.log(one);
 console.log(two);
 console.log(three);
 console.log(four);
 console.log(five);

// ES6 写法
 let [one, two, three, four, five] = ["元素一", "元素二", "元素三", "元素四", "元素五"];
 console.log(one);
 console.log(two);
 console.log(three);
 console.log(four);
 console.log(five);

输出的结果都是：

元素一

元素二

元素三

元素四

元素五

**本质上，这种写法属于“模式匹配”。只要赋值号两边的模式相同，左边的变量就会被赋予对应的值。 **

 let [a, [b, c]] = [1, [2, 3]];
 console.log(a);
 console.log(b);
 console.log(c);
 
 let [e, , f] = [4, 5, 6];
 console.log(e);
 console.log(f);

输出的结果：

1

2

3

4

6

解构失败时，变量的值为undefined

 let [a, b] = [1];
 console.log(a); //1
 console.log(b); //undefined

不完全解构

let [a,b] = [1,2,3];
console.log(a);//1
console.log(b);//2

3.对象解构赋值

 const obj = {
   name: "亚索",
   skill: "hasakei"
 }
 let {name,skill} = obj;
 console.log(name); //亚索
 console.log(skill); //hasakei

变量名与属性名相同，才能取到正确的值。

如果想要自定义变量名，则用：进行修改。

 const obj = {
    name: "亚索",
    skill: "hasakei"
 }
 let {name: n,skill} = obj;
 console.log(n);
 console.log(skill);

4.方法解构

var obj = {
    r:function(){
    	console.log("狂风绝息斩");
    },
    e:function(){
    	console.log("e去不复返");
    }
}
const {r,e} = obj;
r();
e();

const obj = {
  p: [
    "hello", {
      y: "world"
    }
  ]
}
 let {p:[a,{y:b}]}=obj;
 console.log(a);
 console.log(b);

注意点

let x;
{x} = {x:1};
console.log(x);

以上代码是错误写法。{x}前面如果没有let ,const的变量声明的关键字，则js会将其视为代码块。

如果需要提前声明变量，则需要将解构语句用小括号包裹起来；

let x;
({x} = {x:1});
console.log(x);

数组本质也是特殊的对象，也可以对数组进行对象属性的解构。

const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
 let {
    length,
    0: first,
    4: last
 } = arr;
 console.log(length);  // 5
 console.log(first);   // 诺手
 console.log(last);    // 女坦

5.字符串解构

 const str = 'hello';
 let [a, b, c, d, e] = 'hello';  // [h, e, l, l, o]
 let {
    length
 } = 'hello';
 console.log(length); //5

类数组的对象都有一个length属性，我们可以对这个属性进行解构赋值。

6.函数参数的解构赋值

function add([x,y]){
	return x+y;
}
let sum = add([1,2]);
console.log(sum);//3

函数add的参数表面上一个数组，但是在传入参数的那一刻，数组参数会被解构成变量x和与y.

7.用js递归的方式写1到100求和

function add(num1,num2){
    var num = num1+num2;
    if(num2+1>100){
        return num;
    }else{
        return add(num,num2+1)
    }
}
var sum = add(1,2)

四、JQuery面试题

1.jQuery库中的$()是什么？

$()函数是jQuery()函数的别称。

$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。

你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

2.如何找到所有HTML select 标签的选择项

$(’[name=NameOfSelectedTag] :selected’)

1. $(’[name=NameOfSelectedTag] :selected’).text(); // 获取select选中项的文本
2. $(’[name=NameOfSelectedTag] :selected’).val(); // 获取select选中项的值

3.$(this) 和 this 关键字在jQuery中有何不同

1、this表示javascript的dom对象

2、$(this)表示把dom对象转换为jquery对象

3、jquery包的方法只能由jquery对象调用，不能用javascript的com对象使用

//这里的this表示被点击的输入框对象,可以使用javascript对该对象进行操作 
$("input").click(function(){     
   //jquery对象与dom对象取值方法不一样，要用jquery方法必须使用$(dom对象)转换                   
     var value=this.value;             
     var val=$(this).val(); 
})

4.jquery怎么移除标签onclick属性

设置onclick属性：$(“a”).attr(“onclick”);

删除onclick属性：$(“a”).removeAttr(“onclick”);

设置onclick属性：$(“a”).attr(“onclick”,“test()”);

5、JQuery有几种选择器

大概归纳为9种

1、基本的有id、标签、类、通配符选择器：

#id
element
.class
*

2、层次选择器：

ancestor descendant
parent > child
prev + next
prev ~ siblings

3、基本过滤器选择器

:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated

4、内容过滤器选择器

:contains
:empty
:has
:parent

5、可见性过滤器选择器

:hidden
:visible

6、属性过滤器选择器

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

7、子元素过滤器选择器

:nth-child
:first-child
:last-child
:only-child

8、表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

9、表单过滤器选择器

:enabled
:disabled
:checked
:selected

6、JQuery中的delegate()函数有什么作用？

delegate()会在以下两种情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$(“ul”).delegate(“li”,“click”,function(){

$(this).hide();

});

2、当元素在当前页面中不可用时，可以使用delegate()

7、$(document).ready()方法和window.onload有什么区别？

1.执行时间

1. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
2. $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

1. window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
2. $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

1. window.onload没有简化写法
2. ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可 以 简 写 成 (document).ready(function(){})可以简写成 (document).ready(function())可以简写成(function(){});

五、微信小程序笔记

1、简单描述下微信小程序的相关文件类型?

wxml 模板文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构

wsxx 样式文件，是一套样式语言，用于描述WXML的组件样式

js脚本逻辑文件，逻辑处理网络请求

json配置文件，小程序设置，如页面注册，页面标题及tabBar

app.json 整个小程序的全局配置，包括：

1. pages：[所有页面路径]
2. 网络设置：[网络超时时间]
3. 界面表现：[页面注册]
4. window：[背景色、导航样式、默认标题]
5. 底部tab等

app.js监听并处理小程序的生命周期函数、全局变量

app.wxss全局配置的样式文件

2.请谈谈wxml与标准的html的异同?

1. 都是用来描述页面的结构;
2. 都由标签、属性等构成;
3. 标签名字不—样，且小程序标签更少，单—标签更多;
4. 多了一些wx:if这样的属性以及{}}这样的表达式
5. WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

3.请谈谈WXSS和CSS的异同?

1. 都是用来描述页面的样子;
2. wXSS具有CSS大部分的特性，也做了—些扩充和修改;
3. wXSS新增了尺寸单位，wXSS在底层支持新的尺寸单位rpx;
4. wXSS仅支持部分CSS选择器;
5. wXSS提供全局样式与局部样式
6. wXSS不支持window和dom文档流

4、小程序和Vue写法的区别?

1、遍历的时候：

• 小程序：wx:for=“lists”
• Vue：v-for=“item in lists”

2、调用data模板(赋值)的时候：

• 小程序：this.data.item //调用 this.setData({item:1}) //赋值
• vue:this.item //调用 this.item=1 //赋值

5、小程序页面间有哪些传递数据的方法?

1. 使用全局变量实现数据传递
2. 页面跳转或重定向时，使用url带参数传递数据
3. 使用组件模板template传递参数
4. 使用缓存传递参数
5. 使用数据库传递数据

6、请谈谈小程序的生命周期函数?

1. onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
2. onShow() 页面显示/切入前台时触发，一般用来发送数据请求;
3. onReady() 页面初次渲染完成时触发,只会调用一次，代表g’g页面已可和视图层进行交互。
4. onHide() 页面隐藏/切入后台时触发,如底部 tab切换到其他页面或小程序切入后台等。
5. onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

== 有待完善。。。。。。 ==

这篇关于前端常见面试题（VUE/CSS/JS/JQuery/微信小程序）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！