1.说一下对promise的了解
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大;
从语法上讲,promise是一个对象,从它可以获取异步操作的消息;
从本意上讲,它是承诺,承诺它过一段时间会给你一个结果;
有三种状态: pending(等待态),resolved(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
2.es6新增的特性
ES6新增的一些特性:
1)let声明变量和const声明常量,两个都有块级作用域
ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明
2)箭头函数
ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义
3)模板字符串
模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串
4)解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
5)for of循环
for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串
6)import、export导入导出
ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用
7)set数据结构
Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数
8)… 展开运算符
可以将数组或对象里面的值展开;还可以将多个值收集为一个变量
9)修饰器 @
decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10)class 类的继承
ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念
11)async、await
使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
12)promise
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大
13)Symbol
Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的
14)Proxy代理
使用代理(Proxy)监听对象的操作,然后可以做一些相应事情
3.实现双飞翼布局(两端固定,中间自适应)
方式一:通过flex弹性布局来实现
//HTML结构,div2是中间的自适应区域
...
<body>
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
...
*{ //先简单粗暴的解决一下浏览器的默认样式
margin: 0;
padding: 0;
border: 0;
box-sizing:border-box; //使用border-box,盒模型好计算,妈妈再也不用担心我算不清块宽高了
}
.wrap{
width: 100%;
height: 100%;
display: flex; //使用弹性布局
flex-flow:row nowrap; //以沿主轴方向行显示,不换行,从而来显示3个块
justify-content:space-around; //这一个加和不叫其实也没事,加上去的意思就是两端对齐
}
[class^='div']{ // 给所有的div都加上高和边框样式,方便观看,不然都缩成一条线了
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{ //给两端的div固定的宽
width: 200px;
background-color: #ccc;
flex-shrink: 1; //默认是1,所以不用写也没事,写出来自是表达这个意思
}
.div2{
background-color: #0f0;
flex-grow:1; //这个比较重要,作用是让第二个块的宽度撑满剩余的空间
}
方式二:通过定位来实现 (HTML结构不变,看样式)
.wrap{
width: 100%; //同样实现宽高100%铺开
height: 100%;
position: relative; //父层添加相对定位,让子元素相对父层来定位
}
[class^='div']{
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{
position: absolute;
width: 200px;
background-color: #ccc;
}
.div1{
left: 0; //固定在父层的左侧
top: 0;
}
.div3{
right: 0; //固定在父层的右侧
top: 0;
}
.div2{
background-color: #0f0;
/*这个是关键,我们没有给中间的div2添加过宽属性,所以默认占用父层宽的100%,
由于两侧块宽是固定的,所以中间的自适应块左右分别200px的外边距中间的content区域就会实现自适应*/
margin: 0 200px;
}
4.你所了解的数组的方法
1.将数组合并成字符串(返回字符串)[ Array.join() ]
var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串
2.倒序排列数组 [ Array…reverse() ]
var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]
3.Array.sort()方法,返回排序后的数组。如果数组包含undefined,会被排到数组的尾部。如果不带参数的调用sort(),数组元素以字母表顺序排序。
从大到小排列
var a = [2,33,1111,444];
a.sort()
console.log(a); //返回的结果是[1111, 2, 33, 444]
从小到大排列
var a = [2,33,1111,444];
a.sort(function (a,b) {
return a-b
})
console.log(a); //[2, 33, 444, 1111]
4.Array.concat(),拼接并返回一个新数组
var a = [1,2,3];
var b = a.concat(4,5);
var c = a.concat([4,5]);
console.log(a); //返回的还是[1,2,3]
console.log(b); //返回[1,2,3,4,5]
console.log(c); //返回[1,2,3,4,5]
// 复制数组
var a = [1,2,3];
var b = a.concat();
console.log(a); //返回[1,2,3]
console.log(b); //返回[1,2,3]
5.Array.slice()方法,返回截取子数组。不会改变原数组
var a = [1,2,3,4,5];<br>
a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置(包括),第二个参数是截取结束的位置(不包括)
a.slice(3); //返回[4,5]
a.slice(1,-1); //返回[2,3,4] 负数表示倒数
console.log(a); //返回[1,2,3,4,5]
6.Array.splice()方法,用来增加删除替换元素,会修改原数组!
数组的起始位置为0
var a = [1,2,3,4,5,6,7,8];
var b = a.splice(1,2); //第一个参数是截取的起始位置(包括),第二个参数是截取的个数,之后的参数就是添加在元数组的新值
console.log(a); //返回[1, 4, 5, 6, 7, 8]
console.log(b); //返回[2, 3]
eg:可以用来解决在数组起始部位加入数据
this.noticeMessageList.splice(0, 0, { fromUser: 'zhangq1',
noticeMessage: '此处添加message'})
7.push()方法与pop()方法
push()方法在数组的尾部添加一个或者多个元素,并返回数组的新长度。注意的是,改变的是原数组的值,返回的是新数组的长度;
pop()方法删除数组的最后一个元素,并返回它的删除值。也是改变原数组,返回的是删除的值。
8.unshift()方法与shift()方法
unshift()方法类似于push()不同的是,他是在数组头部添加,其他都一样
shift()方法则类比pop()方法。
9.toString()和toLocaleString()
toString()方法将每个元素转化为字符串,类似于不传参的join()方法。
toLocaleString()方法是toString()的本地化版本。
10.forEach()方法,从头至尾遍历数组,为每个元素调用指定的函数。
var a = [1,2,3,4,5];
var sum = 0;
a.forEach(function (value) {
sum += value
})
console.log(sum); //sum = 15
11.map()方法
和forEach()类似,调用数组的每个元素传递给指定函数,并返回一个数组,所以它和forEach()的区别在于,有一个返回值。不修改原数组,返回的数组长度和原数组相同
var a = [1,2,3,4,5];
var b = a.map(function (value) {
return value+1
})
console.log(b); //返回[2,3,4,5,6]
12.filter()方法,返回的是调用数组的一个子集
var a = [1,2,3,4,5];
var b = a.filter(function (value) {
return value > 3
})
console.log(b); //返回[4,5]
注意:如果使用map()方法,返回的是[false, false, false, true, true]
filter()会跳过稀疏数组中缺少的元素,他的返回数组总是稠密的。所以可以用一下方法来压缩稀疏数组的空缺。
var a = [1,2,,,5];
var b = a.filter(function (value) {
return true
})
console.log(b); //返回[1,2,5]
13.every()和some()
every()方法是只有数组中所以元素都满足某个条件才会返回true;some()方法是只要有满足条件的值,就返回true。
以every()方法为例:
var a = [1,2,3,4,5];
a.every(function (value) {
return value < 10
}) //true
a.every(function (value) {
return value % 2 === 0
}) //false
14.indexOf()和lastIndexOf()
这两个方法都是用来搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,如果没找到,则返回-1。
lastIndexOf()与indexOf()区别在于:从头至尾搜索,而后者则是反向搜索。
5.什么是闭包
闭包就是能够读取其他函数内部变量的函数。
在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
6.vue中常用的指令
1、视图输出指令 ( v-text和v-html )
2、属性绑定指令 (v-bind)
3、事件绑定指令
简写:@
- .click 点击事件
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
- .once 事件只触发一次
4、v-model (双向绑定指令)
注意: v-model 只能运用在 表单元素中 input(radio, text, address, email…) select checkbox textarea
5、v-for和key属性(迭代数组)
6、v-if和v-show
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
7.双向数据绑定
1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
2.核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;
3.介绍一下Object.defineProperty()方法
(1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法)
(2)简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;
8.vuex工作原理
首先从API中拿数据,就会牵扯到异步操作,所以我们把异步操作定义在action中,在组件中触发一个action,action里面有一个ajax请求,然后请求后端接口,拿到数据我们需要改变state中的状态,改变状态唯一的方式是commit提交一个mutation,提交以后state状态改变了,状态改变后,试图就会改变,因为Vuex是响应式的.
9.this指向
1.普通函数调用,此时 this 指向 window
2.构造函数调用, 此时 this 指向 实例对象
3.对象方法调用, 此时 this 指向 该方法所属的对象
4. 箭头函数中,此时 this 指向外层作用域的 this
4.通过事件绑定的方法, 此时 this 指向 绑定事件的对象
5.定时器函数, 此时 this 指向 window
附: 更改this指向的三个方法:
eval、apply、call方法的说明:
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
call 、apply 这个两个函数的第一个参数都是 this 的指向对象,第二个参数的区别如下:
call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,‘params1’, … ,‘paramsn’ );
apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘params1’, …, ‘paramsn’ ]);
10.所了解的盒模型
W3C盒模型(标准盒模型)
给一个标签添加:box-sizing:content-box;(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
怪异盒模型(又称ie盒模型)
给一个标签添加:box-sizing:border-box;
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去,减去后才是内容的宽高。
区别
主要区别:对于宽高的定义不同
w3c盒模型:设置的宽度就等于内容的宽度
怪异盒模型:内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
11.常用的UI库有哪些
1.VUX(移动端)
2.element UI(饿了么后台)
3.Mint UI
4.iview
5.vue-mui
6.radon-ui
7.antd vue
8.vuikit
9.weex
10.N3