2019前端面试题

1、小程序怎么调后台数据的

wx.request({
	url: '',
	data:{},
	header: {'content-type: 'application/json''},
	success: function(data){console.log(data);}
}).

2、jQuery和js的执行顺序的

• 页面中的$(function(){})无论是在什么位置，都是在页面和其他js执行完才执行的，并且位置靠前的$(function())无论是在什么位置，都是在页面和其他js执行完才执行的，并且位置靠前的(function(){})中的内容先执行；
• $(function(){})是在其他js执行完才执行，所以在$(function())是在其他js执行完才执行，所以在(function(){})中可以获取它位置后声明的变量；
• 页面中的普通js代码(此处用于区别 $(function(){})中的代码)和html代码也是顺序执行的；
• window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行，有且只能有一个；
• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。可以多个，并都会执行。

javascript是一门单线程语言
Event Loop是javascript的执行机制
除了广义的同步任务和异步任务，我们对任务有更精细的定义：
macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

先执行微任务，再执行宏任务。promise的then放到微任务里。

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})//1，7，6，8，2，4，3，5，9，11，10，12。

3、闭包、作用以及优缺点

函数嵌套函数，内部函数可以访问外部作用域，这个内部函数就是外部函数的闭包。

4、跨域
1）跨域发生的原因：
a、浏览器限制
b、跨域（端口不一样）
c、XHR(XMLHttpRequest)请求（如果访问的不是xhr请求的话，浏览器不会报错）
2）解决思路
a、浏览器
chrome --deisable-web-security --user-data-dir=g:\temp3 禁止浏览器去校验是否跨域
b、XHR：dataType:JSONP，后台需要改动
普通的请求是xhr，返回的是json对象；jsonp发出的请求是script，返回的类型的js脚本，URL会加上callback(约定的参数) 前端jsonp:‘callback’，后端super(callback)
原理是：给页面添加了一个script脚本

原理：jsonp是一个非官方协议，它是一个约定，它约定了我请求的参数里面如果包括了指定的参数，默认就是callback，这就是一个jsonp请求；服务器发现是jsonp请求的时候，就会把返回的值由原来的json对象改成js代码，js代码是函数调用的形式，它的函数名是callback参数的值，它的函数的参数是原来返回的json对象。

弊端：服务器需要改动代码支持；只支持GET；发送的不是XHR请求
c、跨域：被调用方(支持跨域)、调用方(隐藏跨域，)
浏览器是先执行后判断的
如何产生：在请求头增加一个origin:当前的访问接口
filter解决：后台请求头增加：Access-Coutrol-Allow-Origin: 、Access-Control-Allow-Methods: 、Access-Control-Allow-Headers: content-type
会调用两次请求，第一次是预检命令：options，预检命令的缓存：Access-Control-Max-Age: 时间
带Cookie的跨域：ajax需要加 xhrFields: {withCredentials: true}；后台请求头增加：Access-Coutrol-Allow-Origin: ‘origin必须是全匹配完整的域名，不能使用’、Access-Control-Allow-Methods: 、Access-Control-Allow-Headers: Content-Type、多加一个Access-Control-Allow-Credentials: true
带自定义头的跨域：ajax需要加headers:{“x-header（滴定仪）”: aaa},beforeSend: function(xhr){xhr.setRequestHeader(“x-header2（自定义）,bbb”)}；服务器增加Access-Control-Allow-Headers: content-type,x-heasder,x-header2；最好不要这样写死，
支持所有自定义头
String header -= req.getHeader(‘Access-Control-Allow-Headers’);
if(!org.springframework.util.StringUtils.isEmpty(header)){
res.addHeader(‘Access-Control-Allow-Headers’, header);
}
被调用方解决跨域
nginx解决跨域问题 虚拟主机配置
APACHE解决方案：
Header always set Access-Control-Allow-Methods ""
Header always set Access-Control-Allow-Credentials “true”
Header always set Access-Control-Max-Age “3600”
# 处理预检命令OPTIONS, 直接返回204
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.)$ “/” [R=204,L]
SPRING框架解决方案
增加一个注解：@CrossOrigin 可以放在类上面

调用方解决跨域：
1.隐藏跨域：请求接口是相对地址
什么是反向代理：
反向代理-NGINX配置
反向代理-APACHE配置

5、工作中比较常见的简单请求：
方法为：GET/HEAD/POST
请求header里面：无自定义头、Content-Type为以下几种：text/plain、multipart/form-data、application/x-www-form-urlencoded
工作中常见的非简单请求有：
put，delete方法的ajax请求
发送json格式的ajax请求
带自定义头的ajax请求

6、箭头函数与普通函数的区别

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数
eg:elements.map(({ “length”: lengthFooBArX }) => lengthFooBArX);
1.首先箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
2.this,普通函数构造函数的 this 指向了一个新的对象；如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象;但是箭头函数的则会捕获其所在上下文的 this 值，作为自己的 this 值。在使用call或apply绑定时,相当于只是传入了参数,对this没有影响
3.箭头函数不绑定arguments,取而代之用rest参数…解决
4.箭头函数当方法使用的时候没有定义this绑定

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window
obj.c(); // prints 10, Object {...}

5.箭头函数不能当做Generator函数,不能使用yield关键字
6.不能简单返回对象字面量

var func = () => {  foo: 1  };
// Calling func() returns undefined!

var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name

//如果要返回对象字面量,用括号包裹字面量
var func = () => ({ foo: 1 });
7.箭头函数不能换行

var func = ()
           => 1; // SyntaxError: expected expression, got '=>'

7、对象循环是按什么进行排序的
Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此，使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律：它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。
而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。

8、http请求：get/pust/put/delete 查询、新增、修改、删除
get：接口查询，query参数不加密，直接拼接到接口路径后面
请求指定的页面信息，并返回实体主体。
GET请求请提交的数据放置在HTTP请求协议头中，GET方法通过URL请求来传递用户的输入，GET方式的提交你需要用Request.QueryString来取得变量的值。
GET方法提交数据，可能会带来安全性的问题，数据被浏览器缓存。
GET请求有长度限制
post：创建订单或创建某个动作，参数值是加密的
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。
POST请求可能会导致新的资源的建立和/或已有资源的修改。
POST方式提交时，你必须通过Request.Form来访问提交的内容
put：与patch都是update操作，put是全局而言；patch是局限于某一条件或范围而言。参数需要query格式。从客户端向服务器传送的数据取代指定的文档的内容。
delete：删除请求服务器删除指定的页面。
DELETE请求一般返回3种码
200（OK）——删除成功，同时返回已经删除的资源。
202（Accepted）——删除请求已经接受，但没有被立即执行（资源也许已经被转移到了待删除区域）。
204（No Content）——删除请求已经被执行，但是没有返回资源（也许是请求删除不存在的资源造成的）。