html与css

1、的title与alt有什么区别

-title是提示文本，鼠标放在图片上提示的文字

-alt 是图片显示不出来时的文字替代，能显示出来就不用替换

2、label的作用是什么？怎么用

Label与表单input配合使用，当点击label中的文字时，浏览器会自动对焦到表单控件上，扩大范围

男 

3、input的type属性：

password、text、radio单选、checkbox复选框，button，reset重置、submit提交-----单选框必须有相同的name 属性才能实现单选一

4、title与h1区别，b与strong的区别，i与em的区别

--title属性没有明确的标题，只是html语义化的一个标签。而H1是层次明确的标题。H1标签中的文字、字体较大、而且自动加粗。

--b与strong都有字体加粗的作用，strong只是更加语义化，是加重语气的意思

--i与em。 em是强化文本的内容，不仅显示斜体，而且可以加强语气，i仅仅表示标签内文本为斜体

 5、 页面导入样式时,使用 link 和@import 有什么区别?

 link 属于 XHTML 标签,除了加载 CSS 之外还能用于定义 RSS,@import 是 CSS 提供的,只能用于加载 CSS。

link 加载的文件,在页面加载的时候,link 文件会同时加载,而@import 引入的 CSS 文件,是页面在加 载完成后再加载的

6、如何实现浏览器内多个标签之间的通信?

1、使用LocalStorage

LocalStorage在一个标签内被添加、修改、删除内容时。都会触发一个storage事件，通过在另一个标签里监听storage事件，既可得到localstorage存储的值，实现不同标签之间的通信。

LocalStorage.setItem(key,value)添加内容，

2、cookie+setInterval

使用cookie+setInterval，将要传递的数据存储在cookie中，每隔一段时间读取cookie信息，即可随时获取要传递的信息。

7、浏览器内核的理解

浏览器主要分为两个部分:渲染引擎和 JS 引擎

渲染引擎：主要负责获取页面内容和排版渲染页面

JS 引擎：解析和执行 JS 来实现页面的动态效果，以及交互内容

常用的浏览器的内核是：

8、 简述一下你对HTML 语义化的理解?

html 语义化让页面的内容结构更加简单易懂， 便于搜索引擎解析，便于 阅读维护和理解。

9、浏览器是怎么对 HTML5 进行离线缓存资源进行管理和加载的?

在联网情况下，html 头部有 manifest 属性，会请求 manifest 文件， 如果是第一次访问，浏览器会根据 manifest 的内容下载相应的资源并且进行离线缓存， 如果不是第一个， 会加载成为新的 manifest 文件，新旧 manifest 文件对比， 如果一致，则不发生变化， 如果不一致，那么会重新下载文件中的资源并进行离线缓存

10、描述sessionStorage与localStorage、cookie的区别

 sessionStorage与localStorage的数据都是在本地存储，不会把数据发给服务器。localStorage是关闭浏览器，数据还存在不会丢失。而sessionStorage是离开浏览器后，数据会自动删除。

cookie与session区别联系

Cookie与session共同之处在于：cookie和session都是用来跟踪浏览器用户身份的会话方式

存储位置上：Session的数据信息存放在服务器上，Cookie的数据信息存放在客户端浏览器上，比较容易遭受到不法截获，安全性比session差

存储容量：Session存储数据远高于cookie。session可以存任意数据类型，cookie只存ASCII。

存取：Cookie可设置为长时间保持，session一般保持时间较短，客户端关闭或 者session超时都会失效

、、、、

用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建创建对应的 Session ，请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器，浏览器接收到服务器返回的 SessionID 信息后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名。

当用户第二次访问服务器的时候，请求会自动判断此域名下是否存在 Cookie 信息，如果存在自动将 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。

根据以上流程可知，SessionID 是连接 Cookie 和 Session 的一道桥梁，大部分系统也是根据此原理来验证用户登录状态。

CSS：

1、什么是盒模型？

1. 盒模型分为两种: IE 盒模型和 W3C 盒模型 （标准盒模型）
2. W3C 标准盒模型: 标准盒模型的width与height属性只包含了content
3. IE 盒模型:   IE盒模型的width与height属性的范围包含了border、padding和content、
4. 在网页中，一个元素占有空间的大小由几部分组成，包括元素的内容content，元素的内边距padding、元素的边框border、元素的外边距margin四个部分组成，这四个部分占有的空间中，

 2、css如何转换盒子模型：

box-sizing：content-box 标准盒模型

box-sizing：border-box  IE盒模型

3、行内元素有哪些？块级元素有哪些？区别

1. 块级元素：div /p/table/ul/ol/li/h1-h6
2. 行内元素：  a strong b I em del s ins u span  
3. 行内块元素: img input td button

块元素：独占一行，宽高内外边距可以修改，宽度默认100%，里面可以放块级元素和行内元素，p与h不可以放块级元素

行内元素：一行多个，宽高设置无效，默认宽度是内容宽度，行内元素内只能放文本和行内元素，链接里不能放链接

1. 文字的垂直居中：让文字高度等于盒子高度，line-height：盒子高度
2. 行高等于：上边距+下边距+文字高度
3. 块级盒子水平居中：1、必须指定宽度  2、盒子左右外边距设置为auto       ----Margin：0，auto
4. 行内元素水平居中: 给其父元素添加text-align：center
5. 行内元素垂直居中：vertical-align：middle--放在父元素中间

对于嵌套的块元素，父元素与子元素同时又外边距时，父元素会塌陷较大的外边距

        解决： 1、为父元素定义上边框透明

                    2、为父元素定义上内边距

                   3、为父元素添加 overflow：hidden

4、Display 有哪些哪些值？说明他们的作用

block 元素转化为块级元素

inline 元素转化为行内元素

inline_block 元素转化问行内块元素

Table 元素会以块级表格来显示

Inherit 继承父元素 display 属性

5、CSS 选择器有哪些?

1. ID 选择器 (#ID)
2. 类 选 择 器 (.class 名 )
3. 标签选择器 (标签)
4. 通配符 (*)
5. --复合选择器--
6. 子选择器 (div>p)
7. 后代选择器 (div p)
8. 并集选择器 (div,p,a,ul)
9. 伪类选择器 (a:hover) ：lick :visited 

6、Css选择器权重：

1. 就近原则,后加样式优于前面的样式
2. 内嵌样式>内联样式>外联样式
3. --!Important 大于一切样式
4. ！important >行内1000>id选择器100>类选择器 伪类选择器10 （属性选择器） >标签选择器1（与伪元素选择器） >继承 或者*（通配符）

7、浮动

•  1、浮动元素脱离标准流，浮动的盒子不在保留原来位置，且会影响后面的标准流
•  2、多个盒子都设置浮动他们会按照属性值一行内显示并且顶端对齐
•  3、浮动元素具有行内块元素特性。行内元素不需要转换为行内块元素就可以设置宽度和高度，块级元素没有设置宽高，添加浮动后默认父宽度

8、#浮动产生的问题：

 当父元素不方便给高度时，但是子元素浮动不占有位置，所以父元素原本应该被撑开，但是高度却为0，就会影响下面的标准流

9、清除浮动的方式：

 1、给浮动元素末尾添加一个标签，给标签添加 clear：both 属性

 2、 给父元素添加 overflow:hidden 属性

 3、给浮动元素的父元素：after 伪属性

10、 伪类选择器和伪元素的区别:

伪类用于向某些选择器添加特殊效果 (单冒号)

伪元素用于将某个特殊的东西添加到某些元素的前后 (双冒号)

11、css定位position方式：

• 1、relative ：相对定位  (相对于原来位置定位,不脱离文档流，保留位置)
• 2、absolute 绝对定位  (相对于他最近的定位父元素定位,脱离文档流，不占有原来位置)
•      如果没有父元素或者祖先元素没有定位，则以浏览器为准定位。如果父亲有定位，则以最近一级 有定位的祖先元素为参考点定位
• 3、fixed 固定定位  (相对于浏览器可视窗口进行定位,脱离文档流)
• 4、static  ：静态定位--默认值,不定位
• 5、Inherit 继承父元素的 position 属性
• 6、sticky：粘性定位

12、css三角做法：

高度宽度设为0，用边框宽度来设置三角：border-top、border-left、border-right，一个有颜色，其余设为没颜色。

border: 100px solid transparent;   border-top-color:red;

13、 li 与 li 之间有看不见的空白间隙是什么原因引起来的?

行内块排列会受到(空格/回车)等的影响,因为空格也属于字符,把字符大小 设置为 0 就 ok 了

14、css实现单行文本显示：

overflow : hidden ;  //超出部分隐藏

text-overflow : ellipsis ;  //省略号显示超出

white-space : nowrap ;  //强制一行显示

15、display显示网页的显示与隐藏和visibility显示的区别

1、display：none/block  隐藏后不占有位置

2、visibility：visible/hidden 隐藏后占有位置

3、overflow：visible/hidden 溢出部分隐藏

css隐藏的方法：

z-index：-888，把元素的层数调为复数，其他元素覆盖就可以隐藏

opacity：0；把元素透明度设置为0 ，也可以达到隐藏的效果

使用定位position：absolute；将元素定位到看不见的区域

使用tranform：scale（0、0）；把元素缩放为0，实现元素隐藏

解释一下CSS3的flexbox（弹性盒布局模型），以及使用场景

16、图片懒加载：

图片懒加载理解：

由于商城图片过多时，就会给图片加一个懒加载的缓冲效果。--当图片进入可视化区域的时候才会加载，  否则图片只是一个空标签。这样可以优化页面渲染速度，提升用户体验。

思路：

将页面中的所有 img 属性 src 用 data-src 代替，当页面滚动至此图片出现在可视区域时，用 js 取到该图片的 data-src 值赋给 src

17、常见的内存泄漏：

• 内存泄漏会导致一系列问题，比如：运行缓慢、崩溃、高延迟
• 内存泄漏是指你用不到（访问不到）的变量，依然占据着内存空间，不能被再次利用起来
• 意外的全局变量，这些都是不会被回收的变量（解决设置 null 或者被重新赋值），特别是那些用来临时存储大量信息的变量
• 周期函数一直在运行，处理函数并不会被回收，jq 在移除节点前都会， 将事件监听移除
• js 代码中有对 DOM 节点的引用，dom 节点被移除的时候，引用还维持

常见内存泄漏：1、意外的全局变量 （1、设置为null 或者在js文件添加‘use strict’开启严格模式）2、计时器和回调函数  （清除计时器）3、闭包 

18、网站页面常见优化的手段

1、优化图片格式（优先级选择：webp>jpg>png>bmp）

2、使用压缩文件，min.js、min.css

3、使用浏览器缓存：cookie、localStorage

4、减少请求次数

5、使用懒加载，避免一次性请求过多

19、px与em的区别

px 与em都是长度单位，

区别是：

px值是固定的，指定多少是多少。不能适应浏览器缩放时产生的变化，

 em的值不固定，会继承父元素的字体大小，是一个相对单位

 rem是css3中新增的相对单位，相对于html根元素字体大小计算，可以通过修改根元素字体大小调整所有字体大小

20、同步与异步：

同步是阻塞模式，异步是非阻塞模式

同步就是一个进程在执行某个请求时，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，知道收到返回信息才继续执行。

异步就是：进程不需要一直等下去，而是执行下面的操作，

21、盒子水平垂直居中方法（高频）

没有给定宽度和高度的情况下：

1、利用绝对定位+transform 子绝父相

先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

//父元素
position:relative ;  //父元素相对定位
//需要居中的元素设置
position：absolute;  //子元素绝对定位
top：50%；   //走父亲宽高的一半
right：50%；
transform:translate(-50%,-50%);
margin：0

2、给父使用flex布局，通过给父元素设置--align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中
 

//给父元素设置
display:flex;
justify-content:center;
align-items:center;

3、通过父元素display:table-cell 。子盒子必须设置为display：inline-block

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

//需要居中的子元素
display：inline-block;

给定宽度和高度的情况下：
 1、 绝对定位+margin负，子绝父相

 先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

//父元素
position:relative ;  //父元素相对定位
//需要居中的元素设置
position：absolute;  //子元素绝对定位
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;  //负自己高一半
margin-left:-100px;  //负自己宽一半

2、绝对定位+margin:auto法     子绝父相     需要

设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于子盒子有宽高的情况

//父元素
position:relative  ; //父元素相对定位
//需要居中的元素设置
position：absolute;  //子元素绝对定位
margin:auto;
left:0;
right:0;
top:0;
bottom:0

22、CSS3与HTML新属性： HTML5新增属性：

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：localStorage 和 sessionStory 两种本地离线缓存
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议

1、HTML5新增语义化标签

• 头部标签 
• 内容标签
• 定义文档某个区域
• 侧边栏标签

2、HTML5新增多媒体标签

 音频   controls显示控件  loop循环播放

视频

3、HTML5新增input类型

 新增表单属性：可以使用：input::placeholder { color:pink ;}修改ph里的文字

 4、 HTML5新增的表单属性

CSS3 新特性 1、新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

 2、属性选择器

 类选择器、属性选择器、伪类选择器的权重都为 10

3、结构伪类选择器

ul li:first-child {
    background-color: pink;
}
ul li:last-child {
    background-color: pink;
}
ul li:nth-child(5) {
    background-color: skyblue;
}

4、伪元素选择器

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element：before{}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素， after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为 1

5、盒子模型

CSS3中可以通过 box-sizing 来指定盒模型。

1. box-sizing：content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width
   如果盒子模型我们改为了 box-sizing： border-box ，那padding 和 border就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

6、css3渐变：CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。

7、css3过渡：transition: 要过渡的属性 花费时间 运动曲线 何时开始;

8、2D转换： transform: translate(), rotate() scale()

      3D转换

9、css3动画animation

js部分： 1、 JS 数据类型有哪些?

基本数据类型：string、number、boolean、null、undefined

引用数据类型：object（array 和函数属于 object）

5种基本类型+1 种引用类型

2、js的typeof返回哪些数据类型？

string、number、boolean、undefined、object、function    无法判断数组

js内置对象：Math对象，Date对象，Array对象，字符串对象

3、强制类型转换和隐式转换

强制（parseInt、parseFloat、number）

隐式（== 、 ===）

4、js的同源策略

一段脚本只能读取来自同一来源的窗口和文档的属性，同一来源是指：主机号

协议、端口号的组合

5、数据类型转换

• 转字符串类型：1，x.toString(); 2,string( x ); 3,拼接 x+’空’ ；
• 转数字型：1、parseInt( x )/ parseInt( ‘3.14’ ) 小数取整，会去掉单位。
•                   2、parseFloat( x )/ parseFloat( ‘3.14’ ) 会去单位   
•                   3、Number(变量 )/    
• 转成布尔型：Boolean( x )
•  利用算数- * / 隐式转换console.log（‘12’-2）/  console.log（‘12’-‘2’）。隐式转换没有+。  关系运算符默认隐式转换>  <  >=  <=  ==
• 6、typeof 和 instanceof 有什么区别?

• typyof： 用于判断数据的基本类型，返回值有六种 ---无法判断数组

  instanceof ：判断左边对对象是否是右边类的实例，返回值为true或者false

•    
• 7、数组操作方法
• length：计算数组的长度 索引：通过索引获取数组中对应值，同时也可以改变索引对应的值 indexOf：返回指定元素的位置，若元素不存在返回-1  
• push：向数组末位添加若干元素，返回长度
• pop：删除数组末位最后一个元素，但会被删除元素
• unshift：向数组头部添加若干元素，返回长度
• shift：删除数组头部的第一个元素，返回被删除的元素

• sort( );    arr.sort(    function(a,b) {   return a-b； //升序  }    ); arr.sort(    function(a,b) {   return b-a ；//降序  }    );

• reverse：对数组中的数据进行反转，返回反转后的数组
• concat：将两个数组合并，返回新数组（可以接受任意元素和数组，并进行拆分放 入数组）
• filter()        返回true的留下，false的舍弃        
  forEach()     循环遍历里面的每一个元素
  join()        将数组中的元素连接成字符串输出
  slice()       从当前数组中截取一个新的数组，不影响原来的数组
  splice()      删除或替换当前数组的某些项目

• 数组转字符串类型：

• arr.toString();
• arr.join( );  / arr.join( ‘-’ );用-分割 / arr.join( ‘&’ );用 & 分割

检测是否为数组：

• console.log( arr instanceof Array ) ！！常用
• console.log( arr.construct == Array)
• console.log( Array.isArray( arr ))

数组操作改变原数组与不改变原数组

改变：push()、pop（）、shift（）、unshift（）、sort（）、reverse（）

不变：indeof()、filter()、join()、tostring()、concat（）

• 8、==与===的区别？

===为等同符，当左边与右边的值与类型都完全相等时，会返回 true；

==为等值符，用来判断值是否相同，不会判断类型是否相

9、字符串操作办法

• 字符串转数组 splite（‘分隔符’）：用于把一个字符串分割成字符串数组
• indexOf（）：可返回某个字符换字符串中首次出现的位置
• substring（）：用于提取字符串中介于两个指定下标之间的字符
• concat（）：字符串拼接
• trim（）：移除字符串两边的空格
• replace（'被替换'，‘’替换）：替换字符
• substr（start，length） 从start开始取length长度
• toUpperCase() 转大写
• toLowerCase（）转小写

10、js中的作用域与变量声明

作用域：每一个变量、函数都有其作用的范围，超出范围不得使用，这个叫做作用域

全局变量、局部变量：

全局变量：在全局范围内声明的变量，如 var a =1；只有赋值没有声明的值，如 a =1（注： 如果 a=2 在函数环境中，也是全局变量）

局部变量：写入函数的变量，叫做局部变量，作用范围仅限函数内部作用：程序安全，内存的 释放

作用域链：

查找变量的过程。先找自己局部环境内部有没有声明或者是函数，如果有，则查看声明有无赋值或  者是函数的内容，如果没有，则向上一级查找。

变量声明提升：

     在预编译阶段，编译器会把所有定义的变量全部提升到最顶部，即把变量声明的语句会自动放置在  最顶部

11、预解析

 预解析：JS引擎会把js里面所有的var 还有function提升到当前作用域的最前面

 预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

         变量提升：把所有变量声明var提升到当前作用域最前面 不提升赋值操作

         函数提升：把所有函数声明function提升到当前作用域最前面 不调用函数

12、js中this的指向

      箭头函数没有自己的argument和this，箭头函数定义在那个作用域内，他的this就会继承作用域中this的指向。。（setTimeOut中的this指向window。回调函数this 指向window,）

this的指向：

•  全局中的this：this出现在全局函数中，永远指向window。严格模式下，this是undefined
•  函数中的this：（对象中的方法被调用时,）函数中的this指向调用方法的对象
•  箭头函数中this：this与父级作用域的this指向相同
• 构造函数中的this： this指向构造函数新创造的对象
• 函数用call（）与apply（）调用时：this就指向它们传入对象的值     fn.call(obj)--指向obj
• 函数用为事件处理函数时，它的this指向触发事件的元素

13、call、bind 与apply的区别与联系

相同点：

 1、都可以改变this的指向

 2、第一个参数都是this要指向的对象

不同点：

 1、call、bind 可以传入多个参数、apply 只能传入两个参数，所以第二个参数往往是作为数组形式传入，需要传输的参数需要都放到数组中

 2、call、apply都是返回一个值，而bind返回的是一个函数形式

14、原型与原型链

原型：

每个函数都有一个 prototype属性，称为显示原型

每个实例对象都有_ _proto_ _属性，称为隐式原型

每个实例化对象的隐式原型，指向自身构造函数的显示原型。每个显示原型都有一个constructor属性，指向构造函数

原型链：

当访问一个对象属性时，如果对象没有这个属性，那就会去他的原型proto上找，如果还没有就去它原型的原型上找，以此类推，直到找到最顶层Object.prototype原型对象为止，称为原型链。Object.prototype原型对象为null

15、继承的方法有哪些？

   原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承   es6的extends继承

16、什么是闭包、闭包的作用

闭包：

 一个函数有权访问另外一个函数作用域中的变量 叫闭包。

在一个函数外部访问在这个函数内部定义的局部变量，就需要在一个函数内部再定义一个函数，通过return返回到函数外部，从而满足需求，这个过程形成闭包。

闭包简单理解为 "定义在一个函数内部的函数" 。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包另一个作用是让这些变量的值永远保持在内存中，不会被外部函数调用后被自动清除。

闭包有哪些应用场景：

闭包随处，Ajax 请求的成功回调，setTimeout 的延时回调，防抖和节流、事件绑定的回调函数，这些都是闭包。

简而言之，无论使用何种方式对函数类型的值  进行传递，当函数在别处被调用时都有闭包的身影.

闭包的缺陷：

由于闭包打破了函数作用域的束缚，导致里面的数据无法清除销毁，当数据过大时会导致数据溢出

实现一个闭包：

17、什么是冒泡和挖洞

当一个子标签触发某一个事件(比如click)后，该事件会从顶级父标签一级一级往该标签传递，这个过程叫做挖洞（捕获）

当找到该子标签之后事件会再从子标签开始一级一级往父标签传递，这个过程叫做冒泡

18、事件委托（事件代理）

     事件代理是将子元素的事件写一个父元素,让父元素代替处理,内部使用  e.target 就是触发这个事件的子元素

19、如何阻止事件冒泡与默认事件

       event.preventDefault( );     //阻止默认事件

       event.stopPropagation( );  //阻止事件冒泡

20、new操作符在创建实例的时候经历了哪几个阶段

   new 创建了一个对象，共经历了 4 个阶段： 创建一个空对象

• 创建一个空对象
• 设置原型链
• 让实例化对象中的 this 指向对象
• 并执行函数体判断实例化对象的返回值类型

21、异步编程的实现方式

回调函数

优点：简单、容易理解

缺点：不利于维护，代码耦合高

事件监听（采用时间驱动模式，取决于某个事件是否发生）

优点：容易理解，可以绑定多个事件，每个时间可以指定多个回调函数缺点：事件驱动型，流程不够清晰

发布、订阅（观察者模式）

类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者， 多少订阅者

Promise 对象

优点：可以利用 then 方法，进行链式写法；可以书写错误时的回调函数； 缺点：编写和理解，相对比较难

Generator 函数

优点：函数体内外的数据交换、错误处理机制缺点：流程管理不方便

async 函数

优点：内置执行器、更好的语义、更广的适用性、返回的是Promise， 结构清晰缺点：错误处理机制

22、深拷贝与浅拷贝的问题

对于基本数据类型：深拷贝与浅拷贝都是直接复制数据值。

深拷贝和浅拷贝值针对 Object 对象数据类型-这样的复杂类型

浅拷贝是复制某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。所以修改其中任意一个值，另外一个值也会随之变化。

深拷贝是另外创造一个一模一样的对象，新对象与原对象不共享内存，修改新对象不会改到原对象。

浅拷贝实现方法:  

“Object.assign()”方法--Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

深拷贝实现方法： JSON.parse( )和 JSON.stringify( )--函数不能被正确处理

23、js中的异步操作--计时器

setTimeout 只执行一次

setInterval 会一直重复执行

24、什么是事件循环

同步任务：立即执行任务，同步任务直接进入主线程中执行。

异步任务：异步执行的任务，如ajax请求，setTimeout定时器等

同步任务进入主线程，异步任务进入任务队列，主线程内的任务执行完毕为空时时，会去任务队列读取对应的任务，推入主线程执行。上面过程的不断重复就是事件循环。

25、forEach与map的区别

这两个 API 都可以遍历数组

         forEach 函数,没有返回值，直接引入当前数组的内存地址，生成的数组的值发生变化，当前遍历数组也相应变化

         Map 方法是通过调用数组中的每个元素,映射到新数组中，返回一个新数组，不改变当前数组   --map不return返回undefined

26、什么是伪数组？如何将伪数组转换成真数组？

伪数组：1，具有数组length  2，按照索引凡是存储 3，没有真正数组的方法pop/push

      伪数组的三大特性：

• 具有 length 属性
• 按索引方式存储数据
• 不具有数组的 push，pop 等方法

将伪数组转化为标准数组：

1、需要用到数组原型中的方法 slice      例如： Array.prototype.slice.call( 伪数组名称 );

2、用es6中扩展运算符

27、事件的各个阶段

• 捕获阶段---> 目标阶段---> 冒泡阶段
• document ---> target 目标---> document
• 由此addEventListener 的第三个参数设置为true 和false 的区别已经非常清晰了
• true--->代表该元素在事件的”捕获阶段”(由外向内传递)响应事件
• false --->表示该元素在事件的”冒泡阶段”(由内向外传递)响应事件

28、DOM节点的增删改查

getAttribute（）//获得自定义属性

setAttribute（‘属性’，‘值’）//设置自定义属性

removeAttribute（属性）//移除自定义属性

获取父亲节点：element.parentNode

获得孩子节点：element.children   -

--父.lastChild   --父.firstChild --  --nextSibling--   --previousSibiling--

创建节点：creatElement         创建后添加才显示

父.appendChild(子)--新节点添加到父节点末尾

父.insertBefore（新节点，指定子）新节点添加到父节点指定子节点前

1）创建新节点--增加

createElement() //创建一个具体的元素

2）添加、移除、替换、插入

appendChild() //添加--末尾

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

• getElementById( )
• getElementsByClassName( )
• getElementsByTagName( )
• querySelector( ) 返回第一个匹配的元素
• querySelectorAll( ) 返 回全部匹配的元素

 element.innerText  ---从起始到终止位置内容，修改内容里不识别html标签，换行和空格会去掉。

 element.innerHTML--从起始到终止位置内容，内容识别html标签，保留换行和空格------常用

添加事件监听：addEventListener

删除事件监听：removeEventListener

29、函数的防抖和节流

防抖：事件触发并经过一段时间间隔后执行事件处理函数，如果在这段时间内事件又被触发了，那么将重新计时。----每次点击事件，都清除计时器

 

节流：事件触发并经过一段时间间隔后执行一次事件处理函数。也就是说不管你触发了多少次事件，在这段事件就只能触发一次  ---设置一个变量，限制为true时才可以进入，进入后为false

30、null与undefine

• null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在对象
• undefined 主要指定义了变量，但是并未赋值

31、addEventListener 监听点击事件与click 事件有什么区别?

addEventListener 事件可以对普通元素进行多个事件处理，click 事件只能使元素运行最新的事件结果

32、检测对象中的属性是否存在

第一种使用 in 操作符号, 返回 true 或 false: console.log(“属性名” in 对象名);

第二种使用 hasOwnProperty 方法, 会返回 true 或 false:      对象.hasOwnProperty(“属性名”)

第三种是是够括号符号obj[‘属性名’], 如果属性存在, 则返回该属性的值, 如果不存在, 则返回 undefined

33、window.onload 和DOMContentLoaded 的区别

1、window.addEventListener(‘load’,function(){

//页面的所有资源加载完才会执行, 包括图片和视频等})

2、document.addEventListener(‘DOMContentLoaded’,function(){

//DOM 渲染完即可执行, 此时图片,视频还可能没有加载完成})

 ES6: 1、es6新特征：

   1.let 关键字   声明变量

   2.const 关键字    声明常量

   3.变量和对象的解构赋值      ，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；

   4.模板字符串          字符串中可以出现换行符；可以使用 ${xxx} 形式引用变量；

   5.箭头函数

    6、函数参数默认值    es6允许给函数的参数赋初始值；

    rest参数    ES6的rest参数...args，rest参数必须放在最后面  用来代替 arguments；

   7、扩展运算符     .. 扩展运算符能将数组转换为逗号分隔的参数序列；

   8、symbol     es6引入新的数据类型symbol

    9、promise  

   10、set集合    

   11、Map集合 

   12、class类

2、var与let、const的区别：

var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的，由于变量声明（以及 其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头 声明；

let关键字用来声明变量：1. 不允许重复声明；（var允许） 2. 块儿级作用域（局部变量）；

                  3. 不存在变量提升；（var存在） 4. 不影响作用域链；

const关键字用来声明常量：1、不能重复声明，声 明的时候必须赋初始值，2、不能够重新赋值（如果值是一个对象,可以改变对象里边的属性值/对数组元素也可以修改)

3、严格模式下有哪些特征：

4、箭头函数：

1. 如果形参只有一个，则小括号可以省略；

2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；

3. 箭头函数 this 指向声明时所在作用域下 this 的值；

4. 箭头函数不能作为构造函数实例化；

5. 不能使用 arguments；

5、箭头函数与普通函数的区别：

箭头函数比普通函数更加方便有效

箭头函数没有 prototype原型对象，所以箭头函数本身没有 this

箭头函数没有的arguments

箭头函数没有构造函数

箭头函数没有自己的this，它的this是继承来的，默认指向在定义它时所处的对象

7、数组面试题：

forEach（）、map（）、filter（）、reduce（）、some（）、every（）、all（）、

8、数组去重的方法：

 1、 es6的 let  s1=[......new set（数组）]      自动去重 -----项目常用

 2、indexOf（）-----indexOf（arr[i] == -1） =-1不存在相同，则push进新数组中

 3、双重for循环

9、promise构造函数

含义：异步编程的一种解决方案，用来解决回调地狱。

语法上 Promise 是一个构造函数，用来封装异步操作 并可以获取其成功或失败的结果；
三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） （Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。）

resolved函数作用：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）。
reject函数的作用：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。

缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部

回调地狱：回调函数调用回调函数就叫做回调地狱

10、Map 的属性和方法：

1. size 返回 Map 的元素个数；

2. set 增加一个新元素，返回当前 Map；

3. get 返回键名对象的键值；

4. has 检测 Map 中是否包含某个元素，返回 boolean 值；

5. clear 清空集合，返回 undefined；

11、Object.is（）与原来的比较操作符===，==的区别？

eS6 新增了一些 Object 对象的方法：

1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

区别：

==相等运算符，比较时会自动进行数据类型转换

===严格相等运算符，比较时不进行隐式类型转换 Object.is 同值相等算法，

在 === 基础上对 0 和 NaN 特别处理

AJAX： . 什么是AJax?为什么使用Ajax?

Ajax 是一种创建交互网页应用的网页开发技术，相当于在用户和服务器之间加了一个中间层(Ajax 引 擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像一些数据验证和数据 处理等都交给 Ajax 引擎自己来做，可以实现页面的局部刷新。

 简述ajax 的过程

• 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
• 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
• 设置响应 HTTP 请求状态变化的函数
• 发送 HTTP 请求
• 获取异步调用返回的数据
• 使用 JavaScript 和 DOM 实现局部刷新

1、get与post的区别

• 数据：GET一般是用来获取数据，POST提交数据。
• 数据类型：GET只允许ASCII字符,POST无限制。
• 数据大小：GET大小有限制（一般来说1024字节）,POST理论上来说没有大小限制。
• 安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• 历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

2、HTTP常见状态码

• 1XX：信息状态码
• 2XX：成功状态码
• 3XX：重定向
• 4XX：客户端错误
• 5XX：服务器错误
• 常 见状态码：
• 401 请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
• 403 禁止访问
• 404 请求失败

3、http与https

   https 和 http 的主要区别：

• 传输方式：http是明文传输，https则是具有安全性的ssl加密传输协议
• 连接方式：http是无状态的；https协议是由ssl+http协议构建的可进行加密传输，身份认证的网络协议，比http安全
• 默认端口不同：http 是 80 端口，https 是 443 端口。

4、如何解决跨域问题！！！￥￥￥

• 同源策略，是浏览器的一种安全策略。Ajax满足同源策略
• 同源: 协议、域名、端口号、必须完全相同。
• 违背同源策略就是跨域。
•   1）、JSONP跨域
•   jsonp就是利用