1、元素高低垂直居中的体式格局有哪些？
元素程度垂直居中的体式格局有哪些？
absolute加margin计划
fixed 加 margin 计划
display:table 计划
行内元素line-height计划
flex 弹性规划计划
transform 未知元素宽高处置惩罚计划
absolute加margin计划
div{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%:
margin-top: -50px;
margin-left: -50px;
}
fixed 加 margin 计划
div{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right:0;
left: 0;
bottom: 0;
margin: auto;
}
display:table 计划
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
}
行内元素line-height计划
div{
text-align: center;
line-height: 100px;
}
flex 弹性规划计划
div{
display: flex;
align-items: center;
justify-content:center
}
transform 未知元素宽高处置惩罚计划
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
2、var let const的区分及运用场景?
起首3个都是js声明变量所用
Var
var 所声明的变量，作用域为该语句地点的函数内，且存在变量提拔
console.log(a) // 变量提拔，var a 被提至地点作用域顶部， 所以这里输出的值为 undefined
var a = 'ＪＳ'
for (var i = 0; i <10; i++) {
setTimeout(function() { // 同步注册回调函数到 异步的 宏使命行列。
console.log(i); // 实行此代码时，同步代码for轮回已实行完成
}, 0);
}
10 ... 10 // 10个10
console.log(i) // i 作用域全局 输出10
背面声明的会掩盖之前声明的变量
var a = 'JS'
var a = 'JavaScript'
Let
let 所声明的变量，作用域为该语句的代码块内，不存在变量提拔
console.log(a) // 变量没有被提拔， 输出 ReferenceError: a is not defined
let a = 'JavaScript'
for (let i = 0; i <10; i++) {
setTimeout(function() { // 同步注册回调函数到 异步的 宏使命行列。
console.log(i); // 实行此代码时，同步代码for轮回已实行完成
}, 0);
}
1...10 // 1到10
console.log(i) // i作用域for 块级内，输出 i is not defined
不允许反复声明
let a = 'JavaScript'
let a = 'JS' // 'a' has already been declared
Const
const 包括let 一切特征， 区分是const声明的变量是一个只读的不可修正的
这里注重，const保证的不是所声明的值不得修改， 而是变量指向的内存不可修改
代码示例
const a = {
content: 'JavaScript'
}
a.content = 'JS' // JS
a = {
content: 'JS' // 这里转变了内存， 所以报错 Assignment to constant variable
}
三句话总结
运用var声明的变量，其作用域为该语句地点的函数内，且存在变量提拔征象，背面的掩盖前面的
运用let声明的变量，其作用域为该语句地点的代码块内，不存在变量提拔, 不能反复声明
运用const声明的是常量，在背面涌现的代码中不能再修正该常量的内存
3、怎样明白es6中的类？
起首,JS作为一门非面向对象言语，在es6之前，并没有供应对类的支撑，我们经常使用的做法是经由过程组织函数来模仿类的完成, 经由过程将属性及要领定义在原型上同享给其实例
简朴完成:
function JS(name) {
this.name = name
}
JS.prototype.getName = function(){
console.log(this.name)
}
const child = new JS('测试')
ES6 中的Class
es6中的class只是一个语法糖，class的写法只是让对象原型看起来越发清楚
简朴运用:
class JS {
constructor(name) {
this.name = name
}
getName() {
console.log(
this.name
)
}
}
const child = new JS('测试')
每一个类中都有一个constructor要领，假如没有显现定义， 会默许增加一个空的constructor，等同于ES5中的组织函数, 类的一切要领都是定义在类的prototype属性上面，两者的重要区分在于Class必需运用new挪用, ES5中组织函数不运用new也能够挪用, class 中新增静态要领(static)关键字, 静态要领不能被继续只要经由过程类自身来挪用
class JS {
constructor(name) {
this.name = name
}
static
getName() {
// static 要领只要类自身能挪用，实例不能继续
console.log(this.name)
}
}
Extends 继续
class 也能够经由过程extends 关键字完成继续
代码示例:
class JS {
constructor(name) {
this.name = name
}
getName() {
console.log(this.name)
}
}
class Css extends Js{
constructor() {
super();
}
}
const child = new Css('测试')
child.getName()
// '测试'
extends 注重点
运用extends 继续时，子类组织函数中必需挪用super(), 代表挪用父类的组织函数
super虽然代码父类的constructor,然则返回的子类的实例
super作为函数挪用时，代表类的组织函数
super作为对象挪用时, 在一般要领中，指向父类的原型对象, 静态要领中指向父类
4、怎样明白es6中的Promise？
js是单线程的，也就是说一次只能完成一个使命，为了处置惩罚这个题目，js将使命的实行形式分为两种， 同步和异步, 在es5中我们处置惩罚异步只能经由过程的回调的体式格局举行处置惩罚，在多层异步中，回调会一层一层嵌套，也就是所谓的回调地狱，promise就是异步编程的一种处置惩罚计划
Promise
特性:
对象的状况不受外界影响, promise对象代表一个异步操纵，有三种状况pendding(举行中), fulfilled(胜利), rejected(失利)
一旦状况转变，就不会再变, 状况的转变只要两种能够, pendding => fulfilled及pendding => rejected
基础用法:
const promise = new Promise(
function(resolve,reject){
// ... some code
if(/* 异步操纵胜利 */){
resolve(value);
// 将状况从pendding变成fulfilled
}else{
reject(error);
// 将状况从pendding变成rejected
}
}
);
promise 天生实例后能够运用then要领吸收resolved状况和rejected状况的回调函数
promise.then(()=>{
console.log('resolved')
},()=>{
console.log('rejected')
})
promise原型上具有catch要领， catch要领是rejection的别号， 用于指定发作错误时的回调函数
promise.then(()=>{
console.log('resolved')
},()=>{
console.log('rejected')
}).catch((err)=>{
console.log('catch')
})
promise原型上具有finally要领，用于不论promise对象末了的状况怎样，都邑实行的操纵
promise.then(()=>{
console.log('resolved')
},()=>{
console.log('rejected')
}).finally((err)=>{
console.log('end')
})
Promise.all
Promise.all要领用于将多个 Promise 实例，包装成一个新的 Promise 实例
简朴运用:
const p = Promise.all([p1,p2,p3]);
特性:
参数都是promise实例，假如不是会挪用promise.resolve要领将其转为promise实例
p的奖态由传入的promise实例的状况决议
promise实例状况都变成fulfilled,p状况为fulfilled
promise实例状况一个变成rejected,p状况为rejected
6、怎样明白es6中的Proxy？
怎样明白es6中的Proxy？
试题剖析:对proxy的明白，能够会延伸到vue的双向绑定
Proxy（代办） 定义
能够明白为为目的对象架设一层阻拦，外界对该对象的接见，都必需经由过程这层阻拦
简朴示例:
const obj = new Proxy({}, {
get: (target, key, receiver) => {
return 'JS'
console.log(`get ${key}`)
},
set: (target, key, value, receiver) => {
console.log(`set ${key}`)
},
})
obj.name = 'JS'
// set name
// JS
obj.name
// 这里进入get的回调函数，一切直接返回 JS
从上面的示例中能够看出，Proxy存在一种机制，能够对外界的读写操纵举行改写
Proxy 实例要领
proxy除了代办get,set操纵，还能代办别的的操纵，以下
handler.getPrototypeOf()
// 在读取代办对象的原型时触发该操纵，比如在实行 Object.getPrototypeOf(proxy) 时。
handler.setPrototypeOf()
// 在设置代办对象的原型时触发该操纵，比如在实行 Object.setPrototypeOf(proxy, null) 时。
handler.isExtensible()
// 在推断一个代办对象是不是是可扩大时触发该操纵，比如在实行 Object.isExtensible(proxy) 时。
handler.preventExtensions()
// 在让一个代办对象不可扩大时触发该操纵，比如在实行 Object.preventExtensions(proxy) 时。
handler.getOwnPropertyDescriptor()
// 在猎取代办对象某个属性的属性形貌时触发该操纵，比如在实行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.defineProperty()
// 在定义代办对象某个属性时的属性形貌时触发该操纵，比如在实行 Object.defineProperty(proxy, "foo", {}) 时。
handler.has()
// 在推断代办对象是不是具有某个属性时触发该操纵，比如在实行 "foo" in proxy 时。
handler.
get
()
// 在读取代办对象的某个属性时触发该操纵，比如在实行 proxy.foo 时。
handler.set()
// 在给代办对象的某个属性赋值时触发该操纵，比如在实行 proxy.foo = 1 时。
handler.deleteProperty()
// 在删除代办对象的某个属性时触发该操纵，比如在实行 delete proxy.foo 时。
handler.ownKeys()
// 在猎取代办对象的一切属性键时触发该操纵，比如在实行 Object.getOwnPropertyNames(proxy) 时。
handler.apply()
// 在挪用一个目的对象为函数的代办对象时触发该操纵，比如在实行 proxy() 时。
handler.construct()
// 在给一个目的对象为组织函数的代办对象组织实例时触发该操纵，比如在实行new proxy() 时。
为何要运用Proxy
阻拦和看管外部对对象的接见
下降函数或类的庞杂度
在庞杂操纵前对操纵举行校验或对所需资本举行治理
7、怎样明白es6中的decorator？
Decorator是ES7中的提案，观点借鉴于python， 它作用于一个目的类为其增加属性于要领
我们用一个比方来明白Decorator, 把孙悟空看成是一个类，那末棒子就是装潢器为其设备的兵器
代码明白:
@stick class Monkey{
}
function stick(target){// 第一个参数就是目的类的自身
target.ATK = 100000
}
Monkey.ATK
// 为悟空设备了棒子，攻击力提高了100000
// 假如一个参数不够用，能够在装潢器外层再包一层
function stick(atk){
return function(targt){
target.ATK = atk
}
}
@stick(200000)
// 如许我们就为悟空增加了200000攻击力
class Monkey{
}
Decorator 不仅能润饰类，也能润饰类的要领
class Monkey{
@setName name(){
this.name = '孙悟空'
}
}
Decorator 只能润饰类及类的要领,不能润饰于函数,由于存在函数提拔
Mixin
在润饰器基础上，我们能够完成mixin(混入),意义在一个对象中混入另一个对象的要领
代码示例:
export function mixins(...list){
return function(target){
Object.assign(target.prototype,...list)
}
}
const skill = {
shapeshifting(){
console.log('72变')
}
}
@mixins(skill)
class Monkey{
}
Object.assign(Monkey.prototype, skill)
const swk = new Monkey()
swk.shapeshifting()
// 72变
运用Decorator的优点
扩大功用，相对于继续增加了更多的灵活性
代码可读性更高，装潢器准确定名相当于解释
8、Es6中新增的数据类型有哪些？运用场景？
Es6中新增的数据类型有哪些？运用场景？
es6中新增一种原始数据类型Symbol,最大的特性是唯一性，Symbol值经由过程Symbol函数天生, 在es5中对象的属性都是字符串，我们运用别人定义的对象，然后去新增本身的属性，如许轻易起争执掩盖原有的属性, Symbol也能够看成为一个字符串，不过这个字符能保证是举世无双的
基础示例:
// Object
const obj = {
name:'JS'
}
obj.name ='JS逐日一题'
// Symbol
const name = Symbol('name')
// 这里的参数没有特别意义，能够看成为Symbol加了一个标记
obj[name]='JS逐日一题'
Symbol用法
Symbol 现在有多种写法
// 一
const title = Symbol()
const obj = {}
obj='JS逐日一题'
// 二
const obj = {
:'JS逐日一题'
}
// 三
Object.defineProperty(obj,title,{value:'JS逐日一题'})
obj
// 输出的效果都为JS逐日一题
这里注重一下，
Symbol
做为属性名时，不能用点去读取
obj.title
// undefined
Symbol作为属性名，只要经由过程Object.getOwnPropertySymbols 要领返回
const attrs = Object.getOwnPropertySymbols(obj)
// [Symbol]
Symbol.for()
假如我们想要反复Symbol能够运用Symbol.for， Smybol.for()及Smybol()的区分在于Symbol.for()会先去查找全局下有没有声明过，假如有就返回该值，没有就新建一个，Symbol()每一次挪用都邑新建一个
代码明白:
const title = Symbol.for('JS逐日一题')
....
Symbol.for('JS逐日一题')
//挪用屡次都是运用的第一次声明的值
Symbol.for('JS逐日一题')
===
Symbol.for('JS逐日一题')
// true
const title =Symbol('JS逐日一题')
Symbol('JS逐日一题')
===
Symbol('JS逐日一题')
// false
总结
Symbol的特性
举世无双
不能隐式转换
不能与别的数据类型做运算
不能运用点运算符举行操纵
9、简述一下你为何要运用vue？
