js经典题目解析

1.css的居中方式分为水平居中和垂直居中

水平居中

1. 如果标签设置了宽度,可使用margin:0 auto 实现水平居中,
2. text-align属性：文本对齐方式，设给块级元素,可使其中的块级元素的内容水平居中
3. 给子元素设置绝对定位，给父元素设置相对定位，然后设置属性left:-50%;transform:translateX(-50%)
4. 给父元素设置为display:flex;align-items:center

垂直居中

1. 单行文本可设置line-height的值为父元素的高度,使得文本垂直居中
2. vertical-align属性设置行内元素的内容垂直居中，若是块级元素,可设置块级元素为display:table-cell
3. 给子元素设置绝对定位，给父元素设置相对定位，然后设置属性top:-50%;transform:translateY(-50%);
4. 给父元素设置为display:flex;justify-content:center

2.px,em,rem,%

px,em,rem,%

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em:相对长度单位。相对于父级元素。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

rem:相对长度单位,相对的只是HTML根元素,通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

%:相对于父级元素的单位

3.display的值和作用

display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit|flex

其中常用的有none、inline、block、inline-block、flex

1、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。

2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height

5. flex:该属性值表示此元素会作为弹性盒子显示，在外部表现为block，内部作为弹性盒子使用，弹性布局可以为盒状模型提供最大的灵活性

4.原型、原型链

// 原型链：当从一个对象那里调取属性或者方法的时候，如果该对象自身不存在这样的属性或者方法，
       // 就会去关联的prototype那里寻找。如果prototype没有，就会去prototype关联的prototype那里寻找
       // 知道prototype....prototype...为null的时候，从而形成了原型链(根本上来说就是继承的关系)

5.网页上哪里可以看到请求的所有信息

按F12打开开发者调试窗口，在netWork下

6.cookie和session有什么联系

第一次访问页面的时候，服务器会返回个cookie给你，这个cookie其实就是sessionId，并存于客户端，第二次的时候，你刷新页面的时候，浏览器就会带上之前的cookie 如果禁掉cookie，session将失效

7.用什么方法判断是否是数组？又用什么方法判断是否是对象(通过 {}或者通过构造函数new出来的对象)？

var arr=[1,2];
var obj={
    age:11
}
console.log(arr instanceof Array);//true
console.log(arr.constructor===Array);//true
console.log(Array.isArray(arr));//true
console.log(Array.prototype.isPrototypeOf (arr) );//true
console.log(Object.prototype.toString.call(arr));//[object Array]

console.log(Object.prototype.toString.call(obj));//[object Object]
console.log(obj.constructor===Object);//true

8.对H5新增的语义化标签的理解？

1、新增的布局标签：（语义化标签）
                header标签：页面头部区域
                nav标签：导航条区域
                aside标签：边栏内容区域
                article标签：实际内容区域
                section标签：分区部分，一个大的区域分成几个section区域
                footer标签：页面底部区域

2、input标签的新类型：type=？？？
                email类型 邮箱
                search类型 搜索类型 输入内容后输入框后会出现X
                url类型 输入框内限定为网址的格式才能提交
                tel类型：电话号码
                number类型：数字类型
                range类型：范围
                color类型：颜色
                date类型：日期

9.数组去重

var a=[1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

// function  unique(arr){
// 	var c=[];
// 	for(var i=0;i<arr.length;i++){
// 		if(c[arr[i]]==undefined){
// 			c[arr[i]]=1;
// 		}else{
// 			c[arr[i]]++;
// 		}
// 	}
// 	return c;
// }
// var result=unique(a);
// for(var item in result){
// 	console.log(item,result[item]);//两个true直接没了
// }

// function unique(arr){
// 	var c=[];
// 	for(var i=0;i<arr.length;i++){
// 		if(c.indexOf(arr[i])==-1){
// 			c.push(arr[i])
// 		}
// 	}
// 	return c;
// }
// var res=unique(a);
// console.log(res)//NaN、{}没有去重

// function unique(arr){
// 	arr=arr.sort();
// 	var c=[arr[0]];
// 	for(var i=1;i<arr.length;i++){
// 		if(arr[i]!==arr[i-1]){
// 			c.push(arr[i])
// 		}
// 	}
// 	return c;
// }
// var res=unique(a);
// console.log(res) //NaN、{}没有去重

// function unique(arr){
// 		var c=[];
// 		for(var i=0;i<arr.length;i++){
// 			if(!c.includes(arr[i])){
// 				c.push(arr[i])
// 			}
// 		}
// 		return c;
// 	}
// 	var res=unique(a);
// 	console.log(res)//{}没有去重

// function unique(arr) {
//     var obj = {};
//     return arr.filter(function(item, index, arr){
//         return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
//     })
// }
// var res=unique(a);
// console.log(res)//都去重了


// function unique (arr) {
// 	return Array.from(new Set(arr))
// }
// var res=unique(a);
// console.log(res)//{}没有去重

10.数组转字符串

var a=[1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(typeof String(a));//string
console.log(typeof a.toString());//string
console.log(typeof a.join());//string

11.闭包

闭包：解决既要重用变量，又要保护变量不受污染的技术！

如何创建闭包？

1. 先用外层函数封装一个受保护的局部变量 - 解决污染问题

2. 再在内层函数中使用外层函数的局部变量

3. 外层函数将内层函数返回到外部，在外部反复 调用！ - 解决变量不可重用问题

缺点：占用更多的内存 - 因为outer的活动对象无法释 放！

判断闭包的3个特点：

1. 函数嵌套

2. 内层函数是否使用了外层函数的局部变量

3. 内层函数是否被返回到外部，在外部调用

function outer(){

	for(var i=0,arr=[];i<3;i++){

		arr[i]=function(){return i};

	}

	return arr;

}

var getFunc=outer();//变量getFunc是每个位置都是 函数体的数组
console.log(getFunc[1]())//3

12 页面渲染过程

1、处理HTML标记并构建DOM树

2、处理CSS标记并构建CSSOM树

3、将DOM与CSSOM合并成一个渲染树

4、根据渲染树来布局，以计算每个节点的集合信息

5、将各个节点绘制到屏幕

13 统计字符串中出现最多的字符

var str='hello,my name is over';
var newStr=Array.from(str);
function max(arr){
	var len=[],num=0,index;
	for(var i=0;i<arr.length;i++){
		if(arr[i]!=''&&len[arr[i]]==undefined){
			len[arr[i]]=1;
		}else{
			len[arr[i]]++;
		}
	}
	for(item in len){
		if(len[item]>num){
			num=len[item];
			index=item;
		}
	}
	return index;
}
var res=max(newStr);
console.log(res);

14http协议

                   HTTP是一个属于应用层的面向对象的协议，工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

                  工作原理

                        1、客户端连接到Web服务器

                        2、发送HTTP请求

                       3、服务器接受请求并返回HTTP响应;

                       4、释放tcp连接;

                       5、客户端浏览器解析HTML内容;

              主要特点

                      1、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

                      2、灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

                      3.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

                      4.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
                      5、支持B/S及C/S模式。

15 http方法

GET  请求指定的页面信息，并返回实体主体。
HEAD     类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
POST     向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
PUT  从客户端向服务器传送的数据取代指定的文档的内容。
DELETE   请求服务器删除指定的页面。
CONNECT  HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS  允许客户端查看服务器的性能。
TRACE    回显服务器收到的请求，主要用于测试或诊断。

16 localstore和sessionstore的区别

              localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

             sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
            并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅、是会话级别的存储。只允许同一窗口访问。
            而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。并且他们储存的对象类型均为字符串类型；

17 js的数据类型

      基本数据类型 String Number Boolean undefined Symbol Null

      引用数据类型 Object Array Function Math Date

18 transition transform translate 之间的区别 transform的属性有哪些？

    transform属性允许你旋转(rotate)，缩放(scale)，倾斜(skew)或平移(translate)给定元素    transition 属性是一个简写属性，用于设置四个过渡属性

19 编程：连接两个数组并返回

var arr=[1,2,3];
var arr1=[4,5,6];
var newArr=arr.concat(arr1);
console.log(newArr)//[ 1, 2, 3, 4, 5, 6 ]

20 创建新数组，向数组插入数据

创建数组的三种方式
    var arr=[1,2,3];//字面量直接创建
    var arr1=new Array(4,5,6);//构造函数直接创建
    var arr2=new Array(3);//先确实数组的长度，再赋值
    arr2[0]=7;
    arr2[1]=8;
    arr2[2]=9;

21 http中的方法，除了get方法、post方法

OPTIONS：
这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用'*'来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作。

HEAD：
与GET方法一样，都是向服务器发出指定资源的请求。只不过服务器将不传回资源的本文部分。它的好处在于，使用这个方法可以在不必传输全部内容的情况下，就可以获取其中“关于该资源的信息”（元信息或称元数据）。

PUT：
向指定资源位置上传其最新内容。

DELETE：
请求服务器删除Request-URI所标识的资源。

TRACE：
回显服务器收到的请求，主要用于测试或诊断。

CONNECT：
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接（经由非加密的HTTP代理服务器）。

22 bind() apply()

bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数,其它参数是原函数的参数
apply()方法的第一个参数是this指向的对象，第二个参数是原函数参数的数组形式，一经执行立即调用

23 const用法

const用于声明常量，无声明提前，且声明后不可再改变常量的值

console.log(a);//a is not defined
const a=10;


const a=10;
a=11//Assignment to constant variable

24 Utf-8编码汉字占多少个字节

     少数是汉字每个占用3个字节，多数占用4个字节

25 http和https的区别

     HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL

    两者的区别主要如下几点

           1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　    2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

　　   3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

　　   4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

26 ajax

    ajax是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

     ajax请求操作的过程如下

    1.创建一个XMLHttpRequest异步对象

    2.设置请求方式和请求地址

    3.接着，用send发送请求

    4.监听状态变化

    5.最后，接收返回的数据

27 盒子模型（怪异模型）

    盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）

    当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器

    标准盒模型下盒子的大小  = content + border(左右) + padding(左右) + margin(左右)

    怪异盒模型下盒子的大小=width（content + border(左右) + padding(左右)） + margin(左右)

    可以通过box-sizing来设置盒子模型的解析模式

    当设置为box-sizing:content-box时，将采用标准模式解析计算

    当设置为box-sizing:border-box时，将采用怪异模式解析计算

28 谈谈fixed ，related ， absolute

  related称为相对定位，对象相对于本身位置而言，进行上下左右的偏移，但它不脱离文档流

  absolute称为绝对定位，相对于已被相对定位的父元素(position的值必须是：relative、absolute、fixed)或没有定位的body元素来定位，它脱离于文档流

  fixed称为固定定位  是相对于浏览器窗口来进行定位，在没有滚动条的时候与绝对定位没有差别，有滚动条后，fixed始终会在定好的位置不动，而absolute会随参照对象元素的宽高变化为移动

29 float和absolute有什么区别？

   如果连个元素都设置了float，那么这两个元素虽然已经脱离了文档流，但都为浮动的元素不能重叠在一起，而设置了absolute的元素可以

   设置了float:left的元素其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围，而设置了absolute的元素其他盒子与其他盒子内的文本都会无视它

30 ajax

 原生ajax的get请求编码

		function myajax(url,succ,fail){
			// 1、创建ajax对象
			var ajax = new XMLHttpRequest();
			// 2、建立连接
			ajax.open('GET',url);
			// 3、发送请求
			ajax.send();
			// 4、监听
			ajax.onreadystatechange = function(){
				//调用本地文件成功的状态为0
				if (ajax.readyState==4 && ajax.status==0) {
					console.log(111);
					succ(ajax.response);
				}
				else{
					fail && fail(ajax.error)
				}
			}
		}

原生ajax的post请求编码

function myajax(type,data,url,succ,fail){
			// 1、创建ajax对象
			var ajax = new XMLHttpRequest();
			// 2、建立连接
			ajax.open(type,url);
			// 3、设置请求头
			ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            // 4.发送请求
			ajax.send(data);
			// 4、监听
			ajax.onreadystatechange = function(){
				if (ajax.readyState==4 && ajax.status==200) {
					// console.log(ajax.response);
					succ(ajax.response);
				}
				if (ajax.readyState==4 && ajax.status!=200){
					fail && fail(ajax.error)
				}
			}
		}

jquery的ajax的get请求

$.get(URL,[data],[function(data,status,xhr)],[dataType])
URL	    必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。
        额外的参数：
        data - 包含来自请求的结果数据
        status - 包含请求的状态  （"success"、"notmodified"、"error"、"timeout"、"parsererror"）
        xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型

jquery的ajax的post请求

$(selector).post(URL,[data],[function(data,status,xhr)],[dataType])
URL	    必需。规定将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。
        额外的参数：
        data - 包含来自请求的结果数据
        status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
        xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。

jquery兼容get和post请求的发送ajax请求的方法

$.ajax({name:value, name:value, ... })
常用的键值如下
    async	布尔值，表示请求是否异步处理。默认是 true。
    data	规定要发送到服务器的数据。
    dataType	预期的服务器响应的数据类型。
    error(xhr,status,error)	如果请求失败要运行的函数。
    success(result,status,xhr)	当请求成功时运行的函数。
    timeout	设置本地的请求超时时间（以毫秒计）。
    type	规定请求的类型（GET 或 POST）。
    url	规定发送请求的 URL。默认是当前页面。

31 辗转相除法

// 辗转相除法的基本原理是：两个数的最大公约数等于它们中较小的数和两数之差的最大公约数
// 例如，252和105的最大公约数是21（252 = 21 × 12；105 = 21 × 5）；因为252 − 105 = 147，所以147和105的最大公约数也是21
function gcd (a, b) { 
    if (a === b) { 
        return b } 
    else if (a > b) {
        a -= b
    } else {
        b -= a
    }
    return gcd(a, b)
    }
    console.log(gcd (252, 105))//21

32 Vue基于什么语言

Vue是用JavaScript语言开发的

33.js的选择器

原生js的选择器的语法有document.getElementById,getElementsByTagName,getElementsByClassName,querySelectorAll

jquery选择器的语法有

ID选择器 $('#id') 类选择器$('.class') 元素选择器$('p')

层叠选择器

$('div p')选择div内的所有p元素

$('div>p')选择div内的子代p元素

过滤选择器

$('tr:first')选择所有tr内的第一个元素

$('tr:odd')选择所有tr中的奇数位元素

内容过滤选择器

$('div:contains('john')')选择文本内容为john的div元素

33 两种定时器，setinterval和settimeout。因为settimeout是只执行一次的，如果要执行多次怎么做

let n=0;
function reTest(){
    setTimeout(function(){
        n++;
        console.log("正在执行第"+n+"次");
        if(n<10){
            reTest();
        }
    },2000)
}
reTest();

34.bookstrap的响应式所示怎么实现的

BootStrap 的响应式是基于它栅格系统,把页面分成12等份,通过为不同控件设置，诸如 col-(sm/md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) 来达到在不同显示区域下，不一样的布局效果，实现响应式布局

35 CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)

.one.two表示选择具有这两个类名的元素 权值也可相加

.one>.two表示选择类名为one的元素的子代元素其中类名为two 权值也可相加

36 CSS的引用方式有哪些？它们的区别

内联式引用<p style="witdth:100px"></p>  直接用在标签上，但维护成本高,不能被别的页面使用

标签内引用  页面较为清晰，但不能被别的页面使用

    <style>
        .container-small{
            max-width: 500px;

        }
        .btns .btn1{
            float:left ;
        }
        .btns .btn2{
            float:right ;
        }
        .alert{
            display: none;
        }
    </style>

外部引用 css代码与html代码分离，便于代码重复使用

<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

37.display：none和visibility：hidden的区别

display：none使用后元素脱离文档流，不再占据位置

visibility：hidden使用后元素虽然也不可见，但仍占据位置

38.link和@import的区别

       1:link属于XHTML标签，而@import完全是css提供的一种方式。

　　　　link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

     2：加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁）。

    3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容

39.null和undefined的区别？

console.log(typeof null)//Object

console.log(typeof undefined)//undefined

undefined表示变量声明了但没赋值 null表示变量没有被引用了

40.浏览器如何实现不同标签页的通信

 link、script标签可以引用外部文件，之后便可以在引用的页面使用

41.iframe的优缺点

优点：

1、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)

2、技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面

3、方便制作导航栏

缺点：

1、会产生很多页面，不容易管理

2、不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）

3、浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）

4、代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）

5、多数小型的移动设备（手机）无法完全显示框架

6、多框架的页面会增加服务器的http请求，影响页面的并行加载。

（并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。）

7、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

42.eval是什么

 eval把字符串参数解析成JS代码并运行，并返回执行的结果

JSON字符串转换为JSON对象的时候可以用eval

var json ="{name:'Mr.CAO',age:30}";
var jsonObj = eval("("+json+")");
console.log(jsonObj);//{name: "Mr.CAO", age: 30}

43.GET和POST的区别？何时使用POST

  1.get请求向服务器发送的参数接在url上，post则把内容放在请求头内，相对更安全

  2.Get传送的数据量小，不能大于2KB。Post 传送的数据量较大

   post 请求用来发送电子邮件、新闻或发送 能由交互用户填写的表格

44.做node用了什么框架

  用了express框架

45.怎么去判断出来数组里面值为1的元素

 先判断是否是数组，然后用filter方法判断值为1的元素的位置

var numberArr =[0,1,3,7,1,1,2];

numberArr.filter(function (item,index) {

    if(item==1){
        console.log(index);//1,4,5
    }
});

46.有一个数组，怎么去修改每一个值？

//对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
var arr=[0,1,4,1];
var res=arr.map(function(item){
	return item=1;
})
console.log(res);//[1,1,1,1]

47.export和export default?

export var i=1;
export var j=2;
导入时import {i, j} from './xxx';

export default function () {
  console.log('foo');
}
export default在一个文件中只能使用一次，不需要指定导出的内容的名称，需要引用的页面自己取名字
导入时import fx from './xxx';

48.module.export和export

module.exports属于node平台的语法  export属于es6的语法 

49.触摸有几个事件？

    touchstart：手指触摸到一个 DOM 元素时触发。

   touchmove：手指在一个 DOM 元素上滑动时触发。

   touchend：手指从一个 DOM 元素上移开时触发

50.在数组上新增一个方法，实现复制。
期望：[1,2,3].copy() //输出 [1,2,3,1,2,3]

Array.prototype.copy=function (){
	var res=this.concat(this);
	return res;
}
console.log([1,2,3].copy());

51.使用闭包实现一个方法，第一次调用返回1，第二次返回2，第三次3，以此类推。
count() //输出1
count() //输出2
count() //输出3

function fx(){
	var n=0;
	return function (){
		n++;
		console.log(n);
	}
}
var count=fx()
count();//1
count();//2
count();//3

52.封装一个函数，参数是定时器的时间，.then执行回调函数。
期望：sleep (5000).then(() => console.log(‘我会在5秒后打印’))

function sleep(timer){
	return new  Promise(function(resolve,reject){
		setTimeout(function(){
			resolve();
		},5000)
	})
}
sleep().then(()=>console.log("我会在5秒后打印"))

53.HTTP状态码200/302/401/404/500分别代表什么意思

200:响应成功

302:重定向

401:请求授权失败，需要进行用户认证

404:找不到资源

500:服务器内部错误

54.什么时候会发生跨域问题

公司会有很多项目，也会有很多子域名，各个项目或者网站之间需要相互调用对方的资源，避免不了跨域请求

55.Mongodb的update有几个参数？

三个参数，查找条件、更新内容、回调函数

56.实现左侧边栏固定，其他内容自适应?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float: left;
            width:200px;
            background-color: red;
            height:500px;
        }
        .right{
            float:left;
            width:calc(100% - 200px);/*剩下的宽度自适应*/
            background-color: blue;
            height:500px;
        }
    </style>
</head>
<body>
    <div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float: left;
            width:200px;
            background-color: red;
            height:500px;
        }
        .right{
            position: absolute;
            background-color: blue;
            height:500px;
            left:200px;
            right:0;
        }
    </style>
</head>
<body>
    <div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

57.js深度克隆的代码实现

        var arr=[1,2,4,[12,6],3,[[1,7],5]]
        function deepCopy(array){
            var res=[];
            if(Array.isArray(array)){
                array.forEach(function(item){
                    if(Array.isArray(item)){
                        res.push(deepCopy(item));
                    }else{
                        res.push(item);
                    }
                    
                })
            }
            return res;
        }    
       var result=deepCopy(arr);
       result[3][1]=1;
       console.log(result)//[1,2,4,[12,1],3,[[1,7],5]]
       console.log(arr)//[1,2,4,[12,6],3,[[1,7],5]]

58.canvas

canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成,只有两个可选的属性 width、heigth 属性,默认 width为300px、height 为 150px,也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲

使用canvas

1.var c=document.getElementById("myCanvas");//找到canvas元素

2.var ctx=c.getContext("2d");//获取canvas的2d上下文对象

3.ctx.fillStyle="#FF0000";//画矩形
ctx.fillRect(0,0,150,75);

59.匿名函数

匿名函数：没有实际名字的函数

1.可以用于事件触发后执行的函数

 //获得按钮元素

    var sub=document.querySelector("#sub");

    //给按钮增加点击事件。

    sub.οnclick=function(){

        alert("当点击按钮时会执行到我哦！");

    }

2.回调函数
数setInterval(function(){

    console.log("我其实是一个回调函数，每次1秒钟会被执行一次");

},1000);

3.返回值

function fn(){

    //返回匿名函数

    return function(){

        return "张培跃";

    }

}

4.自执行函数

(function (){})()

匿名函数的作用

   通过匿名函数可以实现闭包

  模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题

60.animation和transition

animation为css3动画属性 transition为css3过渡属性

区别

        1）动画不需要事件触发，过渡需要(例如鼠标划过，单击按钮，点击图片等操作)。

        2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

61.移入图片让那个图片慢慢放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .left img{
            transform: scale(0);
            border-radius: 50%;
            transition: all 2s linear;
        }
        .left:hover img{
            border-radius: 0;
            transform: scale(1);
        }
    </style>
</head>
<body>
    <div>
        <div class="left"><img src="https://itying-com-1251179943.cos.ap-beijing.myqcloud.com/images/category/02.png" alt="app"></div>
    </div>
    <script>
    </script>
</body>
</html>

62.用什么会导致内存泄漏？

 1.意外的全局变量

 2.定时器 定时器的回调函数如果引用了页面的dom元素，不手动释放定时器的话，则引用dom元素所占的内存无法被回收

3.遗漏的dom元素 dom元素的生命周期取决于是否挂在dom树上，但如果js代码也引用了该dom元素，那它的生命周期就同时由这俩个因素决定了

63.promise是什么？能解决什么问题？

Promise是一个对象，从它可以获取异步操作的消息,Promise对象是一个构造函数，用来生成Promise实例,有了promise可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

64.作用域链

作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的,a创建在b的作用域链里 ，c在全局作用域里 则作用域链为a→b→c

65.减少页面加载时间的方法

  1.重复的HTTP请求数量应尽量减少

  2.文件资源优化**1**压缩Javascript、CSS代码文件压缩  **2**CDN托管  **3** 缓存使用  **4**文件合并

  3.优化图片文件　

　　优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。

普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现

 4.当页面内容庞大到一定程度，可以采用分页的方式展现

 5.懒加载，首次打开页面只展示需要的资源

 6.预加载，在还没打开页面前提前加载资源

66.怎么理解模块化开发

     一个模块就是一个实现特定功能的文件,要用什么功能就加载封装了对应功能的模块，模块对外暴露了可用的接口,加载后即可使用无需关心内部实现，偶且模块化可以避免变量污染，命名冲突、提高代码复用率、维护性

67.手机号的正则表达式(以1开头的11位数字)

^\d{1,11}$

68.用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .circe{
           width:400px;
           height:400px;
           border-radius: 50%;
           background-color: red;
           animation: slideUpDown 1s infinite alternate;
           margin-top:10px;
       } 
       @keyframes slideUpDown {
            from{
            margin-top:10px;
           }to{
            margin-top:60px;
           }
       }
    </style>
</head>
<body>
    <div class="circe">
    </div>
</body>
</html>

69.列举两种清除浮动的方法(代码实现或者描述思路)

 1.给浮动的父元素添加overflow:hidden样式

  2.在浮动元素的最后添加标签,并添加clear:both样式

70.代码实现3栏效果，左右两栏固定宽度，中间栏随着浏览器宽度自适应变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .left{
           width:400px;
           height:100%;
           background-color: red;
           position: absolute; 
           left: 0;
           top:0;
       } 
       .right{
           width:400px;
           height:100%;
           background-color: blue;
           position: absolute; 
           right: 0;
           top:0;
       } 
       .middle{
           position: absolute;
           height:100%;
           left:400px;
           right:400px;
           top:0;
           background-color: black;
       }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>
</html>

71.<ol><li></li></ol>结构的html代码，写原生js实现点击某个li就弹出对应的索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
    <script>
        var childEle=document.querySelectorAll('li');
        for(let i=0;i<childEle.length;i++){
            childEle[i].onclick=function(ev){
                console.log(i+1)
            }
        }
    </script>
</body>
</html>

72.vue如何实现双向据绑定？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				v-model="变量" 双向数据绑定
				给表单元素增加v-model属性
				表单元素的值变化，变量也会有变化
				变量有变化的时候，表单元素的值也会有变化
				可以通过该方式获取表单元素的值。
			 -->
			<input type="text" v-model="msg"><br><br>
			{{msg}}<br><br>
			<button v-on:click="change()">修改msg的值</button>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:''
				},
				methods:{
					change(){
						this.msg+=1;
					}
				}
			})
		</script>
	</body>
</html>

73.原生js的变量类型有哪些？ES6新增哪几个变量类型？

原生js的变量类型有number boolean string null undefined object es6新增symbol

74.localstorage和sessionstorage的区别

 1.localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在，sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

 2.相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息

75.v-if和v-show的作用相似，它们的区别

   1.v-if操作的是dom，频繁操作耗费性能 v-show操作的是css样式

   2.v-if支持 template 标签  v-show不支持template

76.watch的作用？为什么要用它？

 watch的作用可以监控一个值的变换，值发生变化执行watch里的方法 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如ajax请求，复杂的业务逻辑处理等

77.js 的继承实现方式有哪些，列举两个例子

//父类
function Animal(name){
    this.name=name;
    this.run=function(){
        console.log('跑步')
    }
}
      Animal.prototype.eat=function(){
            console.log('吃')
        }
//子类继承父类-原型链继承
function dog(){
    this.name="dog"
}
dog.prototype=new Animal()
var child=new dog();
console.log(child.eat())//吃
//子类继承父类-组合继承（组合原型链继承和借用构造函数继承）
function dog(name){
    Animal.call(this,name)
}
dog.prototype=new Animal("cat")
var child=new dog();
console.log(child.eat())//吃

78.This指向问题？

 1.全局定义的函数this指向window

 2.事件触发时this指向事件源

 3.箭头函数的this指向定义时的所处上下文的对象

 4.定时器里的this指向window

79.Vue中有哪些生命周期函数

  Vue有八种生命周期函数

  beforeCreate(实例创建前)

  created(实例创建后)

  beforeMoute(元素挂载前)

  mouted(元素挂载后)

  beforeUpdate(实例更新前)

 updated(实例更新后)

 beforeDestory(实例销毁前)

 destory(实例销毁后)

80.vue的生命周期，哪个钩子函数可以数据请求，为什么？

 mounted函数 因为数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，这边请求改变数据之后刚好能渲染

81.vue-router 的模式有？

   Vue-router 有两种模式：Hash 模式和 History 模式。在开发的时候可以通过使用在路由配置中配置mode这个属性的值来配置使用哪种路由，如果不配置这个字段就默认是 hash 模式。

　　* Hash 模式：该模式有一个很明显的标志就是 URL 中带有 #，我们可以通过 window.location.hash 来获取这个值。

　　* History 模式：该模式是由 h5 提供的 history 对象实现的。

82.vue第三方组件的引入

比如使用mint UI 首先需要用npm下载mint UI包，在main.js引入import MintUI from 'mint-ui'；import 'mint-ui/lib/style.css',然后就可以在任何组件直接使用mint UI的组件

83.vue路由传参怎么实现？

1.通过动态路由传参,通过var id = this.$route.params.id;在组件中拿到id

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
//在这个实例中，我们就可以通过:id这种方式实现把参数的值传递到组件中

2.通过路由URL中添加query参数传参 比如/search?q=vue 在组件中通过var q = this.$route.query.q;拿到q

84.bootstrap栅格系统，你怎么理解栅格系统

 栅格系统把一行分为12等份，通过选择占用的份数来实现不同比例的布局，运用媒体查询功能(@media)可以根据屏幕宽度分为以下四个尺寸

        col-xs-     对应超小设备（屏幕<768 px ）手机

        col-sm-    对应小型设备（屏幕>768 px 屏幕<992 px ）平板电脑

        col-md-   对应中型设备（屏幕>992 px 屏幕<1200 px ）台式电脑

        col-lg-     对应大型设备（屏幕>1200 px）台式电脑

        col-xs-12就是在屏幕小于768px时，图片会在横向上充满，占据整个div，@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

85.vue删除数据监测不到？

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的

var data = { a: 1 }
var vm = new Vue({
  data: data
})
// `vm.a` 和 `data.a` 现在是响应的
vm.b = 2
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的

对于 Vue 实例，可以使用 $set(key, value) vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象，可以使用全局方法 Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

86.vue父组件子组件通信

父组件传值给子组件步骤

            1、在占位符中  :a="fmsg" a子组件中需要接收的数据(自定义) fmsg父组件的数据
            2、在子组件中定义props属性 接收a的值  props:['a']
            3、在组件中可以直接使用a

 子组件传递数据给父组件
            1、在子组件中定义一个方法 。方法内部书写 this.$emit('事件名',所需要发送的数据a,b,c)
            2、在占位符中 @事件名="父组件中接收数据的方法名" 此处的方法名不需要加()
            3、在父组件中 定义接收数据的方法
            4、在子组件中，执行第一步的时候子组件定义方法

87.同源策略，跨域，后台如何解决跨域，html有哪些标签可以跨域

  如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源

  同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源,同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

后台通过CORS解决跨域问题 后端程序只需要在返回的响应头中加上 Access-Control-Allow-Origin 字段，并且把该字段的值设置为 跨域请求的来源地址或简单的设置为 * 就可以了

如果是复杂请求还需要给响应对象添加上 常用请求方法（PUT、DELETE）的支持

html的script、img、link标签可以用于跨域