前端面试题学习和总结

一、js的数据类型有哪些和区别

（1）两种数据类型：
基本数据类型：null, undefined, number, string, Boolean
引用数据类型：Array, Object, Function, Date
（2）区别：
基本数据类型存储在栈中，直接存值，赋值的时候是相对独立的。

例：`var a = 10;
     var b = a;
     b = 20;
     console.log(a); // 10 `

引用数据类型存储在堆中，存的是内存地址，赋值的时候相当于是赋值内存地址

例：`var obj1 = new Object();
     var obj2 = obj1;
     obj2.name = "danny";
     console.log(obj1.name); // danny`

二、 js的原型和原型链

（参考文章：https://www.jianshu.com/p/dee...）
A． 每个对象都有 proto 属性，但只有函数对象才有 prototype 属性，指向他的原型对象Person.prototype，原型对象（Person.prototype）是构造函数（Person）的一个实例。
Person.prototype.constructor == Person

---

B．通过new创建实例person1，实例有constructor属性，指向他的构造函数Person。
person1.constructor == Person

---

C． 所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）
Person.prototype.constructor == Person

---

D． 原型链：JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象

三、判断一个字符串中出现次数最多的字符和出现的次数

    let [str,arr] = ["assda1221asjdklasdjkln12klnasld",{}]
    for(let i in str){
        if(!arr[str.charAt(i)]){
            arr[str.charAt(i)] = 1
        } else {
            arr[str.charAt(i)]++
        }
    }
    let [key,number] = [null,0]
    for(let i in arr) {
        if(arr[i]>number) {
            key = i;
            number=arr[i]
        }
    }
    console.log(`出现次数最多的字符是${key}，次数为${number}`) //出现次数最多的字符是a，次数为5

四、add (1)(2)(3)(4)实现无限累加,最终打印出结果

function add(x){
        function addFake(y) {
            x = x + y;
            return addFake;
        };
        addFake.toString = function () {
            return x;
        };
        return addFake;
    }
    console.log(add(1)(2)(3)(4).toString()) //10

备注：
A. 在对函数进行console.log或者alert会自动调用toString函数，故需重写该函数
B. 第一次调用add返回了addFake函数，后续一直调用addFake函数，故该代码执行过程，add调用了一次，addFake调用了3次

五、对象的深度拷贝

使用递归的方法：

    function clone(obj) {
        var o = obj instanceof Array ? [] : {};
        for (var k in obj)
            o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];
        return o;
    }
    let obj = {name: 'danny'}
    const objCopy = clone(obj)
    obj.age = '18'
    console.log(obj) // {name: "danny", age: "18"}
    console.log(objCopy) // {name: "danny"}

备注：
1、使用JSON.parse(JSON.stringify(obj))可以实现一些部分情况下的深拷贝，但是如果对象中有undefined、function、symbol 会在转换过程中被忽略，则无法使用
2、Object.assign只能实现浅拷贝（源对象的属性值发现改变，则跟着变）

---

六、js的作用域链

（个人部分理解）比如在函数内定义一个变量A，然后去调用这个变量A。这个时候首先在函数代码块里面找是否有A，如果有就有，没有的话继续往外层找，直到找到window对象下面，如果还没，那就是not defined

七、vue双向绑定

是通过Object.defineProperty()中的set()和get()函数实现的，取值的时候调用get()，赋值的时候调用get()

let keyValue = 1;
    let obj2 = {};
    Object.defineProperty(obj2,'key', {
        get: function(){
            return keyValue;
        },
        set: function(newValue){
            keyValue = newValue;
        }
    });
    obj2.key; // 1
    obj2.key = '2';

八、数组随机排序

let arrData = [1,2,3,4,5,6,7,8]
    function randSort(arr) {
        for (let i = 0, len = arr.length; i < len; i++) {
            let rand = parseInt(Math.random()*len)
            let temp = arr[rand]
            arr[rand] = arr[i]
            arr[i] = temp
        }
        return arr
    }
    console.log(randSort(arrData))

九、JS的跨域有那些解决方案

参考文章：https://www.cnblogs.com/2050/...
补充：服务端处理　header("Access-Control-Allow-Origin: *");

十、css垂直居中有哪些方式

=================持续更新中====================