PS:json对象必须是key:value形式
1.var let const的区别：
1>var存在变量提升，let和const不存在变量提升
2>var是全局变量，let和const是块级作用域
3>var可以重复申明变量，具有覆盖性，let const不可以重复 申明变量，const申明的变量不可被改变为常量
let的作用：
1>let解决了for循环中var变量提升的问题
2>let不会污染全局变量
使用建议：一般不使用var，当变量值需要更改时使用let，不需要时使用const
3.apply方法：将参数以一个数组的方式一起传递过去，必须接受两个参数，第一个参数可以为null,’’,或者数字和字符串
4.call方法：将参数一个一个分开传递过去
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。
它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
5.ES6中数组的新增方法：
1>map---------->映射 一对一
2>reduce ------------>汇总 多对一
3>filter ---------------->过滤器
4>forEach --------------->循环（迭代）
6.字符串：
1>多了两个新方法
startsWith:判断一个字符串是以什么开头的，可以判断网站是什么类型
endsWith：判断一个字符串是以什么结尾的，可以通过文件后缀名判断文件是什么类型
2>字符串模板
插入变量使用${变量名}
7.ES6面向对象---->继承(extends、super) 封装 多态
1>class关键字 构造器和类分开了
2>class里面直接加方法，new了之后，直接使用
8.json对象
JSON.stringify(): 从一个对象中解析出字符串
JSON.parse():从一个字符串中解析出JSON对象
9.promise：消除异步操作 ==========》Promise.all([]):全部成功，Promise.race([]):只取最快成功了一个(最常用的是Promise.all)
//promise消除异步操作
// function createPromise(url) {
// return new Promise(function(resolve, reject) {
// $.ajax({
// url,
// dataType: 'json',
// success(arr) {
// resolve(arr)
// },
// error(err) {
// reject(err)
// }
// })
// })
// }
// Promise.all([
// createPromise('arr.txt'),
// createPromise('json.txt')
// ]).then(function(arr) {
// let [a] = arr
// console.log("成功了" + a)
// }, function(err) {
// console.log('失败了', +err)
// })
//由于qjuery内部封装了promise。所以我们可以直接使用
Promise.all([
$.ajax({
url: 'arr.txt',
dataType: 'json'
}),
$.ajax({
url: 'json.txt',
dataType: 'json'
}),
]).then(function(results) {
console.log('全都成功了')
}, function(reject) {
console.log('至少一个失败了')
})
//有了promise之后的异步
// Promise.all([
// $.ajax({}),
// $.ajax({})
// ]).then(resoles => {
// //全都成功了
// }, err => {
// //至少一个失败了
// })
10.generator生成器函数----->yield传参和返回，也是为了解决异步的问题
//generator生成器函数，重点是yield
//普通函数-->一路到底，从函数执行到函数结束,不能停止
//generator函数 --->中间能停
//generator申明函数时必须用*标记
// function* show(num) {
// alert(`${num}`)
// alert('a');
// let y = yield 12 //暂停函数的执行,但是当前这行会继续执行
// alert('b');
// console.log(y)
// return 55
// }
// let geneObj = show(99) //generator函数会自动生成一个对象，由该对象调用next()，执行函数
// let result_1 = geneObj.next(); //执行到alert('a'),遇到yield，暂停执行,不能给yield传参
// let result_2 = geneObj.next(); //继续执行 alert('b')，可以给yield传参,这里传给的变量y
// console.log(result_1) //{value: 12, done: false}
// console.log(result_2) //{value: 55, done: true} 最后步骤的value由show()的return决定,没用return 则为unidefined
// //generator的本质是： 这里将show() 函数分为了两个小函数show_1() 和show_2(), 当第一次geneObj.next() 时调用show_1, 第二次调用show_2
// //有多少个yield就分割为yield+1个小函数
// //yield的功能：1.传参 2.返回
//yield的应用,其中runner是自己封装的库，不是函数自己本身提供的,不能使用箭头函数
// runner(function*() {
// let data_1 =yield $.ajax({
// url: 'arr.txt',
// dataType: 'json'
// });
// let data_2 =yield $.ajax({
// url: 'json.txt',
// dataType: 'json'
// });
// console.log(data_1)
// console.log(data_2)
// })
11.Promise与generator的区别：当需要对异步请求的数据写逻辑时，Promise代码量增加，和普通回调函数差不多，而genarator代码量则小很多。====》Promise适合一次性读多个数据没用代码逻辑，generator适合有逻辑的读取
在这里插入代码片 处理异步的操作
1>普通异步，回调
2>Promise
3>generator
回调
$.ajax({
url: 'xxx',
dataType: 'json',
success() {
$.ajax({
url: 'xxx',
dataType: 'json',
success() {
$.ajax({
url: 'xxx',
dataType: 'json',
success() {
console.log("成功了")
},
error() {
console.log('失败了')
}
})
},
error() {
console.log('失败了')
}
})
},
error() {
console.log('失败了')
}
})
Promise
Promise.all([
$.ajax({
url: 'xxx',
dataType: 'json'
}),
$.ajax({
url: 'xxx',
dataType: 'json'
}),
$.ajax({
url: 'xxx',
dataType: 'json'
})
]).then(function(result) {
console.log('成功了')
}, function(err) {
console.log("失败了")
})
generator
runner(function* () {
let data_1 = yield $.ajax({
url: 'xxx',
dataType: 'json'
});
let data_2 = yield $.ajax({
url: 'xxx',
dataType: 'json'
});
let data_3 = yield $.ajax({
url: 'xxx',
dataType: 'json'
});
console.log(data_1)
console.log(data_2)
console.log(data_3)
})
当Promise处理带逻辑的异步请求时,代码量和普通回调一样大
Promise.all([
$.ajax({
url: 'getUserData',
dataType: 'json'
})
]).then(results => {
let data = results[0];
if (data.type == 'Vip') {
Promise.all([$.ajax({
url: 'getVipItem',
dataType: 'json'
})]).then(results => {
console.log("成功了")
//接下里生成列表、展示.....
}, err => {
console.log("失败了")
})
} else {
Promise.all([$.ajax({
url: 'getItem',
dataType: 'json'
})]).then(results => {
console.log("成功了")
//接下里生成列表、展示.....
}, err => {
console.log("失败了")
})
}
}, err => {
console.log("失败了")
})
带有逻辑的genarator函数
runner(function*() {
let data = yield $.ajax({
url: 'getUserData',
dataType: 'json'
})
if (data == "Vip") {
let vipData = $.ajax({
url: 'getVipData',
dataType: 'json'
})
} else {
let userData = $.ajax({
url: 'getItem',
dataType: 'json'
})
}
//生成列表、展示...
})
12.set和map
Set：
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换
应用场景Set用于数据重组，Map用于数据储存
13.常用解决跨域的问题：jsonp nginx cors
jsonp:只适用于get方法
跨域：通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端，或一者为IP地址，一者为域名地址（在跨域问题上，域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP），之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
1.Jsonp 利用script标签发起get请求不会出现跨域禁止的特点实现
2.window.name+iframe 借助中介属性window.name实现
3.html5的 postMessage 主要侧重于前端通讯，不同域下页面之间的数据传递
4.Cors需要服务器设置header：Access-Control-Allow-Origin
5.Nginx反向代理 可以不需要目标服务器配合，不过需要Nginx中转服务器，用于转发请求（服务端之间的资源请求不会有跨域限制）
1 Jsonp
一般情况下由于同源策略我们不能够通过XHR跨域去请求资源，但是我们的script标签却可以不受此限制成功的外链到来自于其他域下的资源。利用script标签这个特点，我们可以成功的绕过同源策略。但这种方式存在局限性，我们只能够发起get跨域请求。具体实现：
客户端
服务端
script标签跨域发起get请求，同时传递在客户端已经注册的全局函数 process_fun 作为查询参数，服务端代码提取查询参数，并传入需要返回的数据。script标签还有一个特点，就是会立即执行调用所请求到的资源，所以这个时候服务端返回的 process_fun（data） 这一句代码会被立即执行，即把数据 data 传入我们事先定义好的函数 process_fun 中执行进一步的处理。
2 Cors
即跨域资源共享。实现cors通信的关键是服务器，只要服务器实现了cors接口，就可以跨源通信。不过不同于jsonp,cors对于IE8以下的浏览器是不支持的
客户端
服务端
跨域资源共享在我看来是最直接也最简便的解决跨域问题的方式了，唯一的缺陷也就只是不能覆盖支持所有的浏览器。客户端不需要去做另外的改变，跟一般状况下发送的异步请求一致就行，甚至客户端根本不需要知道所请求的接口是跨域的。而服务端所需要做的也只是返回响应的同时设置 Access-Control-Allow-Origin 响应头部，意为“予许指定源（‘*’为任意源）发起跨域资源请求”。
3 window.name 和 postMessage
window.name 和 postMessage 主要都侧重于纯前端页面之间的数据通讯，前者利用了 “ 在同一浏览器窗口载入的不同页面（ 无论它们是否不同域 ），共享同一个window.name，并且都对 window.name 有读写的权限 ” 的这一特性来实现页面间的数据交换，后者则是HTML5的API，不同域下的页面在满足一定关系的条件下可以通过此API跨域传送数据。
4 Nginx反向代理
Nginx反向代理解决跨域问题则是利用了服务端之间的资源请求不会有跨域限制的特点实现的，具体来说就是我们前端发起的请求被Nginx拦截，再由Nginx代由转发请求到资源服务器请求资源。
比如现在我们有两个Nodejs服务，分别是http://127.0.0.1:3000 和 http://127.0.0.1:5000，5000端口对应的服务端下的页面需要发起请求3000端口所对应的服务端的资源，当然，在这种情况下如果不做任何的额外处理，请求会产生跨域。这个时候我们可以用Nginx来代理转发我们的请求，前端不去直接对资源服务器发起请求，而是改为直接访问Nginx服务器，看到这里你可能会问了，发起请求的前端页面是属于 http://127.0.0.1:5000 所在域下的，对Nginx服务发起请求难道不会和之前直接发起的请求一样出现跨域吗？所以这里需要明白的一点是，一开始我们可能是通过 http://127.0.0.1:5000/ 这样的路径访问到我们的页面的，但是如果我们使用Nginx作为反向代理，代理服务器监听8080端口，我们这时候再访问该页面就不再是访问 http://127.0.0.1:5000/ ， 而是 http://127.0.0.1:8080/ 了，在Nginx中我们再做这样的配置
location / { proxy_pass http://127.0.0.1:5000; }
就能成功访问到首页了，而这个时候首页是在 8080 端口所对应的域下（即Nginx服务）被渲染出来的，所以首页这个时候便不再与 http://127.0.0.1:5000 同域， 而是与 Nginx 服务同域了，也就是说前端这时候对 Nginx 服务发起请求就不会再是跨域。
访问 Nginx 我们可以实现了，接下来要做的就是对请求进行代理转发。
前端的 Ajax 请求是这样的：
Nginx 需要对该请求进行拦截，所以可以做如下配置：
location配置的意思是对包含 “cross_origin” 请求拦截，并对请求路径进行重写，一开始请求路径是 “/cross_origin/get_json?type=20170126” ，重写后便成了 “/get_json?type=20170126”，$1代表（.）中的内容，而（.）则代表 cross_origin 后面的全部字符，也就是我们会把 cross_origin 部分去掉，但是保留 cross_origin 之后的所有字符，当然这一步并非是绝对必要的。接下来我们再把请求代理到 3000 端口所对应的资源服务，所以请求路径从一开始的 “127.0.0.1:8080/cross_origin/get_json?type=20170126” 经过代理服务器Nginx之后变成了 “127.0.0.1:3000/get_json?type=20170126”。在 “127.0.0.1:3000” 下存在对应的接口：
现在在前端触发点击事件发起请求：
得到了响应，至此我们成功发起了跨域请求。
完。
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
