关于es6和es5的区别

1.let声明和const声明，两个都有块级作用域，es5中没有块级作用域，且var有变量提升，在let中，使用的变量一定要进行声明。 var可以重复声明，let不可以 var不受限于块级，let受限于块级 var可以在声明的上面访问变量，let有暂存死区，在声明上面访问会报错。 const声明后必须赋值，且不可变量否则会报错

2.es6新增了箭头函数，箭头函数不能作为构造函数实例化对象，箭头函数不能使用arguments变量，但是可以使用....rest

3.ES6引入Class概念，不再像ES5一样原型链实现

4.模版字符串，es6 反引号可以直接进行变量拼接

5.解构赋值：es6可以按照一定模式从数组和对象中取值，对变量进行赋值。

const a =['one','two','three'];
let [data1,data2,data3] = a;
console.log(data1);
data2 = 'two2'

const arr = {
    name:'name',
    age:12,
    fns:function(){
        console.log('hello')
    }
}
let {name,age,fns} = arr;
console.log(name);
fns();

6.扩展运算符 ...

const data1 = ['a','b','c'];
const data2 = ['d','e'];
//es5
const dataes5 = data1.concat(data2)
//es6
const dataes6 = [...data1,...data2]

7.Symbol 的值是唯一的，用来解决命名冲突问题，symbol值不能进行运算[+、-等],symbol定义的对象属性不能用for...in遍历，但可以Reflect.ownKeys获取对象的所有键名。

8.迭代器 es6新的遍历命令for...of for...of遍历的是键值，for...in遍历的是键名 for...of不能对属性值进行修改，forEach()可以

9.异步处理方式 es5 定时器 js引擎：单线程优先处理主线程任务(同步任务)，所有异步任务存放在队列中，当同步任务处理结束会循环处理队列中任务

let ajax = function(callback){
    setTimeout(function(){
        callback&&callback.call();
    },1000)
}
ajax(function(){
    console.log('success')
})

promise es6引入的异步新解决方案，promise是构造函数，用来封装异步操作并可以获取成功或失败的结果

let ajax = function(){
    return new Promise(function(res,rej){
        setTimeout(function(){
            res();
        },1000)
    })
}
ajax().then(function(){
    console.log('执行res')
},function(){
    console.log('执行rej')
})
ajax().then(function(){
    return new Promise(function(res,rej){
        setTimeout(function(){
            res();
        },1000)
    },1000)
}).then(function(){
    return new Promise(function(res,rej){
        setTimeout(function(){
            res();
        },1000)
    },1000)
}).then(function(){

})
fns(src=>{
    return new Promise(res,rej=>{
        if(src>0){
            res();
        }else{
            rej();
        }
    })
})
fn(res=>{
    console.log(res)
})
Promise.all([fns('http://')]).then(fn)

promise.prototype.then 、promise.prototype.catch
//封装ajax
var p = new Promise((res,rej)=>{
    const xhr = new XMLHttpRequest();
    xhr.open('GET','http://url');
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4){
            if(xhr.status >= 200 && xhr.status <300){
                res(xhr.response)
            }else{
                rej(xhr.status)
            }
        }
    }
})
p.then(value=>{
    console.log(value)
},reason=>{
    console.log(reason)
})

10.set 本质是对象，类似于数组，可以使用扩展运算符和for...of遍历 size 、add、delete、has

let s = new Set(['a','b','c','d']);
let size = s.size //4 个数
s.add('e')
s.delete('a')
let ishas = s.has('b')//返回true flase 是否含有该元素
for(let item of s){
    console.log(item)//a、b、c、d
}
s.clear()//清空

set可以用来去重、求交集、求并集、求差集

//去重
let arr = [1,2,2,3,1,2,3,4]
let result = [...new Set(arr)];
//result:[1,2,3,4]

//求交集
let arr = [1,2,3,3,4];
let arr1 = [4,5,5,6];
let result = [...new Set(arr)].filter(item=>{
    let s2 = new Set(arr1);
    if(s2.has(item)){
        return true
    }else{
        return false
    }
})
//result:[4]

//求并集
let arr = [1,1,2,3,4,4];
let arr1 = [4,4,5,6];
let result = [...new Set([...arr],[...arr1])]
//rerule:[1,2,3,4]

//求差集
let arr = [1,1,2,3,4,4];
let arr1 = [4,4,5,6];
let result = [...new Set(arr)].filter(item=>{
    let s2 = new Set(arr1);
    if(s2.has(item)){
        return false
    }else{
        return true
    }
})
//result:[1,2,3]

11.map数据结构，类似于对象也是键值对的集合，键可以是字符串，对象等类型，可以用扩展运算符和for...of遍历 size、set、get、has、clear

let m = new Map();
m.set('name','xiaoming');
m.set('fns',function(){});
let friend = { school: '三中' } 
m.set(friend,['小吴','小王','小芳'])
m.delete('fns');
m.size;
m.get('fns');
for(let item of m){
    console.log(item);//
}
m.clear();

结果：

MVVM和MVC的区别

MVVM：Model View ViewModel，核心ViewModel,ViewModel包含DOM Listeners和Data Bindings.Data Bindings将数据绑定到View上显示，DOM Listeners监听操作。数据双向绑定：两个方向：1.将模型转化成视图，即将后端传递的数据转化成看到的页面，实现方式：数据绑定。2.将视图转化成模型，即将所看到的页面转化成后端的数据，实现方式：DOM事件监听，两个都实现就叫数据的双向绑定。vue.js对MVVM支持页面上进行操作DOM也会进行操作 MVC:Model View Controller.单向通信，只是将Model渲染到View上，但数据的监听是获取不到的 MVVM是对MVC的升级，jq没有实现数据和视图的解耦

em和rem的区别

em和rem都是相对单位 em相对于当前文字的font-size，如果当前文字没有设置font-size,则相对于浏览器默认的字体尺寸em会继承父元素的字体大小 rem相对html跟元素，是相对于跟元素进行计算的，可以通过只修改跟元素就可以成比例的调整所有字体，rem还支持元素宽高等属性。

2022.7前端目前遇到的面试题1

关于es6和es5的区别

MVVM和MVC的区别

em和rem的区别