找工作总结了一些面试题,希望对你有帮助,问题我会慢慢增加,附赠答案
1、微信支付流程
2、支付宝支付流程
3、手机号登陆流程
手机号登陆流程分为两种
一种是验证码登陆
另外一种是账号密码登陆
账号密码登陆
验证码登陆
详细文章查看 手机号登陆的两种方式
4、微信登陆流程
5、H5画布 Canvas怎么使用
HTML5 Canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
Canvas 标签只是图形容器,您必须使用Js脚本来绘制图形。下面是一个简单的Canvas案例
<canvas id="Cav" width="200" height="200"></canvas>
<script type="text/javascript">
var Cav=document.getElementById("Cav")//找到页面上的Canvas对象
var cxt=Cav.getContext("2d");//创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,
//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#1dffdd";//设置fillStyle属性可以是CSS颜色,渐变,或图案。
cxt.fillRect(0,0,100,50);//fillRect(x,y,width,height ) 方法定义了矩形当前的填充方式。
//前两个值表示填充位置,后两个值表示填充大小,只可以比原尺寸小,
//如果超出原尺寸,那么就填充原尺寸的大小
</script>
6、ES6常用的新语法有哪些,ES6降ES5的方法(兼容性)
(1) 不一样的变量声明const和let
const 声明一个只读的常量,一旦声明完成,不可以在更改 let 声明的变量只能在let所在的代码块内生效(局部) let不能重复声明一个变量而var可以 let必须先声明在使用,var可以先使用后声明 let没有变量提升
var x = 10;
// 这里输出 x 为 10
{ let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10
//let必须先声明在使用,var可以先使用后声明
console.log(a);//undefined
var a=20;
console.log(b);//报错
let b=30
(2) 模板字符串
模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法
(`${expression}`)的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,
如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,
它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。
在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。
(3) 箭头函数
箭头函数是函数的一种简写方式,使用()包裹参数后面用=>链接着函数体{}
箭头函数内不能用于构造函数,不能创建New实例
箭头函数里的this指向window对象
(4)set属性
set对象是值的集合,set对象允许你存储任何类型的唯一值,无论是[原始值]或者是对象引用。
set中的元素只会出现一次,及元素是唯一的
(5) map属性
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
键名必须是字符串,而值可以是字符串、对象、函数、NaN
(6) for...of循环
for...of循环遍历出来的是值而不是key
(7) 新增symbol数据类型
原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
- es6转es5使用 gulp-babel插件
9、数组去重方法有哪些,数组原生api有哪些(数组方法)
- 数组去重的方法
//数组去重的方法
//1、遍历数组法
var A1=[1,1,2,2,"3","3","true","true"]
function Re(array){
for(var i=0;i<array.length;i++){
for(var j=i+1;j<array.length;j++){
if(array[i]==array[j]){//对比两次遍历的值一样的剔除
array.splice(j,1);//将得到正确的值保存下来
j--;
}
}
}
return array
}
console.log(Re(A1));
//2、set方法去重
var A1=[1,1,2,2,"3","3","true","true"]
function Ra(array){
return Array.from(new Set(array))//set方法只保留唯一的值
}
console.log(Ra(A1));
//3、indexOF去重
var A1=[1,1,2,2,"3","3","true","true"]
function Ra(arr){
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(array[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
console.log(Ra(A1));
//4、sort()方法去重
var A1=[1,1,2,"3","3","true","true",2]
function Ra(arr){
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
console.log(Ra(A1));
- 数组的增删改查
//1、增加
//push()方法 可接收任意数量的参数,把它们逐个添加至数组末尾,并返回修改后数组的长度。
//unshift()方法 与push()方法类似,不过添加在数组的前端
//concat()方法 不修改原数组,需要一个新数组来接受,新数组里添加原数组和要添加的参数
/*splice()方法 可以把需要传入得参数写在任意位置里
splice()方法 需要传入3个值分别是splice(起始位置,删除数量,要加入的元素)*/
//2、删
//pop()方法 该方法可从数组末尾删除最后一项并返回该项。
//shift()方法 该方法可删除数组第一项并返回该项。
/*slice()方法 与concat()方法一样,返回一个新数组。slice()方法可以接受一或两个参数,即要返回项的起始和
结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有
两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。*/
//splice()方法 此方法在只要删除值的时候传入两个参数及删除起始位置和要删除的个数
//3、改
//splice()方法 在起始位置,删除要修改的参数,在加入新参数即可
//4、查
//indexOf()方法 从数组的开头开始查,若没有查到需要的参数,则返回-1
//lastIndexOf()方法 从数组的尾部开始查,和indexOf()一样,若没有查到需要的参数,返回-1
10、jQuerydom怎么转换成原生的dom
var $p = $('p') //jquery获取dom元素
var p1 = $p[0] //用新元素接受jq的dom
var p2 = $p.get(1)
11、flex布局常用属性有哪些
flex-direction 属性指定了弹性子元素在父容器中的位置。
justify-content 主轴对齐方式
align-items 侧轴对齐方式
flex-wrap 指定弹性盒子的子元素换行方式
12、Vue和原生js有何不同
(1)控件跟数据自动绑定,可以直接使用data里面的数据值来提交表单,对控件赋值也方便很多,只需要改变data的值,控件就会自动改变值。将复杂的界面操作,转化为对数据进行操作。
(2)代码可读性比较高,vue天生具有组件化开发的能力,因此不同的功能基本都是写在不同的模块里面,因此代码的可阅读性非常高。
(3)主路由、子路由、主页面、子组件的方式,各个路由之间传递值也很方便
13、Vue如何渲染数据
View也就是页面,Model是指数据,VM是Vue实例,页面所需的数据或者方法都定义在vm中
页面通过Vue实例(vm)来获取数据,数据改变是通过改变Vue实例中的数据使展示在页面上的数据发生改变
并不是直接改变页面上的数据
14、Vue双向绑定原理是什么
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,
通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
15、Vue钩子函数
beforeCreate 实例创建前
created 实例创建后
beforeMount Dom挂载前
mounted、 Dom挂载后
beforeUpdate 数据渲染前
updated、 数据渲染后
beforeDesotry 实例销毁前
destoryed 实例销毁后
16、Vue虚拟Dom是什么
Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树
提供与真实DOM节点所对应的虚拟节点vnode
将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图
17、duff算法
18、作用域有多少种
全局作用域
布局作用域
块级作用域
19、跨域怎么解决
1、response header
2、jsonp
20、Vue computed计算属性和wacth侦听属性有何不同
- computed
1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,
也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;
在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
- wacth
1. 不支持缓存,数据变,直接会触发相应的操作;
2.watch支持异步;
3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
4. 当一个属性发生变化时,需要执行对应的操作;一对多;
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
immediate:组件加载立即触发回调函数执行,
deep: 深度监听,为了发现**对象内部值**的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。
21、路由有哪几种
常用的是hash和history
22、hash和history的区别
hash也就是锚点(#), 本质上是改变window.location的href属性. 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
history模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。history模式下,前端的url必须和实际后端发起请求的url一致。
23、微信小程序的路由有哪几种
24、微信小程序返回到tabBar的路由是什么
25、css3新增那些东西
1、box-shadow盒子阴影
2、boder-image(图片边框)
3、boder-image(图片边框)
4、text-shadow(文本阴影)
5、动画
6、过度
7、媒体查询
8、弹性盒子 flex布局
26、html5新增那些东西
音频、视频、画布、本地存储、新的表单控件等
27、原型链是什么
1、JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
2、原型链,简单理解就是原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object的原型的时候,这条原型链就算到头了。
28、怎么实现两栏布局和栅栏布局
29、git常用的命令有哪些
Git 常用的六个命令
1、“git clone”克隆代码;
2、“git log”查看日志;
3、“git tag”查看标签;
4、“git branch”查看分支;
5、“git branch -a”查看远程分支;
6、“git pull”拉取。
30、js的数据类型有哪些
值类型(基本类型) :字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
31、盒子模型详解
32、router和route的区别是什么
this.$router是全局路由器对象 this.$route是当前激活的路由对象
33、Vue优化有哪些方法,应该怎么做?
34、Html语义化的理解
<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的
爬虫和机器很好地解析。
35、浏览器如何保存token值的
36、vueX详解
37、vue.js的两大核心
38、v-if和v-show分别是什么,使用场景是什么
39、vue父向子传值,和子向父传值