前端面试题学习和总结

一、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; // 1obj2.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垂直居中有哪些方式

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