Es6--创建面试题

1.var、let、const的区别

var:1.不受限于块级作用域
2.可以重复声明变量
3.声明的变量存在声明提升,变量可以在声明之前调用，值:underfind

声明提升:就是将变量提升到当前作用域的最顶部

let和const:1.受限于块级作用域
2.有暂时性死区
3.不能重复声明变量
4.变量不存在声明提升，一定在声明后使用，否则会报错
const:是常量，不可改变的量，一旦改变会报错，声明之后进行赋值，否则或报错

暂时性死区:使用let命令声明变量前，该变量是不存在的

2.箭头函数与普通函数的区别

箭头函数:1.是匿名函数，不能作用于构造函数，不能new
2.不具有arguments对象，可以用展开运算符…解决
3.没有原型prototype属性
4.的this指向是父级的上下文
5.不能使用apply(),call(),bind(),不能直接修改this指向

普通函数:1.可以有匿名函数，也有具名函数，可以用于构造函数，以此创建实例对象
2.具有arguments对象
3.有原型prototype属性
4.的this指向调用它的对象

3.什么是arguments？

是伪数组，参数集合，原型上没有数组的方法，比如push，pop等方法，但是可以转换成数组
es5里可以，借用数组原型
function fun(){
// 伪数组 不能使用数组方法
console.log(arguments)
// 伪数组转换为数组
let arr = […arguments]
console.log(arr)
let arr = [6,7,8]
// 伪数组使用数组方式
// apply 改变指向 传递的参数是一个数组
Array.prototype.push.apply(arguments,arr)
console.log(arguments)
}
fun(1,2,3,4,5)
es6里可以，利用展开运算符…参数的方法
let fn=(…arguments)=>{
consloe.log(arguments)
}

4.es6解构赋值

定义:解构赋值就是从目标对象或数组中提取变量
应用场景:element-ui vant-ui的按需引入 请求接口返回数据，提取想要的数据
1.数组结构赋值:左右值是一一对应的
var a，b；
[a,b]=[10,20]
console.log(a)//10
console.log(b)//20
2.对象结构赋值:值是根据属性名来赋值
({a,b}={a:10,b:20})
console.log(a)//10
console.log(b)//20
3.解构赋值:交换a,b的值
var a = 1,b = 2;
[a,b] = [b,a];
console.log(a); // 2
console.log(b); // 1
4.// 剩余运算符 数组:根据数组的形式，左右值是一一对应的，a，b的值，剩下的就是…rest的啦
var a,b,rest;
[a,b,…rest] = [22,33,44,55,66]
console.log(a); // 22
console.log(b); // 33
console.log(rest); // [44,55,66]
5.// 剩余运算符 对象:值是根据属性名来赋值,位置发生变动，值也不变
var a,b,rest;
({a,b,…rest}={a:22,b:33,c:44,d:55,f:66})
console.log(a); // 22
console.log(b); // 33
console.log(rest); // [44,55,66]

5.es6 class继承和es5继承

es5中的类:
es5中生成实例对象需要定义构造函数，通过new操作符来生成实例对象。
定义了构造函数并且new构造函数，后台会隐式执行new Object（）创建对象。并将构造函数的作用域给到新对象，即实例对象的this直接指向构造函数

es5继承:
1.原型链继承：父类的实例作为子类的原型
优点：简单易于实现，父类的新增实例与属性子类都能访问
缺点：可以在子类中增加实例属性，如果要新增原型属性和方法需要在new父类构造函数的后面无法实现多继承
创建子类实例时，不能向父类构造函数中传参数
2.借用构造函数继承：复制父类的实例属性给子类
优点：解决子类构造函数向父类构造函数传递参数，可以实现多继承
缺点：方法在构造函数中定义，无法复用
不能继承原型属性/方法，只能继承父类的实例属性和方法
3.组合继承：既能调用父类实例属性，又能调用父类原型属性
优点：函数可复用，不存在引用属性问题，可以继承属性和方法，也可以继承原型的属性和方法
缺点：由于调用两次父类，所以产生了两份实例

es6中的类:
es6中引入了class类的概念，通过class关键字定义类。
定义方法不能使用function关键字
方法之间不能用逗号隔开，不然会发生报错
class定义的类实质上是一个函数，指向自身相关联的构造函数，可以理解为class类是构造函数的另一种写法
在通过class定义的类中存在prototype属性的。class定义的类中的方法都被保存在prototype中。
可以通过Object.assign方法动态给对象增加方法。
constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法
constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例
在constructor内部定义的属性可以称为实例属性，constructor外声明的属性都是定义在原型上的，可以称为原型属性。然后通过hasOwnProperty()函数用于判断属性是否是实例属性，返回值为布尔值。然后通过in操作符可以判断属性是否在类中。结合这两个方法可以判断该属性时在类的实例上还是原型上。
class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。

es6继承:
代码量少，简单易懂
通过class关键字定义一个类，子类通过extends关键字来继承父类的属性和方法
子类的constructor方法中通过super关键字继承父类的属性
在子类的原型上通过super关键字来继承父类的方法

6.for/in和for/of的区别

1.for…in遍历数组会得到下标
2.for…in遍历对象得到是对象的key值

1.for…of遍历数组得到的是value
2.for…of直接遍历对象会报错
3.for…of遍历对象需要配合Object.keys()
var obj = {a:100,b:200,c:300}
for(var a of Object.keys(obj)){
console.log(a) // 得到的也是对象的key值 a b c
console.log(a+’:’+obj[a]) // a:100 b:200 c:300
}

7.深拷贝和浅拷贝

深拷贝：创建一个新的对象和数组，将原对象的各项属性的值（数组的所有元素）拷贝过来，是值而不
是’引用’
浅拷贝：将原对象或数组的引用直接赋给新对象或新数组，新数组/新对象只是原对象的一个引用

手动深拷贝(递归代码)
function deepClone(obj){
// 判断传入的参数是不是对象或数组，如果传入的是null或者不是对象或数组return 返回
// 用typeof来检测 数组的检测结果也是object
if(typeof obj !‘object’||objnull){
return obj
}
// 初始化返回结果
let result
// 判断传入的是数组还是对象
// 用instanceof 来判断obj 是否在Array的原型链上 如果在就是数组
if(obj instanceof Array){
result=[]
}else{
result={}
}
//for … in 遍历obj
for(var key in obj){
// 保证key不是原型上的属性
if(obj.hasOwnProperty(key)){
result[key]=deepclone(obj[key])
}
return result
}
}
var add={
name:‘小高’,
age:18,
sex:{sex:‘女’},
arr:[‘a’,‘b’,‘c’]
}
const obj1=deepclone(add)
consloe.log(obj1.arr)//a,b,c
obj1.arr[0]=‘d’
consloe.log(obj1.arr[0])//d

8.es5和es6的继承有啥区别

es5继承：在子类中创建自己的this指向，最后将方法添加到this中
es6继承：使用关键字先创建父类实例对象this，最后在子类class中修改this

9.什么是promise？

1.promise是一个容器，异步操作的结果
2.在语法上，Promise是一个对象，获取异步操作的最终状态
3.Promise还是一个构造函数，对外有统一的Api，自身上有all，resolve，reject等方法，原型上有then，catch方法
4.promise有三种状态，初始状态，成功状态，失败状态
状态不可逆，只能由初始状态到成功状态或者是初始状态到失败状态
5.new创建了一个promise对象，有两个参数，resolve，reject
6.应用场景:promise对axios二次封装、promise封装ajax、promise封装wx.request、promise封装uniapp.reqest
7.promise小写是‘promise实例’，promise首字母大写‘promise构造函数’，promise首字母大写且复数‘promise规范’
8.promise的Api

• then
• 把原来的回调分离出来，用链式调用的方式回调，then有两个回调函数，第一个成功，第二个失败
• catch
• 和then的参数一样，用来指定错误的reject的回调，在执行then方法时，如果报错会执行catch方法
• all
• 并行执行异步操作，在所有异步操作成功后回调，all会把异步操作的结果放入数组里传递给then
• race
• 用法和all一样，只要有一个异步操作执行完毕，就立刻执行then回调
  应用场景：获取接口数据，超时的时候，用race方法
  9.promise的链式调用，解决了地狱回调的问题

10.promise封装ajax(手写)

// Promise 封装Ajax
function Fun(method,url){
// 创建Promise
let p = new Promise((resolve,reject)=>{
// 创建Ajax核心对象
var xhr = new XMLHttpRequest()
//开启请求
xhr.open(method,url,true)// 请求方式 请求地址 是否为异步
// 发送请求
xhr.send(null)
// 监听异步回调
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
resolve(xhr.responseText)
}else if(xhr.status == 400){
reject(‘请求失败’)
}
}
})
return p
}
let url=‘http://wthrcdn.etouch.cn/weather_mini?city=%E5%8C%97%E4%BA%AC’
Fun(‘get’,url).then(res=>{
console.log(res)
})

待更新…