JavaScript 面试题

柔光的暖阳◎ 2022-12-28 15:25 117阅读 0赞

## 前端工程化、组件化、模块化的理解 ##

### 第 1 章：工程化 ###

1.  最早期写前端代码时，往往一个页面就是一个文件搞定，HTML/CSS/JS全部写在一起。
    
    后来知道应该把结构、样式和页面交互分离，我想这是我接触到最 早的前端工程化的思想了
2.  `前端工程化是一种高层次思想而不是某种技术`。
    
    所谓前端工程化就是将前端项目当成一项系统工程进行分析、组织和构建，从而达到项目结构清晰、分工明确、团队配合默契、提高开发效率。
    
    而模块化和组件化是为工程化思想下，相对较具体的开发方式，因此可以简单的认为模块化和组件化是工程化的表现形式
3.  概括前端工程化：`前端工程化就是用做工程的思维看待和开发自己的项目`

## 第 2 章：模块化 ##

### 2.1 什么是模块化 ###

那具体什么是模块化呢，还是举简单的例子：

1.  我们要写一个实现A功能的JS代码，这个功能在项目其他位置也需要用到，那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写，既能实现复用还可以分而治之
2.  同理在写样式的时候，如果我们需要某种特殊的样式，会在很多地方应用，那么我们也可以采用一定的方式进行CSS的模块化

### 2.2 模块化的优势 ###

1.  提高维护性，提高代码复用率
2.  方便依赖关系的管理
3.  可以避免变量污染，命名冲突

### 2.3 三种模块化规范 ###

1.  CommonJS
    
    根据 CommonJS 规范，一个单独的文件就是一个模块。
    
    每一个模块都是一个单独的作用域，也就是说，在该模块内部定义 的变量，无法被其他模块读取，除非定义为global对象的属性。
2.  AMD
    
    AMD 即 Asynchronous Module Definition，中文名是异步模块定义的意思。
    
    AMD规范通过 define 方法去定义模块，通过require方法去加载模块。`RequireJS 实现了这种规范`
3.  CMD
    
    CMD 即 Common Module Definition 通用模块定义，是 SeaJS 在推广过程中对模块定义的规范化产出

### 第 3 章：组件化 ###

#### 3.1 什么是前端组件化呢？ ####

*  页面上的每个独立的、可视/可交互区域视为一个组件
 *  每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护
 *  由于组件具有独立性，因此组件与组件之间可以 自由组合
 *  页面只不过是组件的容器，负责组合组件形成功能完整的界面
 *  当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、侧边栏、底部等视为独立组件，

不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。

#### 3.2 模块化和组件化一个最直接的好处 ####

1.  复用：提供代码的复用性，减少项目打包体积
2.  分治：我们能够在不影响其他代码的情况下，按需修改某一独立的模块或组件

## session和cookie的区别 ##

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>cookie</th> 
   <th>session</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>存储位置</td> 
   <td>客户端</td> 
   <td>服务器</td> 
  </tr> 
  <tr> 
   <td>保存的数据类型</td> 
   <td>字符串</td> 
   <td>对象</td> 
  </tr> 
  <tr> 
   <td>默认的有效路径</td> 
   <td>当前路径及其子路径</td> 
   <td>整站有效</td> 
  </tr> 
  <tr> 
   <td>安全性</td> 
   <td>不是很安全</td> 
   <td>相对安全</td> 
  </tr> 
  <tr> 
   <td>数据的传输量</td> 
   <td>有限制4k，不能超过20个</td> 
   <td>数据量无限制</td> 
  </tr> 
 </tbody> 
</table>

### 什么是session ###

由于HTTP是无状态的，所以服务器在每次连接中,持续保存客户端的私有数据，此时需要结合cookie技术，通过session会话机制，在服务器端保存每个HTTP请求的私有数据；
    
    session会在一定时间内保存在服务器上。当访问增多，会占用你服务器的性能。
    
    						**session 是通过 cookie来工作的**

### session原理 ###

在服务器内存中开辟一块地址空间，专门存放每个客户端私有的数据，每个客户端根据cookie中保存的私有sessionId，可以获取到独属于自己的session数据

### cookie小结 ###

cookie是一个文件，用来存储当前的一些信息和服务器保持交流

在前端介绍的 `sessionStorage 和 localStorage` 也是类似的功能

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>cookie</th> 
   <th>localStorage</th> 
   <th>sessionStorage</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>生命周期</td> 
   <td>一般由服务器生成，可设置失效时间，如果在浏览器生成cookie，默认关闭浏览器失效</td> 
   <td>除非被删除，否则永久保存</td> 
   <td>仅在当前会话下有效，关闭页面或者浏览器后被删除</td> 
  </tr> 
  <tr> 
   <td>数据大小</td> 
   <td>4k</td> 
   <td>20M</td> 
   <td>5M</td> 
  </tr> 
  <tr> 
   <td>与服务器端通信</td> 
   <td>携带在http请求头中，若保存cookie过多，数据会带来性能问题</td> 
   <td>仅在客户端即浏览器中保存，不参与和服务器的通信</td> 
   <td>仅在客户端即浏览器中保存，不参与和服务器的通信</td> 
  </tr> 
  <tr> 
   <td>易用性</td> 
   <td>需要程序员自己封装</td> 
   <td>原生接口可以接受，也可以再次封装来对obj和Arr有更好的支持</td> 
   <td>原生接口可以接受，也可以再次封装来对obj和Arr有更好的支持</td> 
  </tr> 
 </tbody> 
</table>

## 浏览器兼容问题 ##

1.不同浏览器的标签默认的外补丁和内补丁不同
    	解决：使用通配符*来设置各个标签的内外补丁为0
    
    2.块属性标签float后，又有横行的margin情况下，在IE6下比设置的值大（属于双倍浮动的bug）
    	解决：给float标签添加display: inline;将其转化为行内属性。
    
    3.设置较小高度标签（一般小于10px）,在IE6下不识别小于10px的高度
    	解决：给超出高度的标签设置overflow： hidden;
    	
    4.图片默认有间距
    问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用
    解决：给img标签添加左浮动float: left 和 display: block;
    
    5.行内属性标签，设置display： block后采用float布局，又有横行的margin的情况，IE6间距bug
    问题症状：IE6里的间距超过设置的间距
    解决：在display： block;后面加入display: inline;display: table;
    
    6.表单元素行高不一致
    解决方案：给表单元素添加float: left;或者 vertical-align: middle
    
    7.当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框
    解决方案：给img添加border: 0;或者 border: none;
    
    8.min-height(最小高度在IE6下不兼容)
    解决方案：
    {
        min-height:200px;
    
        height:auto!important;
    
        height:200px;
    
        overflow:visible;
    }
    
    9.上下margin的重叠问题
    margin-top和margin-bottom中选择一个，只设置其中一个值
    
    10.百分比的bug
    父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
    解决方案：给右边浮动的子元素添加clear: right;

#####  #####

## 前端性能优化方法 ##

1.  减少http请求，合理设置HTTP缓存
2.  使用浏览器缓存
3.  启用压缩
4.  CSS Sprites，合并CSS图片，使用精灵图，减少请求数
5.  CSS放在页面最上部，js放在页面最下面

<table> 
 <thead> 
  <tr> 
   <th>加载优化</th> 
   <th>1. 合理使用缓存<br>2. 使用按需加载、首屏加载、滚屏加载<br>3. 添加loading进度条<br>4. 减少cookie、避免重定向，异步加载第三方资源</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>图片优化</td> 
   <td>1. 使用（<code>CSS3、svg、iconfont</code>）代替图片</td> 
  </tr> 
  <tr> 
   <td>CSS优化</td> 
   <td>1. 避免图片和<code>iframe</code> 等的空src<br>2. 值为0值，不需要单位<br>3. 标准化各种浏览器前缀<br>4. 移除空的css规则<br>5. CSS写在头部，JavaScript写在尾部</td> 
  </tr> 
  <tr> 
   <td>脚本优化</td> 
   <td>1. 尽量使用事件代理，避免批量绑定事件<br>2. 减少重绘和回流<br>3. 使用<code>touchstart、touchend</code>代替click</td> 
  </tr> 
  <tr> 
   <td>渲染优化</td> 
   <td>1. 减少DOM节点，尽量使用 <code>CSS3动画、canvas动画</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### this的指向问题： ###

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
    2. 方法调用中谁调用，this指向谁
    3. 构造函数中this指向构造函数的实例
    4. apply调用，this指向apply方法的第一个参数

### js执行机制： ###

JS语言的一大特点就是单线程。也就是说，同一个时间只能做一件事。
    这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，产生页面渲染加载阻塞的感觉。
    
    这是因为JS是为处理页面中用户的交互，以及操作DOM而诞生的。(先添加元素-再删除元素)
    .............................................................
    JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
    同步任务指的是：
    	同步任务都在主线程上执行，形成一个执行栈。只有前一个任务执行完毕，才能执行后一个任务；
    异步任务指的是： 
    	不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，
    	才会从”任务队列”取出异步任务放入主线程执行。
    	
    	**JS的异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）**
    	
    一般而言，异步任务有以下三种类型：
    1.普通事件，如 click
    2.资源加载，如 load
    3.定时器，包括 setInterval、setTimeout 等
    
    ......................................................JS执行机制
    JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）
    1. 先执行执行栈中的同步任务
    2. 异步任务(回调函数)放入任务队列中
    3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，
       于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
       
    由于主线程不断的重复获取任务、执行任务、再获取任务，再执行任务，所以这种机制被称为事件循环(event loop)。

### DOM和BOM ###

DOM文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的、处理可扩展标记语言（html或者xhtml）的标准编程接口。
    W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式
    
    		** DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。**
    ------------------------------------------------------------------------------------
    BOM（浏览器对象模型），它提供了独立于内容面与浏览器窗口进行交互的对象，其核心对象是window
    BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
    BOM 缺乏标准：
    	JavaScript语法的标准化组织是ECMA,
    	DOM的标准化组织是W3C，
    	BOM最初是Netscape浏览器标准的一部分

#### 两者区别： ####

<table> 
 <thead> 
  <tr> 
   <th>DOM</th> 
   <th>BOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1. 文档对象模型，把文档当做一个对象来看待<br>2. 学习的是操作页面元素<br>3. W3C标准规范</td> 
   <td>1. 浏览器对象模型，把浏览器当做一个对象来看待<br>2. 顶级对象是window，学习的是浏览器窗口交互的一些对象<br>3. 浏览器厂商在各自浏览器上定义的，兼容性较差<br>4. BOM比DOM更大，包含DOM</td> 
  </tr> 
 </tbody> 
</table>

### 事件委托 ###

1.含义：
    	说白了就是，不给子元素注册事件，给父元素注册事件，处理代码放在父元素的事件中执行
    2.事件委托的原理
    	给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
    3.事件委托的作用
    	* 我们只操作了一次 DOM ，提高了程序的性能。
    	* 动态新创建的子元素，也拥有事件。

### 阻止默认行为和事件冒泡 ###

阻止默认行为：
    	e.preventDefault();     // 普通浏览器 dom 标准写法
    	e.returnValue = false; // 低版本浏览器 ie678 returnValue 属性
    	return false;  		  // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
    
    阻止事件冒泡：
    	e.stopPropagation()   		标准写法：利用事件对象里面的stopPropagation()方法
    	e.cancelBubble = true;		非标准写法：IE6-8 利用事件对象cancelBubble属性

### 操作DOM的函数 ###

1.	语法：document.getElementById(id)
    	作用：根据ID获取元素对象
    	参数：id值，区分大小写的字符串
    	返回值：元素对象 或 null
    	
    2. 	语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
    	作用：根据标签名获取元素对象
    	参数：标签名
    	返回值：元素对象集合（伪数组，数组元素是元素对象）
    ** 注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。**
    
    ------------------------H5新增获取元素方法------------------------------
    document.getElementsByClassName('类名')
    document.querySelector('选择器')
    document.querySelectorAll('选择器')
    
    注意事项：querySelector 和 querySelectorAll 里面的选择器需要加符号
    例如：document.querySelector('#nav')

### innerText和innerHTML的区别 ###

<table> 
 <thead> 
  <tr> 
   <th>-</th> 
   <th>获取内容</th> 
   <th>设置内容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>innerText</td> 
   <td>去除空格和换行</td> 
   <td>不识别html标签</td> 
  </tr> 
  <tr> 
   <td>innerHTML</td> 
   <td>保留空格和换行</td> 
   <td>识别html标签</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### rem 和 px 和 em ###

rem (root em)是一个相对单位，类似于em，
    em的基准是相对于父元素的字体大小。
    不同的是rem的基准是相对于html元素的字体大小。
    比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
    
    rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
    ........................................................px、em、rem？
    1.px 像素（ Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位。
    2.em 是相对长度单位，它会继承父级元素的字体大小，因此并不是一个固定的值。
    3.rem 是 CSS3 新增的一个相对单位（ root em，根 em），使用 rem 为元素设定字体大小时，
      仍然是相对大小，但相对的只是 HTML 根元素
    ...............................................
    区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，
    rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，
    通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合
    的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem
    ............................................................rem适配方案
    1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
    2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，
      当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
      
    技术方案：
        1.less+rem+媒体查询
        2.flexible.js+rem
    
    总结：
        ① 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
        ② 屏幕宽度/划分的份数就是 htmlfont-size 的大小
        ③ 或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
        
    设计稿是750px（划分为15份），html字体大小这里就是750/15=50px
    一个100100像素的页面元素、在750屏幕下， 就是 100/50=2rem 
    
    320屏幕下， html字体大小为320/15=21.33px
    
    ....................................................
    /*CSS3盒子模型*/  box-sizing: border-box;  不会撑大盒子

### Ajax ###

> 使用ajax发送数据的步骤

第1步：创建异步对象
    	var xhr = new XMLHttpRequest();
    第2步：设置 请求行open(请求方式，请求url):
    	// get请求如果有参数就需要在url后拼接参数，
    	// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
    		xhr.open("post","validate.php");
    第3步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
    	// 1.get不需要设置
    	// 2.post需要设置请求头：Content-Type:application/x-www-formurlencoded
    	xhr.setRequestHeader("Content-Type","application/x-www-formurlencoded");
    第4步：设置请求体 send()
    	// 1.get的参数在url拼接了，所以不需要在这个函数中设置
    	// 2.post的参数在这个函数中设置(如果有参数)
    	xhr.send(null) xhr.send("username="+name);
    第5步：让异步对象接收服务器的响应数据
    	// 成功的响应有两个条件：1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
    	xhr.onreadystatechange = function(){ 
    	if(xhr.status == 200 &&xhr.readyState == 4){ 
    		console.log(xhr.responseText);
    	}

jquery中的ajax调用

$.ajax({ 
        type: 'post',
        url: '',
        data: { },
        timeout: 3000,
        dataType: 'json',
        beforeSend: function() { 
         // 在这个回调函数中，如果return false，那么本次请求会终止 
        },
        success: function() { 
            // 请求成功之后的回调
        },
        error: function(e) { 
            if(e.statusTest == 'timeout'){ 
                alert('请求超时，请重试')
            }
        },
        complete: function() { 
            console.log('实现一些全局成员的释放，或者页面状态的重置...')
        }
    })

### get请求和post请求的区别 ###

1.  GET没有请求主体，使用 `xhr.send(null)`
    
    通过在请求URL上添加请求参数，速度快，对于安全性要求不高的请求来说
2.  POST可以通过 `xhr.send('name=itcast&age=10')`
    
    需要设置 `Content-type:application/x-www-form-urlencoded`

<table> 
 <thead> 
  <tr> 
   <th>-</th> 
   <th>get</th> 
   <th>post</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>缓存</td> 
   <td>能被缓存，参数保留在浏览器历史中</td> 
   <td>请求不会被缓存，参数也不会保留在浏览器历史记录中</td> 
  </tr> 
  <tr> 
   <td>安全性</td> 
   <td>GET的安全性较差，因为所发送的数据是 URL 的一部分,在发送密码或其他敏感信息时绝不要使用 GET</td> 
   <td>1. POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中<br>2. post方式安全性较高，不过也有可能被抓包，所以后期需要其他的加密形式</td> 
  </tr> 
  <tr> 
   <td>传递的数据量</td> 
   <td>传递的数据很小，4KB左右(不同的浏览器有略微差异)</td> 
   <td>传递数据量大，请求数据没有长度的要求，上限默认为8M，可以在配置文件中修改</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### jsonp的实现原理： ###

1.主要是利用了script标签的天然跨域特性来发送请求
    实现原理：
    1.在发送请求的时候传递一个函数名称给后台
    2.后台接收传递的函数名，读取服务器中的数据。
      后台返回数据的时候会返回这个函数调用的形式。
      同时将服务器数据以该函数参数的形式传递。
    ..............................................................ajax是什么？
    
    AJAX 不是一门的新的语言，而是对现有技术的综合利用
    本质:是在HTTP协议的基础上,以异步的方式 通过XMLHttpRequest对象与服务器进行通信。
    作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；
    .................................................................异步和同步？
    
    同步指在网页的一次请求中，如果不完成这次请求，就不会响应其他的任何操作，效率比较慢；
    异步就是在发起请求之后，不用理会这个过程，等请求结束了，自动返回数据
    其优势在于不阻塞程序的执行，从而提升整体执行效率。
    
    XMLHttpRequest可以以异步方式的处理程序。
    ...........................................................XMLHttpRequest的概念？
    
    浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面
      
    .............................................jsonp 为什么不是 ajax
    
    ajax 和 jsonp 这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，
    然后把服务器返回的数据进行处理。但是ajax和jsonp的本质不一样：
    	* ajax的核心是通过XMLHttpRequest来发送请求，
    	* jsonp是通过script标签来实现请求的发送
    	
    ........................................
    同源和跨域：
    	* 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同
    	* 跨域：协议、域名、端口只要任何一个不一样就是跨域
    		* 1.不允许DOM操作
    		* 2.不允许ajax请求（因为浏览器的同源策略，ajax的异步对象默认是无法发送跨域请求的）
    .....................................
    如何解决跨域问题？
    法1：在服务器设置响应头header允许跨域：（因为服务器从自身安全角度出发，一般不允许跨域请求）
        header("Access-Control-Allow-Origin:*");//*允许所有的域向当前域发送请求
        header("Access-Control-Allow-Origin:http://www.day9.com"); // 指定允许的域，进行跨域请求
    法2： 使用jsonp，jsonp只能发get请求（常用方法进行跨域请求）
    ..........................................
    注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
    之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、口号都完全一致

### 什么是闭包 ###

闭包就是能够读取其他函数内部变量的函数，
    	由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，
    	因此可以把闭包简单理解成 “定义在一个函数内部的函数”。
    	所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
    
    闭包的用途：保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量 
    
        * 可以在函数外部读取函数内部成员
        * 让函数内成员始终存活在内存中

### 什么是原型链？ ###

Javascript 是面向对象的，每个实例对象都有一个proto属性，该属性指向它原型对象，
    这个实例对象的构造函数有一个原型属性 prototype，与实例的proto__属性 指向同一个对象。
    
    当一个对象在查找一个属性时，自身没有就会根据proto 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype.proto_为 null，这样也就形成了原型链

### 常见的http状态码 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">状态码</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">200</td> 
   <td>客户端请求成功</td> 
  </tr> 
  <tr> 
   <td align="left">400</td> 
   <td>客户端请求有语法错误，不能被服务器所理解</td> 
  </tr> 
  <tr> 
   <td align="left">403</td> 
   <td>服务器收到请求，但是拒绝提供服务</td> 
  </tr> 
  <tr> 
   <td align="left">404</td> 
   <td>请求资源不存在，例如：输入了错误的URL</td> 
  </tr> 
  <tr> 
   <td align="left">500</td> 
   <td>服务器发生不可预期的错误</td> 
  </tr> 
  <tr> 
   <td align="left">503</td> 
   <td>服务器当前不能处理客户端的请求，一段时间后可能恢复正常</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 数组字符串有哪些操作？ ###

数组中可以通过以下方式在数组的末尾插入新元素： `数组[ 数组.length ] = 新数据;`

#### 添加删除数组元素的方法 ####

数组中有进行增加、删除元素的方法，部分方法如下表：

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>push(参数1…)</td> 
   <td>1. 末尾添加一个或多个元素，<code>修改原数组</code></td> 
   <td>返回新的长度</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>1. 删除数组最后一个元素，把数组的长度减1<br>2. <code>无参数，修改原数组</code></td> 
   <td>返回它删除的元素的值</td> 
  </tr> 
  <tr> 
   <td>unshift(参数1…)</td> 
   <td>向数组的开头添加一个或更多元素，<code>修改原数组</code></td> 
   <td>返回新的长度</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>1. 删除数组的第一个元素，数组长度减1<br>2. <code>无参数，修改原数组</code></td> 
   <td>返回第一个元素的值</td> 
  </tr> 
 </tbody> 
</table>

注意事项：

*  增加元素方法：push() 或者 unshift()
 *  删除元素的方法：pop() 或者 shift()

#### 数组转换为字符串 ####

数组中有把数组转换为字符串的方法，部分方法如下表：

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toString()</td> 
   <td>把数组转换为字符串，逗号分隔每一项</td> 
   <td>返回一个字符串</td> 
  </tr> 
  <tr> 
   <td>join(‘分隔符’)</td> 
   <td>方法用于把数组中的所有元素转换为一个字符串</td> 
   <td>返回一个字符串</td> 
  </tr> 
 </tbody> 
</table>

注意：join方法如果不传入参数，则按照 “，” 拼接元素

#### 其他方法 ####

数组中还有其他操作方法，自行查阅文档

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或者多个数组，<code>不影响原数组</code></td> 
   <td>返回一个新的数组</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>数组截取slice(begin,end)</td> 
   <td>返回被截取项目的新数组</td> 
  </tr> 
  <tr> 
   <td>splice</td> 
   <td>数组删除splice(第几个开始，要删除个数)</td> 
   <td>返回被删除项目的新数组，<code>影响原数组</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 数组排序 ####

数组中有对数组本身排序的方法，部分方法如下表：

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>是否修改原数组</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>reverse()</td> 
   <td>颠倒数组中元素的顺序，<code>无参数</code></td> 
   <td>修改原数组，返回新数组</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>对数组的元素进行排序</td> 
   <td>修改原数组，返回新数组</td> 
  </tr> 
 </tbody> 
</table>

注意事项：sort方法需要传入参数来设置升序、降序排序

*  如果传入`function(a,b){ return a-b }`，升序
 *  如果传入`function(a,b){ return b-a }`，降序

#### 字符串操作方法 ####

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat(str1,str2,str3,…)</td> 
   <td>concat() 方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用</td> 
  </tr> 
  <tr> 
   <td>substr(start,length)</td> 
   <td>从start位置开始(索引号)，length取的个数</td> 
  </tr> 
  <tr> 
   <td>slice(start,end)</td> 
   <td>从start位置开始，截取到end位置，end取不到（它们都是索引号）</td> 
  </tr> 
  <tr> 
   <td>substring(start,end)</td> 
   <td>1. 从start位置开始，截取到end位置，end取不到 <br>2. 基本和slice相同，但是不接受负值</td> 
  </tr> 
 </tbody> 
</table>

replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

`字符串.replace(被替换的字符串，要替换为的字符串)`

#### split()方法 ####

split()方法用于切分字符串，它可以将字符串切分为数组，在切分完毕之后，返回的是一个新数组

格式：`字符串.split('字符串')`

<table> 
 <thead> 
  <tr> 
   <th>前端操作json的方式</th> 
   <th>php操作json的方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JSON.parse(json字符串)；<br>将json格式的字符串转换为数组或者对象</td> 
   <td>json_decode(json字符串)；<br>将json格式的字符串转换为php的数组或者对象</td> 
  </tr> 
  <tr> 
   <td>JSON.stringify(对象或者数组)；<br>将字面量对象或者数组转换为json格式的字符串</td> 
   <td>json_encode(关联数组)；<br>将php的数组转换为json字符串</td> 
  </tr> 
 </tbody> 
</table>

### 如何阻止事件冒泡和默认事件 ###

阻止冒泡：
    	e.stopPropagation();
    	window.event.cancelBubble=true;
    阻止默认事件：
    	e.preventDefault();
    	....................................
    	window.event.returnValue = false;
        return false;

### 事件冒泡和事件捕获 ###

事件冒泡：子元素事件的触发会影响父元素事件；
    开关事件冒泡：
    	A，开启事件冒泡： element.addEventListener(eventName， handler，false)；
    	B，关闭事件冒泡：假设传统方式事件的返回值为 e，就可以通过 e.stopPropagation()来关闭事件冒泡；
    事件捕获：父元素的事件会影响子元素的事件；
    开启事件捕获： element.addEventListener(eventName， handler， true)

### 前端自动化构建工具 webpack ###

webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。
    	1.文件依赖关系错综复杂    2.静态资源请求效率低
    	3.模块化支持不友好       4.浏览器对高级 Javascript 特性兼容程度较低
    webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
    .........................................................怎么使用？
    1.运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包
    2.在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
    3.在 webpack 的配置文件中，初始化如下基本配置：
    module.exports = {
    // 编译模式
    // development表示开发模式，此模式下main.js文件没有压缩！
    // production 表示上线模式，此模式下main.js文件被压缩了！
      mode: 'development' // mode 用来指定构建模式
    }
    4.在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
    "scripts": {
    "dev": "webpack" 
    }
    5.在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

### es6的新特性 ###

1.  Promise
    
     *  Promise 是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，
        
        避免了层层嵌套的回调函数
     *  promise 提供了简洁的API 使得异步操作更加容易
    
    **Promise基本使用**：
    
     *  我们使用new来构建一个Promise对象 Promise的构造函数接收一个参数，是函数、并且传入两个参数：resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
     *  Promise实例生成以后，可以用then方法指定resolve状态和reject状态的回调函数、接收数据
    
        Promise基本使用:
                1.实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
                2.resolve和reject两个参数用于处理成功和失败两种情况。并通过p.then获取处理结果！
                var p = new Promise(function(resolve,reject){
                    // 成功时调用resolve()
                    // 失败时调用reject()
                });
                p.then(function(ret){
                    // 从resolve得到正常结果
                },function(){
                    // 从reject得到错误信息
                })
2.  箭头函数：它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值
3.  类的支持引入了class关键字。
    
    \*\*个人理解：\*\*JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
4.  字符串模板
    
    ES6中允许使用反引号来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量$\{\}
5.  结构赋值
    
    自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。
6.  let和const关键字
    
     *  let 表示变量、 const 表示常量
     *  let 和 const 都是块级作用域。以\{\}代码块作为作用域范围
     *  不存在变量提升，只能先声明再使用，否则会报错
     *  在同一个代码块内，不允许重复声明
     *  const 声明的是一个只读常量，在声明时就需要赋值
7.  import 和 export
    
    ES6 标准中， JavaScript 原生支持模块(module)了。这种将 JS 代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。
    
     *  export 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。
     *  import 用于在一个模块中加载另一个含有 export 接口的模块。
     *  import 和 export 命令只能在模块的顶部，不能在代码块之中
8.  使用 babel 进行的一个语法转换

#####  #####

### 项目中的跨域是如何解决的 ###

*  通过jsonp跨域（不支持post请求）
    
    跨域资源共享（CORS）
    
    反向代理 （后端设置）
    
    使用HTML5中新引进的`window.postMessage`方法来跨域传送数据
    
    使用`window.name`来进行跨域
 *  设置cros 跨域的时候 cookie 是无法随着请求头一起携带过去的
    
    设置 一个请求头 (`withCredentials`为true ) 就可以解决这个问题

### 谈谈 jquery/Bootstrap/zepto ###

JavaScript库:就是一个JS 文件，里面对我们原生js代码进行了封装，封装了很多预先定义好的函数和方法在里面
    比如动画animate、hide、show，比如获取元素等
    这样我们可以快速高效的使用这些封装好的功能了。
    ........................................jquery的概念
    1.jQuery 是一个快速、简洁的 JavaScript 库，
      其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
    2.jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
      学习jQuery本质： 就是学习调用这些函数（方法）。
    3.jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率
    .........................................................................
    jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择择。jQuery 能够使用户的 html 页面保持代码和html 内容分离，
    也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id即可。
    ..........................................jquery的优点：
    1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
    2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
    3. 对事件、样式、动画支持，大大简化了DOM操作。
    4. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
    5. 免费、开源。
    
    MVVM 和 jquery 的区别：
    ⚫ vue 数据驱动，通过数据来显示视图层而不是节点操作。
    ⚫ jQuery 是一个快速、简洁的 JavaScript 框架 , jQuery 是基于事件驱动
    
    。。。。。。。。。。。。。。。。。。Bootstrap
    Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。