乱七八糟的各式各样的面试题

js获取变量类型的方法有哪些,分别使用什么情况?

11种,Number,

String,

Boolean,

Object,

Array,

Json,

Function,

undefined,

Null,

Date,

RegExp,

Error

1、使用typeof能判断出四种，分别是number，string，boolean，object，剩余的均被检测为object

2、使用instanceof，根据instanceof的定义：判断参照对象的prototype属性所指向的对象是否在被行测对象的原型链上，这种变量判断可以检测出9种,undefined和null被检测为object,因为js中没有这种全局类型

对于number,string,boolean这三种类型,

​ 只有通过构造函数定义比如:

​ let num =new Number(1);

let num = 1;(这样定义是检测不出来的)

3、使用constructor检测，constructor是原型对象的属性指向构造函数。这种方式解决了instanceof的弊端,可以检测出除了undefined和null的9种类型

js中的this在哪些情况下分别指向哪些对象?

一、全局作用域或者普通函数自执行中this指向全局对象window

二、事件函数内部的this指向事件源：注意在事件函数中如果包含普通函数，普通函数自执行后，内部this还是指向window

三、对象方法调用时，this指向调用的对象

箭头函数this指向外层函数的调用者(箭头函数没有this)

call()和apply()的区别和作用?ES5的.bind()呢?

call、apply、bind的作用是改变函数运行时this的指向

var obj = {
name: “李四”,
age: 99,
myfun: function (kill, death) {
console.log(“名称:” + this.name + " 年龄:" + this.age + " 杀人数：" + kill + " 死亡：" + death);
},
};
var otherObj = {
name: “yasuo”,
age: 4,
};

obj.myfun.call(otherObj, '0', '10'); //名称:yasuo 年龄:4  杀人数：0  死亡：10
obj.myfun.apply(otherObj, ['0', '10']); //名称:yasuo 年龄:4  杀人数：0  死亡：10
obj.myfun.bind(otherObj, '0', '10')(); //名称:yasuo 年龄:4  杀人数：0  死亡：10

第一个参数：

 call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象

第二个参数：

 call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面

 apply 的所有参数都必须放在一个数组里面传进去 

 bind 除了返回是函数以外，它 的参数和 call 一样

 当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等

使用new操作符是,js内部具体执行了哪些步骤?

var obj = new A();中一共实现了三步操作：

1. 创建一个空对象obj var obj= {}
2. 将构造函数的prototype赋给对象的___proto___ obj.__proto__ = A.prototype
3. 构造函数对象的this指针指向obj A.call(obj)

写一个函数,实现将’ABCD’转化成’A B C D’

写一个对象深拷贝函数

浅拷贝(遇到对象只拷贝地址,且影响原始数据)

Object.assign(newobj,obj) 把obj的值复制给newobj

深拷贝

$.extend用于将一个或多个对象内容合并到目标对象

$.extend([deep],target,object1,[,objectN])

var newObject=$.extend(true,{},oldObject)

deep为true,表示深度拷贝

target目标对象

object1第一个被合并对象

objectN第N个被合并对象

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象

var obj1 = {
    a:1,
    b:[1,2,3]
}
var str = JSON.stringify(obj1)
var obj2 = JSON.parse(str)
console.log(obj2); //{a:1,b:[1,2,3]}
obj1.a=2
obj1.b.push(4);
console.log(obj1); //{a:2,b:[1,2,3,4]}
console.log(obj2); //{a:1,b:[1,2,3]}

这是最常规的方法，思想很简单：就是对对象进行迭代操作，对它的每个值进行递归深拷贝。

for…in法

// 迭代递归法：深拷贝对象与数组
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一个对象！')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}

介绍一下css盒子模型

盒模型： 内容(content)、填充(内边距padding)、边界(外边距margin)、 边框(border)

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 、padding

css选择器有哪些,css3伪类有哪些?

1.标签选择器

2.ID选择器

3.类选择器

4.组选择器

语法：选择器1，选择器2，选择器N{},eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。

5、通配符选择器

语法：{}，eg：{font-size：16px}//将整个页面字体大小设为16px。

6.后代选择器

语法：选择器1选择器2{}，eg：p.aa{}//选中指定祖先元素p的指定后代.aa。

7.子元素选择器

语法：父元素>子元素{},eg：p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别

8.伪类选择器

CSS3新增的伪类选择器：

:checked 被选中 主要用在input表单元素上

:not 排除

:last-child 最后一个元素

:nth-child(n) n表示具体的第几个 odd/2n+1 奇数 even/2n 偶数

:only-child 仅仅/唯一的元素

:nth-last-child(n) 倒数第几个元素 :nth-last-child(1) <=> :last-child

:first-of-type 第一个同级兄弟元素

:last-of-type 最后一个同级兄弟元素

:only-of-type 只有一个同级兄弟元素

:nth-of-type(n) 第几个同级兄弟元素

:nth-last-of-type(n) 倒数第几个同级兄弟元素

:empty 空内容

多终端页面适配怎么实现

百分比方案:使用 百分比% 定义 宽度自适应，高度 用**px**固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。

rem方案:em是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 的一种实现方式。

你了解并应用过的meta标签,及其作用

1.设置当前html文件的字符编码

2设置浏览器的兼容模式（让IE使用最新的浏览器渲染）

3.视口（快捷键：meta:vp）

作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备那么大展示；
视口的宽度可以通过meta标签设置；
此属性为移动端页面视口设置；
width：视口的宽度，width=device-width：宽度是设备的宽度
initial-scale：初始化缩放，- initial-scale=1.0：不缩放
user-scalable：是否允许用户自行缩放，取值0或1，yes或no
minimum-scale：最小缩放
maximum-scale：最大缩放
一般设置了不允许缩放，就没必要设置最大最小缩放了。

常见的兼容问题?

谷歌默认字体大小

chrome下会让小于12px的文本字体默认为12px显示

box{ font-size: 12px; -webkit-transform: scale(0.75);}

图片默认有间距

解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

透明属性
用来设定元素透明度的opacity是CSS 3里的一个属性，现代浏览器都已经支持，对于老版本浏览器可以通过加入私有前缀来支持，对于IE6-IE8可以通过filter属性来支持，IE4-IE9都可以通过滤镜写法提供兼容支持。

opacity: 0.5;
-moz-opacity:0.5;
filter: alpha(opacity = 50); //IE6-IE8
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9
媒体查询
对于IE9以下浏览器不支持CSS3媒体查询的问题，通常使用respond.js来作为兼容性解决方案。

阻止默认行为
W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。IE9之前的浏览器阻止默认行为需要使用window.event.returnValue = false。直接在事件处理函数中return false也能阻止默认行为，只在DOM0级模型中有效。此外，在jQuery中使用return false会同时阻止默认行为与事件传播，通常也会封装一个方法来实现默认行为的阻止。

handler.preventDefault = function(event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
阻止事件冒泡
W3C推荐的阻止冒泡的方法是event.stopPropagation()，IE9之前则是使用window.event.cancelBubble = true;，通常也会封装一个方法来实现阻止事件冒泡。

handler.stopPropagation = function(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = false;
}
}

滚动高度
获取窗口的滚动高度scrollTop需要采用兼容性写法，即使声明浏览器对于文档的处理也会有所不同。

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
日期时间
使用new Date()构造函数生成日期时间对象，对于new Date(“2020-06-29”)语法在一些早期的浏览器会输出invalid date，这主要是因为早期浏览器不支持表达日期的-，而/才是被广泛支持的，所以在处理早期浏览器的兼容性时需要将-替换为/。

new Date(“2020-06-29”.replace(/-/g, “/”));

浮动引起的问题?清除浮动的方法

浮动定义：加了浮动的元素盒子在脱离文档流之后，会漂浮在标准流之上；
并且不占位置，它在浮起来之后，原来的位置就会漏给标准流的盒子；
浮动只有左右浮动。

主要目的：就是为了让多个块级元素可以在同一行显示出来

清除浮动主要是为了解决父元素在不设定高度的情况下，子元素因为浮动而引起的父元素内部高度为0的问题

清除浮动方法:

（1）是通过在浮动元素末尾添加一个空的标签

缺点：添加了无意义的标签，使得结构化较差。

（2）给浮动元素的父级元素添加overflow属性

在添加overflow属性后，浮动元素又回到父级元素层，撑起父元素高度，达到清除浮动效果。
缺点：内容增多的时候容易造成不会自动换行而导致的内容隐藏的问题，无法显示要溢出的元素。

（3）使用after伪元素清除浮动

html部分：

给浮动元素的父元素box1添加clearfix类

css部分

.clearfix:after{
content:"."; /设置内容为. 尽量不要为空，否则旧版本的浏览器会有空隙/
display:block; /转化为块级元素/
height:0; /高度为0/
visibility:hidden; /隐藏盒子/
clear:both; /清除浮动/
}
.clearfix{ /ie6.7浏览器的处理方式/
zoom:1;
/ 是ie6.7能够识别的特殊符号，带有属性，只有ie6.7才执行
zoom是ie6.7的清除浮动的方法 */
}

（4）使用before和after双伪元素清除浮动（强烈推荐）
html部分：
给浮动元素的父元素box1添加clearfix类

css部分：

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both; /清除浮动/
}

如何对项目中资源进行优化,说出三种减少页面加载时间的方法

1.尽量减少页面中重复的HTTP请求数量

2.服务器启用gzip压缩功能