面试题

1. <font color=red>语义化的理解？</font>

1. 用正确的标签做正确的事情；

2. 当页面加载失败的时候，还能够呈现出清晰的结构；

3. 有利于SEO优化，利于搜索引擎的收录（即便于网络爬虫的识别）；

4. 在项目开发及维护时，语义化也很大程度上降低了开发难度，节省成本。

2. <font color=red>垂直水平居中的方法有几种？</font>

1. 绝对定位：

   top:0，left:0，rhuanight:0，bottom:0，margin:auto

2. 绝对定位 + 位移：

   left:50%，top:50%，transform：translate（-50%，-50%）

3. 弹性盒布局：

   display：flex，justify-content：center，align-item：center

3. <font color=red>Javascript如何实现继承？</font>

1. 原型链继承：子类的原型指向父类的实例；
2. 构造继承：call、apply 继承；
3. 组合继承：原型链和构造的结合；
4. 拷贝继承；
5. 寄生组合继承；
6. ES6继承。

4. <font color=red>Cookie的弊端？</font>

1. 只能使用文本进行存储；
2. 单条的存储大小有限制，不超过4kb；
3. 存储数量有限制，一般在50条左右；
4. 读取时有域名限制，不可跨域的确，只能由写cookie的同一域名的网页读取；
5. 时效有限制，最短时效为一个会话期。

5. <font color=red>如何解决跨域问题?</font>

1. 前端JSONP处理：在src属性中引入接口地址，利用script在引入外部js文件不受同源策略限制的特性，来实现跨域。（src的开放性原则）

   接口地址中引入的js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义全局回调函数，在回调函数中处理服务器返回的数据。JSONP只能实现GET请求的跨域，但其兼容性好，不需要使用类似 XMLHttpRequest 的对象。

2. 后端cors处理：原理是使用自定义的 HTTP 头部，让服务器与浏览器进行沟通（两者同时支持），主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的。CORS对GET、POST请求的跨域都能够处理，而且对客户端来说可以像使用自己域下资源一样使用ajax来跨域访问数据，非常方便。

3. proxy 服务器代理：proxy 代理跨域，从本服务器出发，以node为中间层，在中间层把当前源切换为目标源，完成跨域，再请求另一个服务器。

4. 扩展内容：document.domain window.name window.postMessage

6. <font color=red>原生 JS 中 call()、apply()、bind() 方法有什么区别？</font>

1. 三个方法都可以改变函数运行时的 this 指向；
2. 三个方法的第一个参数都是函数调用执行时 this 指向的对象；
3. call() 方法第二个参数是可变参数，是函数调用执行时本身所需要的参数；
4. apply() 方法第二个参数是一个数组或arguments；
5. call() 和 apply() 方法都是立即调用函数执行，在运行时修改 this 的指向；
6. bind() 方法在函数封装定义时，直接修改了 this 的指向，它不会影响原函数本身的 this 指向。

7. <font color=red>什么是闭包？特点是？三要素？注意点？</font>

1. 闭包：变量既能重复使用，又不会污染全局；

2. 特点：（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态；

    （2） 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
   

3. 三要素：（1）外层函数嵌套内层函数；

    （2）内层函数使用外层函数的局部变量；
   
    （3）把内层函数作为外层函数的返回值。
   

4. 注意点：（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

    （2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
   

8. <font color=red>性能优化的方法？</font>

1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器；
2. 前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数；
3. 减少DOM操作次数，优化javascript性能；
4. 当需要设置的样式很多时使用外部样式而不是直接操作内联样式；
5. 少用全局变量、缓存DOM节点查找的结果，减少IO读取操作；
6. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳……。

9. <font color=red>什么叫优雅降级和渐进增强？</font>

1. 优雅降级：一开始就构建完整的功能，然后载针对低版本浏览器进行兼容；

2. 渐进增强：针对低版本浏览器保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能，以达到更好的用户体验；

3. 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，

   而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

   降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

10. <font color=red>清除浮动的几种方法？</font>

1. 给父元素设置overflow：hidden；
2. 使用空盒子（元素）方法：在需要清除浮动的元素同级下家一个空元素（这个元素不能有其他任何样式），给这个元素设置clear：both样式；
3. 万能清除法：给父元素设置样式 clear：after {content：“.”；display：block；clear：both；visibitily：hidden；height：0；}

11.<font color=red>阐释css sprites的使用方法和作用？</font>

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，提高了用户的加载速度和用户体验，不需要加载更多的图片，减轻了服务器的压力。

12.<font color=red>如何用原生js给一个按钮绑定两个onclick事件？</font>

使用事件监听 addEventListener

13.<font color=red>列举jquery中的选择器？</font>

基本 #id element .class * selectorN

层级 ancestor descendant parent > child prev + next prev ~ siblings

基本 :first :not(selector) :even :odd :eq(index) :gt(index) :lang :last :lt(index) :header :animated :focus :root:target

内容 :contains(text) :empty :has(selector) :parent

可见性 :hidden :visible

属性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1]

子元素 :first-child :last-child :nth-child :nth-last-child() :only-child

表单 :input :text :password :radio :checkbox) :submit :image :reset :button :file :hidden

表单对象属性 :enabled :disabled :checked :selected

14.<font color=red>Javascript中的定时器有哪些？他们的区别及用法是什么？</font>

setTimeout：超时定时器

setInterval：间隔定时器

requestAnimationFrame：循环定时器（作为了解）

区别：超时定时器是过一段时间执行，只会执行一次；间隔定时器是间隔一段时间就会执行一次。

用法：两者的用法基本一致，如： setInterval（function （）{console.log(1)；}，1000）,表示每隔一秒打印一个1。

15.<font color=red>请描述一下 cookies、sessionStorage和localstorage区别？</font>

相同点：都存储在客户端

不同点：

1. 存储大小不同

   · cookie数据大小不能超过4k。

   · sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2. 时效性不同

   · localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

   · sessionStorage 数据在当前浏览器窗口关闭后自动删除。

   · cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

   · cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

   · sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

16.<font color=red>document.write和innerHTML的区别？</font>

1. document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

2. innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

3. innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。

4. innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

17.<font color=red>拖拽会用到哪些事件？</font>

鼠标按下事件：onmousedown

鼠标移动事件：onmousemove(鼠标在目标中移动时反复执行)

鼠标抬起事件：onmouseup

18.<font color=red>创建ajax的步骤？</font>

1. 创建ajax核心对象xmlhttprequest，用来和服务器交换数据；

   var xmlhttp =new XMLHttpRequest（);

2. 使用xmlhttprequest对象的open（）方法进行连接和send（）方法发送资源请求给服务器；

3. 使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应；

4. 使用onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。（简单说就是状态发生改变时发送数据回客户端）

19.<font color=red>xml和json的区别，请用四个词语来形容？</font>

1. JSON相对于XML来讲，数据的体积小，传递的速度更快些；

2. JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互；

3. XML对数据描述性比较好；

4. JSON的速度要远远快于XML。

20.<font color=red>box-sizing常用的属性有哪些？分别有什么作用？</font>

1. box-sizing：content-box（标准盒模型）：在宽度和高度之外绘制元素的内边距和边框；

2. box-sizing：border-box（怪异盒模型）：带有指定宽度和高度的框，并把边框和内边距放入框中；

3. box-sizing：inherit（）：规定应从父元素继承 box-sizing 属性的值。

21.<font color=red>H5语义化的重要性？</font>

1. 当页面加载失败时，还能够呈现出清晰的结构；
2. 有利于SEO优化，利于搜索引擎收录（即便于爬虫的识别）；
3. 在项目开发及维护时，语义化也很大程度上降低了开发难度，节省成本。

22.<font color=red>怎么给状态栏添加图标？</font>

使用link标签引入：

<link rel="shortcut" href="图标地址">

23.<font color=red>三角形写法？</font>

div{
    width: 0;
    height: 0;
    border-top:10px solid red;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
    border-bottom:10px solid #fff;
}

24.<font color=red>css选择器有哪些，选择器的权重的优先级？</font>

选择器：

1. ID选择器

2. class选择器

3. 通配符选择器（*）

4. 包含选择器（后代选择器） div p{}

5. 群组选择器 p,h1,span{}

6. 伪类选择器　　：hover

7. 伪元素　　::first-line

8. 子选择器、相邻选择器

9. 属性　　[type="text"]

权重优先级：

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类、伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

25.<font color=red>以下代码输出结果为多少？</font>

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> ?
console.log(p2) // -> ?

// console.log(p1)值为：
{
    name: 'yck';
    age: 26
}
// console.log(p2)值为：
{
    name: 'yyy';
    age: 30
}

26. <font color=red>循环中解决 var 定义函数的问题？</font>

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i) // 因为setTimeout是一个异步函数，这里只会等循环结束后每隔一秒输出6（共5个）
  }, i * 1000)
}

解决方法：

1. 使用闭包的方式

for (var i = 1; i <= 5; i++) {
    function (j) {
        setTimeout(function timer() {
            console.log(j)
         }, j * 1000)
    }(i)
}

2. 使用 setTimeout 的第三个参数，这个参数会被当成 timer 函数的参数传入

   for (var i = 1; i <= 5; i++) {
     setTimeout(function timer(j) {
       console.log(j)
     }, i * 1000, i)
   }
   

3. 使用 let 定义 i（推荐）

   for (let i = 1; i <= 5; i++) {
     setTimeout(function timer() {
       console.log(i)
     }, i * 1000)
   }
   

27. <font color=red>什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？</font>

为防止复制了引用地址，从而会导致改变了一方其他也都被改变的情况。

1. 浅拷贝：只会拷贝原所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址。

   实现方法：object.assign 扩展运算符...

2. 深拷贝：浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，两者享有相同的地址。使用深拷贝解决

   实现方法： JSON.parse（JSON.stringify（object））

   局限：会忽略undefined 会忽略 symbol 不能序列化函数 不能解决循环引用的对象

28. <font color=red>如何理解原型？如何理解原型链？</font>

原型：

1. 原型是函数的伴生体，属性为 prototype；
2. 原型属性是一个指针，指向的对象就是原型对象(__ proto __）；
3. 原型是实例共享方法和属性的地方；
4. js 中原型也是对象，可以通过原型实现对象属性的继承；
5. 并不是所有的函数都有 prototype 属性。

原型链：

1. 函数实例的__ proto __指向构造函数的 prototype；
2. 构造函数的原型对象是一个普通的 object，所以它的__ proto __指向object.prototype；
3. object 是顶级的对象，它的__ proto __是自己设置（set）和调用（get）。

29. <font color=red>引入css样式的方式？它们的区别？</font>

1. 使用<link>标签引入

   <link rel="stylesheet" type="text/css" href="文件路径"
   

2. 使用 import 引入

   <style type="text/css">
    @import url(文件路径)
   </style>
   

3. 区别

   a. link 属于html标签，@import完全属于css

   b . linlk 能让结构和样式一起加载，@import 先加载结构，后加载样式

   c. @import 有兼容问题，link 没有

   d. 使用dom控制样式时，link 可用js控制，@import不行

30. <font color=red>HTML元素的分类？</font>

1. 块级元素：独占一行，自上而下排列，可以设置宽高

   如： div p h1~h6 ul li from 等

2. 行内元素：横向排列，不能设置宽高

   如： em span i b a strong等

3. 行内块（内联）元素：横向排列，可以设置宽高

   如： input select img 等

31. <font color=red>什么是盒模型？</font>

无论什么类型的元素，都有一个盒模型，它是css布局的一个基石。

组成：border（边框）  margin（边界、外边距）  padding（内边距、填充、补白） content（宽、高）

将标准盒模型（content-box）转为怪异盒模型：  box-sizing：border-box

32. <font color=red>手写省略号？</font>

div {
    width: 200px;
    /* height: 100px; */
    border: 1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

33. <font color=red>透明的两种写法？</font>

1. 标准写法： opacity：数值； 取值范围0~1
2. IE写法： filter： alpha （opacity=value); value取值为1~100

34. <font color=red>网络请求的流程？</font>

1. 发送报文：当输入一个网址回车时，向服务器发送了一次请求；
2. 当请求发送后，服务器接收请求，并做出响应处理；
3. 服务器返回处理的结果给客户端----html，css，js，其他资源（图片、视频等）

35. <font color=red>让元素隐藏的方法和文字隐藏的方法？</font>

1. 元素隐藏的方法：

   display： none （不占空间） visibility： hidden （占空间） opacity： 0 overflow： hidden

2. 文字隐藏的方法：

   letter-spacing：-1px； text-indent： -2em；

36. <font color=red>五大浏览器内核？</font>

内核：又名渲染引擎，浏览器里量作用的部分，负责解析网页的语法（html、css、js），然后显示出来。

Trident（MSHTML，三叉戟）、Gecko（壁虎）、Presto（迅速的）、webkit（Safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）、 （由Google和Opera Software开发的浏览器排版引擎）

37. <font color=red>写出5种常见的css bug 和 css hack？</font>

1. 图片间隙：div种图片间隙，会默认将div撑大3像素，可以将img转为块级元素；图片横向排列时有间隙，可以 使用浮动 float：left；
2. 双倍浮向（边距）：IE6，使用 display：inline；
3. 图片在IE浏览器上有蓝色边框：设置 img{border：0}；
4. 默认高度：在IE6 及以下中部分块级元素默认默认有低于18px的高度，可以设置 fong-size：0 或 overflow：hidden；
5. 表单元素距离顶部的间距不一致：设置 float：left；
6. 按钮元素大小不一：设置统一大小；
7. 百分比 bug ：在IE6 及以下中会出现50% + 50% > 100% 的情况，给右边的浮动元素添加 clear：right；
8. 指针 bug：在IE中指针为手型，设置 cursor：pointer；
9. 高度塌陷：设置overflow：hidden 或 让子元素浮动；
10. <input>中的type属性值为text时，在IE6中文本内容在顶部：给input加一个行高等于高度；

38. <font color=red>手写点击任意li弹出相应下标的几种方法？</font>

var lis = documeng.querySelectorAll('li')

// 使用forEach循环遍历
lis.forEach ((li,index) => {
    li.onclick = () => {
        alert(index)
    }
})
/*lis.forEach ((li,index) => {
    lis[index].onclick = () => {
        alert(index)
    }
})*/

// 给对象新增自定义属性
//循环遍历中绑定的事件只是封装，并没有触发，等触发时循环遍历已经结束；这时的i值为lis.length
for(var i = 0; i < lis.length; i++) {
    lis[i].index = i //新增属性赋值于当前下标
    lis[i].onclick = function() {
        alert(this.index)
    }
}

// 使用let进行声明
for(let i = 1; i < lis.length; i++) {
    lis[i].onclick = function () {
        alert(i)
    }
}

// 自调用函数 (IIFE)
for(let i = 1; i < lis.length; i++) {
    (function(index) {
        lis[index].onclick = function () {
            alert(index)
        }
    })(i)
}

// 使用闭包 closure
for(let i = 1; i < lis.length; i++) {
    lis[i].onclick = (function (index) {
        return function () {
            alert(index)
        }
    })(i)
}

39. <font color=red>表单method属性中get和post的区别？</font>

1. get：在url地址栏中能看到用户信息（请求头中）；传送数据量小不能大于2kb；安全性低，但执行效率比post高
2. post：在url地址栏中不能看到用户信息（请求体中）；传送数据量较大；安全性 高

40. <font color=red>css3 中新增的css特性有哪些？</font>

css3选择器、图片的视觉效果（圆角、阴影、渐变背景、图片边框等）、背景的应用（background-size）、盒模型的变化、阴影效果（盒子阴影、文本阴影）、多列布局和弹性盒布局、web文字和font图标、颜色和透明度、圆角和边框的新特性、2D和3D变形、css3过渡和动画效果、媒体查询和Responselve布局 。

41. <font color=red>什么是私有前缀？作用？列举几个？</font>

当一个属性没有成为 w3c 标准时，浏览器为了支持这个属性而推出了浏览器私有前缀。

作用：更好的让属性在自己的浏览器中显示。

谷歌 -webkit- 火狐 -moz- IE -ms- 欧朋 -o-

42. <font color=red>定位有几种方式？</font>

1. relative：相对定位
2. absolute： 绝对定位
3. fixed：固定定位
4. sticky：粘性定位
5. static：静态定位

43. <font color=red>html 和 xhtml 的区别？</font>

1. xhtml 元素必须被正确的嵌套；
2. xhtml 元素必须被关闭；
3. 标签名必须使用小写字母；
4. xhtml 文档必须拥有根元素。

44. <font color=red>动画效果的三要素？</font>

1. 动画名称：animation-name：play；

2. 动画时间：animation-duration：3s；

3. 动画执行体： @keyframes play {

            from  {  transform：rotate（0deg） translateX（0deg）}
   
            to  {  transform：rotate（360deg） translateX（3600deg）}
   
        }
   

45. <font color=red>数组的常见API？ES5新增的方法？</font>

concat（）：连接数组

join（）：改变连接符号，默认“，”

push（）：向数组末尾添加一个元素，并返回新数组

pop（）：删除数组最后一个元素，并返回新数组

shift（）：删除数组第一个元素，并返回新数组

unshift（）：向数组的开头添加一个元素，并返回新数组

reverse（）：颠倒数组中的元素的顺序

slice（）：从数组中返回选定的元素，返回新数组

sort（）：对数组的元素进行排序

splice（）：删除、添加数组新元素

tostring（）：将数组转为字符串

新增方法：

1. 2个索引方法： indexOf lastIndexOf
2. 5个迭代方法： forEach（）、map（）、filter（）、some（）、every（）
3. 2个归并方法： reduce（） reduceRight（）

46. <font color=red>手写两种数组排序的方法？</font>

// 冒泡排序
function bubble (arr) {
    for(var i = 0; i < arr.length-1; i++) {
        for(var j = 0; j < arr.length-1-i; j++) {
            if(arr[j] > arr[j + 1]) {
                var temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
    return arr
}
bubble([....])

// 选择排序
function choose (arr) {
    for(var i = 0; i < arr.length-1; i++) {
        var minIndex = i
        for(var j = i+1; j < arr.length; j++) {
            if(arr[minIndex] > arr[j]) {
                minIndex = j
            }            
        }
        var temp = arr[i]
        arr[i] = arr[minIndex]
        arr[minIndex] = temp
    }
    return arr
}
choose([....])

// 使用 sort 排序
var arr = [....]
var arr1 = arr.sort((a, b) => {
    return a - b                                                                                                                 
})

47. <font color=red>手写几种数组去重的方法？</font>

1. 双重for循环去重

   function fn (arr) {
       for(var i = 0; i < arr.length - 1; i++) {
           for(var j = i+1; j < arr.length; j++) {
               if(arr[i] === arr[j]) {
                   arr.splice(j--, 1)
               }
           }
       }
       return arr
   }
   fn([....])
   

2. 利用对象的属性名不能重复的特点（效率高）

   function distinct(arr) {
       var obj = {}
       for(var i = 0; i < arr.length; i++) {
           if (obj[arr[i]] === undefined) {
               obj[arr[i]] = 1
           } else {
               arr.splice(i--, 1)
           }
       }
       return arr
   }
   distinct([....])
   

3. 使用归并方法 reduce

   var arr1 = [....]
   var arr2 = arr1.reduce((prev, next) => {
       if (!prev.includes(next)) {
       // if (prev.indexOf(next) === -1) {
           prev.push(next)
       }
       return prev
   },[])
   

4. 使用ES6 新增方法 new Set

   var arr = [....]
   var arr1 = [...new Set(arr)]
   
   // 或者使用下面这种方法
   function distinct(arr) {
       return Array.from(new Set(arr))
   }
   var arr2 = distinct(arr)
   

48. <font color=red>字符串常见的API？</font>

charAT（）：返回指定位置的字符

indexOf（）：从左往右检索字符串，返回下标

lastIndexOf（）： 从右往左检索字符串，返回下标

charCodeAT（）：返回在指定位置字符的ASCII编码

fromCharCode（）：从字符编码ASCII创建一个字符串

concat（）：连接字符串

slice（）：提取字符串的片段

split（）：将字符串分割为字符串数组，默认用“，”分割

toLowerCase（）：将字符串转换为小写

toUpperCase（）：将字符串转换为大写

trim（）：去掉字符串前后空格；trimLeft、trimRight

startsWith（）：字符串是否以某个字符开头，返回Boolean

endsWith（）：字符串是否以某个字符结尾，返回Boolean

includes（）：字符串是否包含某个字符，返回Boolean

repeat（）：重复字符串几次

JSON.stringify（）：将json格式转为字符串

JSON.parse（）：将符合json格式的字符串转为json

49. <font color=red>js内置对象有哪些？</font>

1. Object对象：所有js对象的超类（基类）；
2. Array对象：数组对象，定义数组属性和方法；
3. Boolean对象：布尔对象，与布尔值相关；
4. Date对象：日期对象，与日期时间相关；
5. Erroy对象：错误对象，处理程序错误；
6. Function对象：函数对象，定义函数属性和方法；
7. Math对象：数学对象，各种数学运算工具（不是构造函数）；
8. Number对象：数字对象，定义数字属性和方法；
9. KegExp对象：正则表达式对象，定义文本匹配和筛选规则；
10. String对象：字符串对象，定义字符串属性和方法。

50. <font color=red>事件流包含哪几个阶段？</font>

1. 捕获阶段：从父元素到子元素寻找的过程；
2. 目标阶段：寻找到需要触发事件的目标；
3. 冒泡阶段：从子元素开始触发事件，直到父元素触发完毕。

51. <font color=red>对象的三大特点？</font>

1. 封装：写对象、用对象，把一些相关的对象和属性放到一起，用一个变量抽象出来，那么就完成了这个对象的封装；
2. 继承：子承父业，子对象可以使用父对象的一些属性和方法；
3. 多态：重载，根据不同的参数类型、参数个数实现不同的功能；重写，父类的方法不好用，其本身重新定义一个方法名相同的不同的方法；

52. <font color=red>解释this的指向？</font>

1. 全局的this指向window；
2. 构造函数里的this指即将new的那个对象；
3. 对象方法的this指向对象（谁调用this就指向谁）；
4. 自调用函数（IIFE，立即执行函数）中的this指向window；
5. 事件里的this指事件触发对象；
6. 箭头函数没有自己的this（指向箭头函数的父级）；
7. 定时器里的this指向window；
8. 对于佚名函数来说，this均指window。

53. <font color=red>常见状态码？</font>

1. 101：客户要求服务器根据请求转换HTTP协议版本；
2. 200：交易成功；
3. 304：客服端已执行GET，但文件未变化；
4. 306：前一版本HTTP中使用的代码，现行版本中不再使用；
5. 400：错误请求，如语法错误；
6. 403：服务器接收到请求，但是拒绝提供服务；
7. 404：没有发现文件，请求资源不存在；
8. 500：服务器产生内部的错误；
9. 503：服务器当前不能处理客服端的请求，一段时间后可能恢复正常；
10. 505：服务器不支持或拒绝支持请求头中指定的HTTP版本。

54. <font color=red>前端常用的设计模式有哪些？</font>

1. 工厂模式；
2. 抽象工厂模式；
3. 单例模式；
4. 适配器模式；
5. 组合模式；
6. 代理模式；
7. 观察者模式；
8. 策略模式；
9. MVC模式。

55. <font color=red>什么是变量提升？什么是暂时性死区？var、let 及 const 区别？</font>

提升：代码开始执行之前会将变量声明提升到当前作用域的顶部（赋的值不会提升）；

暂时性死区：使用 let 或 const 声明变量时，不能在声明变量之前就使用该变量；

var、let 及 const 区别：

1. 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部；

2. var 存在提升，我们能在声明之前使用（undefined）。let、const 因为暂时性死区的原因，不能在声明前使用（报错）；

3. var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会（当前作用域）；

4. let 和 const 作用基本一致，但是后者声明的变量不能再次赋值（可以修改）。

56. <font color=red>什么是模块化？</font>

1. 立即执行函数：（function（）{}）（）；
2. AMD 和 CMD：使用 define 定义和 require 引入；
3. Common JS：使用 module.export 导出 和 require 引入；
4. ES Module：使用 export 或 export default 导出模块，import 引入模块。

57. <font color=red>并发与并行的区别？</font>

并发：宏观概念，在一段时间内通过任务间的切换完成所有的任务，这种情况称之为并发；

并行：微观概念，同时完成多个任务的情况称之为并行。

58. <font color=red>什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？</font>

回调函数：回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当主函数执行完之后，再执行传进去的这个函数；

缺点：容易写出回调地狱（Callback hell），不利于阅读和维护，不能使用 try catch 捕获错误，不能直接 return；

解决方法：

1. Generator：可以控制函数的执行；
2. Promise：在构造 Promise 的时候，构造函数内部的代码是立即执行的；
3. async 及 await：await 只能配套 async 使用。

59. <font color=red>手写一个简易版的Promise？</font>

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
    const that = this
    that.state = PENDING
    that.value = null
    that.resolvedCallbacks = []
    that.rejectedCallbacks = []
    
    // 完善 resolve 和 reject 函数
    function resolve(value) {
        if (that.state === PENDING) {
            that.state = RESOLVED
            that.value = value
            that.resolvedCallbacks.map(cd => cd(that.value))
        }
    }
    
    function reject(value) {
        if (that.state === PENDING) {
            that.state = REJECTED
            that.value = value
            that.rejectedCallbacks.map(cd => cd(that.value))
        }
    }
    
    // 完善执行 fn 函数
    try {
        fn(resole, reject)
    } catch（e） {
        reject(e)
    }
}

// 完善 then 函数
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    const that = this
    onFulfilled = typeof onFulfilled === 'functoin' ? onFulfilled : v => v
    onRejected = typeof onRejected === 'function' ? onRejected : r => {
        throw r
    }
    if (that.state === PENDING) {
        that.resolvedCallbacks.push(onFulfilled)
        that.rejectedCallbacks.push(onRejected)
    }
    if (that.state === RESOLVED) {
        onFulfilled(that.value)
    }
    if (that.state === REJECTED) {
        onRejected(that.value)
    }
}

60. <font color=red>浏览器中Event Loop执行顺序？</font>

执行顺序：

1. 首先执行同步代码，这属于宏任务；

2. 当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行；

3. 执行所有微任务；

4. 当执行完所有微任务后，如有必要会渲染页面；

5. 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数。

61. <font color=red>new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？</font>

原理：

1. 新生成一个空对象；
2. 将构造函数的作用域赋给新对象（链接到原型）；
3. 绑定this；
4. 返回新对象。

区别：

1. 使用字面量创建对象有助于优化性能；
2. 使用字面量创建对象代码的可读性更高；

62. <font color=red>JS 分为哪两大类型？都有什么各自的特点和区别？你该如何判断正确的类型？</font>

js两大类型：基本类型、引用类型

特点：

1. 基本类型：按值访问，可操作保存在变量中的实际的值。基本类型值指的是简单的数据段。
2. 引用类型：当复制保存着对象的某个变量时，操作的是对象的引用，但在为对象添加属性时，操作的是实际的对象。引用类型值指那些可能为多个值构成的对象。

区别：

1. 基本类型的变量是存放在栈区的；
2. 引用类型的值是同时保存在栈内存和堆内存的；
3. 基本类型的比较是值得比较；
4. 引用类型的比较是引用的比较。

判断类型：

1. typeof：可以判断数据类型；
2. instanceof：用来判断当前对象是否是另一个对象的实例（是否挂载在它的的原型上，其判断类型也不是完全正确的）。