面试时问到的问题

let 和 const 的相关问

let a = 3;
const b = 4;
console.log(a,b); //3,4
a=4;
console.log(a,b); //4,4
let a = 4; 
const b = 5
console.log(a,b); //报错

报错内容：'Identifier 'a' has already been declared'，产生报错原因是重复声明。

对象取key
obj = {a:1,b:2,c:3}取出key值，组成一个数[a,b,c]
方法一：
for...in...  遍历

var arr = new Array
for(let key in obj){
    arr.push(key)
}

方法二：
Object.keys()
Object.keys() 方法会返回一个key值的数组。

Object.keys(obj)
console.log(Object.keys(obj))//['a','b','c']

Vue相关
1、vue路由跳转不刷新页面
运用用vue动态组件的的keep-alivekeep-alivehttps://shq5785.blog.csdn.net/article/details/1093129422、父子组件传值
父子组件通信：
        父向子传递数据是通过 props，子向父是通过 $emit；
        通过 $parent / $children 通信；
        $ref 也可以访问组件实例；provide / inject ；
兄弟组件通信： EventBus；Vuex；
跨级组件通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；

3、v-if 和 v-show的区别
v-if：是控制dom节点是否存在来控制显隐的，适用于一次性判断是否存在；
v-show：通过设置dom元素的display属性来控制显隐的，适用于频繁切换的节点；

4、v-if 和 v-for为什么不能一起使用
v-for比v-if优先级高，使用的话，会先进行循环在进行判断，这样无论判断结果如何，循环都会执行下去。

5、vuex相关
        ①vuex有哪些属性都是干什么的
        五种属性，分别是 State、 Getter、Mutation 、Action、 Module
        state：数据源存放地，相当于vue对象中的data；
        getter：获取根据业务场景处理返回的数据，计算属性；
        mutation：唯一修改state的方法，修改过程是同步的；
        action：异步处理，通过分发操作触发mutation；（注：action 提交的是 mutation，而不是直接变更状态）
        module：模块化，可以让每一个模块拥有自己的state、mutation、action、getters。

        ②vuex页面刷新数据丢失问题如何解决
        方法一：将vuex中的数据直接保存到浏览器缓存中，如：sessionStorage、localStorage、cookie（不安全，不适用大数据量的存储；）
        方法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据（适用于少量的数据，并且不会出现网络延迟；）
        方法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage，以防请求数据量过大页面加载时拿不到返回的数据

 6、vue的双向绑定原理是什么？关键点在什么地方？
简单回答就是 采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据发生变动时发布消息给订阅者，触发相应的监听回调。这样就可以实现数据的双向绑定
复杂点就是 在数据渲染时使用prop渲染数据，将prop绑定到子组件自身的数据上，修改数据时更新自身数据来替代prop，watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据。
关键点就是：Object.defineProperty()劫持属性

数组求和
对于所有数组arr=[1,1,2,3,4,1,2,5]，求元素加和

var arr = [1,1,2,3,4,1,2,5];
// 方法一：循环
function add(arr){
    var a=0;
    for(var i=0;i<arr.length;i++){
        a+=arr[i];
    }
    return a;
}
// 方法二：递归
function add(arr){
    var len = arr.length;
    if(len == 0){
        return 0;
    } else if (len == 1){
        return arr[0];
    } else {
        return arr[0] + add(arr.slice(1));
    }
}
// 方法三：forEach遍历
function add(arr) {
    let sum = 0;
    arr.forEach(val=>s +=val,0)
    return sum;
}
// 方法四：eval
function add(arr) {
    return eval(arr.join(“+”));
}
// 方法五：map-reduce
function add(arr) {
    return arr.reduce((prev,curr)=>prev+curr)
}

数组去重
对于数组arr=[1,1,2,3,4,1,2,5]，取出唯一数组

var arr = [1,1,2,3,4,1,2,5];
// 方法一：set
Array.from(new set(arr));
或
function newArrFn (arr) {
    return ([...new Set(arr)])
}
// 方法二：filter()+indexof
function fn(arr){
    let newArr = []
    arr.forEach((val)=>{
        if(newArr.indexOf(val) == -1){
            newArr.push(val)
        }
    })
    return newArr
}
function fn(arr) {
　　return arr.filter((item, index, arr) => arr.indexOf(item) === index)
}
// 方法三：遍历
var newArr = [];
arr.forEach((key,index)=>{
    if(newArr.indexOf(key) === -1){
        newArr.push(key)
　　}
})
// 方法四：new Map
const m = new Map();
for (let i = 0; i < arr.length; i++) {
    m.set(arr[i], arr[i]);
}
const newArr = []
m.forEach(function (value, key) {
    newArr .push(value)
})
// 方法五：sort排序
function newArrFn (arr) {
    arr = arr.sort();
    let newArr = [];
    for(let i = 0;i<arr.length;i++){
        arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])
    };
    return newArr
}

CSS垂直居中
方法一：使用line-height（行高）居中
方法二：absolute + transform

//父元素
position: relative;
//子元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);

方法三：绝对定位

//父元素
position: relative;
//子元素
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

注：绝对定位是会脱离文档流的，这点要注意一下。
方法四：display:flex
给父元素设置display: flex，水平居中justify-content: center，垂直居中align-items: center
方法五：display:table-cell

// 父元素
display: table;
//子元素
display: table-cell;
vertical-align: middle;
text-align: center;

常见的伪元素
before，after，first-letter，first-line