我碰到的那些面试题js及es6(1)

什么是es6？

es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。比如箭头函数、字符串模板、generators(生成器)、async/await、解构赋值、class等等，还有就是引入module模块的概念。

Class（es6）继承和prototype继承的区别是什么

在以前JS传统做法是当生成一个对象实例，需要先定义构造函数，然后通过prototype的方式来添加方法,在生成实例。

其实class 说到底也是一种语法糖。在ES5中原本的构造函数被constructor替代了,本来需要定义在prototype上面的 方法直接定义在class里面即可

什么是闭包？闭包有什么用

闭包可以理解为定义在一个函数内部的函数，用来读取这个函数内部变量。本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包最大用处有两个：1，可以读取函数内部的变量。2，让这些变量始终保持在内存中，不会在被调用后自动清除。

闭包的缺点：内存消耗大，ie中可能导致内存泄漏。解决办法：退出函数之前，将不使用的局部变量全部删除。

let var const 的区别

Const定义的变量不可以修改，而且必须初始化

Var定义的变量可以修改，如果不初始化会输出undefined，不会报错

Let是块级作用域，函数内部使用let定义后，对函数外部无影响

简述src和href的区别

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src表示来源地址，在 img、script、iframe 等元素上。 src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

浏览器输入url到页面展示的过程

输入网址——缓存解析——域名解析——tcp连接，三次握手——页面渲染

水平垂直居中的实现

1、margin

根据已知的宽高写死，不推荐

2、定位 + margin-top + margin-left

3、定位 + margin 同样是使用绝对定位，但四个方向的偏移量全都为0，之后设置 margin:auto 分配剩余空间，令元素的均匀拖拽至父元素的中心位置。

4、在子元素上设置，transform: translate(-50%, -50%); 用于平面的2D转换，后面的百分比以自身的宽高为参考，定位后将元素的左上角置于父级中央，之后再用 transform 进行偏移，相当于上面设置的 margin-top 和 margin-left。

5、设置父元素为 flex 弹性盒模型，并在主轴和副轴上设置居中

列举html5和css3的新标签

H5 <heade> <nav> <article><seection> <aside> <footer>

C3 所有动画属性animation、背景的origin和size、边框圆角相关、Box 属性、透明度等等

CookielocalStorage sessionStorage 的异同

javascript的typeof返回哪些数据类型

string,boolean,number,undefined,function,object

例举3种强制类型转换和2种隐式类型转换

强制（parseInt,parseFloat,number）隐式（== ===）

split()join() 的区别

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

数组方法pop() push() unshift() shift()

pop()尾部删除push()尾部添加 unshift()头部添加 shift()头部删除

ajax请求的时候get 和post方式的区别

一个在url后面，一个放在虚拟载体里面安全问题：GET方式请求的数据会被浏览器缓存起来，这种方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。

如何阻止事件冒泡

ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

如何阻止默认事件

(1) return false；(2) ev.preventDefault();

解释 jsonp 的原理，以及为什么不是真正的 ajax?

Jsonp的原理就是利用浏览器可以动态地插入一段js并执行的特点完成的。

Jsonp和ajax的区别：

ajax的核心是：通过XmlHttpRequest获取非本页面内容

jsonp的核心是：动态添加script标签调用服务期提供的js脚本

ajax通过服务端代理一样跨域

jsonp也不排斥同域的数据的获取

jsonp是一种方式或者说非强制性的协议 ajax也不一定非要用json格式来传递数据

jsonp只支持get请求，ajax支持get和post请求

水平垂直居中代码实现

第一种：

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第二种：

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第三种：

#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种：

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

谈谈垃圾回收机制方式与内存管理

定义：执行环境负责管理代码执行过程中使用的内存。

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。

IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。

2、合理的GC方案：(1)、遍历所有可访问的对象;(2)、回收已不可访问的对象。

3、GC缺陷：(1)、停止响应其他操作；

4、GC优化策略：(1)、分代回收（GenerationGC）;(2)、增量GC

构造函数是什么，原型是什么，什么是原型链

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象。即为对象变量赋初始值。每个构造函数的实例都将共享构造函数的初始值。构造函数的出现是为了解决使用Object构造函数和字面量表示法不方便创建大量重复对象的问题。

每个函数都有prototype(原型)属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来给实例共享属性和方法的。而每个实例内部都有一个指向原型对象的指针。

由于_proto_是任何对象都有的属性，而js里万物皆对象，所以回形成一条_proto_连起来的链条，递归访问_proto_必须最终到头，并且值为null。

当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但不会查找自身的prototype

Html标准是什么，什么是怪异模式

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。标准模式是W3C出台标准之后才出现的，也就是说在W3C标准出台之前，浏览器一直运行在怪异模式。

Css2和css3的差别

在CSS2基础上新增属性，比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等

Grunt，glup，webpack打包工具的比较

gulp和grunt是流管理工具，通过一个个task配置执行用户需要的功能，如格式检验，代码压缩等，值得一提的是，经过这两者处理的代码只是局部变量名被替换简化，整体并没有发生改变，还是你的代码。

而webpack则进行了更彻底的打包处理，更加偏向对模块语法规则进行转换。主要任务是突破浏览器的鸿沟，将原本浏览器不能识别的规范和各种各样的静态文件进行分析，压缩，合并，打包，最后生成浏览器支持的代码。

JQ中选择器的实现原理

JQuery 其实就是在一个匿名自调用函数内来实现把JQuery 作为 window 对象的方法，这样，当我们想使用 JQuery 的时候，就可以通过 window.JQuery() 或 window.$() 来使用，因为 window 对象的属性和方法都是全局的，所以也可以简写为 JQuery() 或 $()。

如何理解虚拟dom

在用JS对象表示DOM结构后，当页面状态发生变化而需要操作DOM时，我们可以先通过虚拟DOM计算出对真实DOM的最小修改量，然后再修改真实DOM结构(因为真实DOM的操作代价太大)。

虚拟dom更像是js和dom之间的一个缓存，js构建虚拟dom树，视图变化时构建新的虚拟dom树，比较两者之间差别，把差异的地方打进dom。不需要重新渲染整个dom树。

display:none和visibility:hidden区别

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数。

某种意义上，display：none 是让元素消失，而visibility: hidden是让元素隐藏不可见。

Null和undefined的区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到“object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

为什么要初始化css样式

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

什么是盒子模型，IE和其他主流浏览器的区别

把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型

盒子模型有两种形式：标准盒模型，怪异盒模型

在标准盒模型下，width和height是内容区域即content的width和height。

一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型（ie盒子）下，width和height除了content区域外，还包含padding和border。盒子的总宽度为

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

前端安全问题以及如何预防

Xss注入攻击预防方法：将前端输出数据都进行转义最为稳妥

Csrf漏洞

1.增加token验证.因为cookie发送请求的时候会自动增加上，但是token却不会，这样就避免了攻击

2.Referer验证。页面来源的判断

如何防止浏览器缓存

在引用js、css、文件的url后面加上 ?+Math.random()

跨域解决方案

1、通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、跨域资源共享（CORS） 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

Foreach和map的区别

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。 map方法不会对空数组进行检测，map方法不会改变原始数组。浏览器支持：chrome、Safari1.5+、opera都支持，IE9+,

若arr为空数组，则map方法返回的也是一个空数组。

forEach方法用来调用数组的每个元素，将元素传给回调函数 forEach对于空数组是不会调用回调函数的。

无论arr是不是空数组，forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。

何为敏捷开发

敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备可视、可集成和可运行使用的特征。换言之，就是把一个大项目分为多个相互联系，但也可独立运行的小项目，并分别完成，在此过程中软件一直处于可使用状态。

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

方法一：使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){

$("#name").val(event.key+”=”+event.newValue);

});

方法二、使用cookie+setInterval

Rem和em的区别

rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定

弹性盒有哪些属性？

flex-direction 属性

flex-direction 用来来确定主轴的方向，从而确定基本的项目排列方向。

flex-direction 属性的取值及其含义：

row（默认值）：主轴为⽔平⽅向，起点在左端； row-reverse：主轴为水平方向，起点在右端；

column：主轴为垂直方向，起点在上沿；

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线上（又称“轴线”）上。 flex-wrap 属性定义，如果以条轴线排不下，如何换行。

flex-wrap 属性的取值及其含义：

nowrap（默认值）：不换行（强行挤压，平均分配宽度）；

wrap：换行，第一行在上⽅（从上往下一次排列）；

wrap-reverse：换行，第一行在下方（从下往上一次排列）；

说明：如果宽度固定，并且有多余空间，那么多余空间将会平均分配给每一行的外边距。

flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

.box{ flex-flow: row wrap; }

justify-content 属性

justify-content 属性定义了项目在主轴上的对齐方式。

justify-content 属性的取值及其含义：

（具体对齐方式与主轴的方向有关。下面假设主轴为从左到右。）

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项⽬之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性

align-items 属性的取值及其含义：

（具体对⻬⽅式与交叉轴的方向有关。下面假设交叉轴为从左到右。）

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：所有文字相对于同一基线对齐

align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content 属性的取值及其含义：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

Click和onclick的区别

1、onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。

2、click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件

3、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；

4、onclick则是给这个id注册一种行为，可以重复触发

5、click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件。

什么是单线程

单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

创建出的一个元素如何给他写绑定事件

$(document).on("click","strong",function(){ //动态创建事件绑定 $(this).parent().remove() })

数组插入元素的方法

Push（）

Unshift（）

Splice()

var items = ['one', 'two', 'three','four'];

items.splice(items.length / 2, 0,'hello');//0 表示不删除元素

//items = ['one', 'two', 'hello','three', 'four'];

说出几个运用this的场景以及this指向

1.纯函数调用 this指向window 2.事件调用谁调用这个函数，this就指向谁 3.定时器调用在定时器中，this指向window 4.构造函数调用构造函数生成一个新的对象，this指向新建的这个对象 5.apply this指向apply中的第一参数

相同点：

1.设置UIElement元素Visibility属性为Hidden和设置其Opacity为0，都能达到隐藏元素效果。

2..两种方法隐藏元素后将同样对其子元素生效，且无法通过子元素设置Visibility为visible或Opacity为1来达到反隐藏的效果。

不同点：

3.设置为Visibility为Hidden的元素被隐藏且无法接收输入事件，而通过设置Opacity为0隐藏的元素仍可以正常接收输入事件。

题外：

4.两种方法都只是隐藏本元素及其子元素，但不影响其他元素布局，而将Visibility设置为collapsed将隐藏本元素并会对整体元素进行重新布局。

————————————————

1,ES中新增的内容有哪些？

变量定义(let和const,可变与不可变，const定义对象的特殊情况)

关于变量和常量

let 用来声明变量，类似于变量，但是所声明的变量，只在let命令所在的代码块内有效

需要注意的地方：

1.不存在变量提升，未声明直接报错

2.暂时性死区

3.for循环具有两个作用域，外面的变量和里面的变量互不干扰

const

用来声明一个只读的常量，一旦尚明，常量的值就不可以改变了，而且声明的时候必须赋值

解构赋值

模板字符串

数组新API(例：Array.from(),entries(),values(),keys())

module

扩展运算符 （对数组或对象进行扩展生成新的数组或对象）

箭头函数(rest参数，扩展运算符，::绑定this)

特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。

1不能作为构造函数，不能使用new

2不能使用argumetns,取而代之用rest参数...解决

3不绑定this，会捕获其定义时所在的this指向作为自己的this。由于在vue中自动绑定 this 上下文到实例中，因此不能使用箭头函数来定义一个周期方法。箭头函数的this永远指向上下文的this，call、apply、bind也无法改变

4箭头函数没有原型对象

箭头函数其实只是一个匿名函数的语法糖，区别在于普通函数作用域中的this有特定的指向，一般指向window，而箭头函数中的this只有一个指向那就是指当前函数所在的对象，其实现原理其实就是类似于之前编程的时候在函数外围定义that一样，用了箭头函数就不用定义that了直接使用this

Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))

（1） Set 类似于数组，但数组可以允许元素重复，Set 不允许元素重复

（2）Map 类似于对象，但普通对象的key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型

Promise对象(前端异步解决方案进化史，generator函数，async函数)

Class语法糖(super关键字)

2，什么是promise？Promise.all ，Promise.race

Promise 是es6中新增的对象，可以通过链式调用的方式解决回调地狱的问题

通过new方式进行

.then 接收成功的回调函数

.catch 接收失败的回调函数

then 可以实现链式调用，回调函数的参数为上一次then的返回值

Promise.all 接收一个Promise对象组成的数据，表示数组中所有的Promise对象都执行完之后触发

Promise.race 接收一个Promise对象组成的数据，表示数组中只要有一个完成就结束

3，箭头函数和一般函数的区别？

（this指向问题）

4，如何改变this指向

bind call apply

5,原型和原型链

通过function定义的对象有一个显示的原型prototype

所有的对象都有一个隐式的原型--proto--

6,闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

7，递归

（自己调用自己）

无限极分类

8，在js中如何和服务器实现数据通信？

ajax

XMLHttpRequest

websocket

from 表单提交

method

action

9， 开发时如何实现数据的实时更新？

websocket

轮询（定时向服务器发送请求）

10 ，你常用的定时器实现方式有哪些？

setInterval

间隔一定的时间之后调用一个方法，重复执行

setTimeout

等待一段时间之后执行一个方法，只执行一次（延迟执行）

requestAnimationFrame

动画帧，和显示器的刷新频率有关，（每秒钟60次）

11，你在开发的时候怎么解决跨域问题？

cors

web服务端反向代理

jsonp

12,事件传播流程？

捕获阶段

目标阶段

冒泡阶段

• event.stopPropagation()
• event.cancleBubble = true

这是阻止事件冒泡的两种方法

事件阻止？

立即阻止

· event.preventDefault()

· event.returnValue =false

这是阻止默认行为的两种方式

· return false

这个方法能够实现同时阻止默认行为和事件冒泡。即当对一个链接使用时，会使这个链接不能实现点击跳转页面，并且也不会沿dom树向上进行冒泡。

13，事件监听方式（on ,addEventListener)有什么区别？

on事件

Javascript中可以对一些页面的事件设定触发值，例如常用的点击 onclick，鼠标移动 onmousemove，或者移动端屏幕点击 ontouchstart，其它类似的还有 onmousedown,onmouseup, onchange, onfocus, onmouseenter, ontouchmove, ontouchend 等等，可以对其设定值来实现事件触发后执行的操作

addEventListener()方法

这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：

addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。

参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。

参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是**捕获，true表示捕获，默认的false表示冒泡。

移除事件监听

如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()，语法是：

removeEventListener(event, function)

参数与addEventListener()一致。

addEventListener除了可以设置元素触发顺序外，还能多次绑定事件，因为 on 事件多次绑定的话会出现覆盖。

14，自定义事件？有没有用过？

JavaScript提供了几种自定义事件的方式：

1. Event() 构造函数, 创建一个新的事件对象 Event

2. CustomEvent() 创建一个自定义事件

3. document.createEvent() 创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。

15，深拷贝和浅拷贝？ （插件lodash)

浅拷贝，只能拷贝第一级的数据

深拷贝，能拷贝到多级数据

16，json和js对象之间的转换？

SON字符串转变为JS对象：JSON.parse( );

JS对象转变为JSON字符串：JSON.stringify();

17，本地存储

常用浏览器存储方案有，cookie，session，localstorage，sessionstroage，区别在于：

1.方式： cookie通过请求头发送，在浏览器与服务器之间来回传递，sessionStroage与 localStroage不会把数据发给服务器，仅在本地保存

2.存储量：cookie存储量小，一般在4到8kb,其余存储量大5M

3.数据有效期不同，

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保存

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据

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

4.作用域

sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的

cookie也是在所有同源窗口中都是共享的。

sessionStorage，只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放

localStorage，只要没有手动清除，就会一直保留，永久存储，以文件形式存储

cookie,是用来跟踪用户信息的，默认只是一次性会话，维持到浏览器关闭

18,cookie 和 session 的区别？

cookie存储在服务器端 session客户端存储

19，数组去重排序？

通过Array构造函数的原型Array.prototype向所有Array对象添加数组去重的方法，new一个数组，然后遍历原数组，查找每个元素在新数组中是否存在，若不存在就将该元素push进新数组，最后新数组即为所求的原数组去重结果

js中的sort会将排序的元素类型转化成字符串进行排序。不过它是一个高阶函数，可以接受一个函数作为参数。而我们可以通过传入内部的函数，来调整数组的升序或者降序。

20，数组中常用的操作？

find

findIndex

filter

sort

map

forEach

reduce

splice

join

push

pop

shift

unshift

21,字符串常见操作？

charAt(index):返回指定索引处的字符串

charCodeAt(index):返回指定索引处的字符的Unicode的值

concat(str1,str2,...):连接多个字符串，返回连接后的字符串的副本

fromCharCode():将Unicode值转换成实际的字符串

indexOf(str):返回str在父串中第一次出现的位置，若没有则返回-1

lastIndexOf(str):返回str在父串中最后一次出现的位置，若没有则返回-1

match(regex):搜索字符串，并返回正则表达式的所有匹配

replace(str1,str2):str1也可以为正则表达式，用str2替换str1

search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置

slice(start,end)：返回字符索引在start和end（不含）之间的子串

split(sep，limit)：将字符串分割为字符数组，limit为从头开始执行分割的最大数量

substr(start，length)：从字符索引start的位置开始，返回长度为length的子串

substring(from,to)：返回字符索引在from和to（不含）之间的子串

toLowerCase()：将字符串转换为小写

toUpperCase()：将字符串转换为大写

valueOf()：返回原始字符串值

22，对象的常见操作？

Object.keys(obj)返回对象的key组成的数组

Object.values(obj)返回对象的value组成的数组

Object.assign()可以将源对象复制到目标对象中

Object.entries(obj)返回对象的key和value组成的数组

obj.hasOwnProperty()hasOwnProperty 方法判断对象中属性是否存在

23，常见的设计模式有哪些？

单例模式

工厂模式

24，面向对象

封装

继承

多态

25，HTTP请求报文？ get 和 post 区别

请求行

请求头

请求体

请求体中的数据是由请求头中的content-type决定

get 和 post的区别：

1，post相较于get 更安全一些

2，post请求 的数据在请求体中进行传递，get 在url 地址中传递。get没有请求体

3，get请求每一次都是幂等的。get请求不会对数据产生副作用

4，post请求传递的数据量相对于get更大。post请求传递的数据大小由服务器端做限制

5，post常常用来做数据的新增

26，rest风格的api

(get/post/put/delete)

27,http请求常见状态码

28，http和 https 有什么区别？

所以http和https之间的区别就在于其传输的内容是否加密和是否是开发性的内容

https协议需要到ca申请证书，一般免费证书很少，需要交费。

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

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

http的连接很简单，是无状态的。

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

29，null和undefined的区别

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。